How to swap v-source-xyz's url?

[logue]

I am trying to write a process to dynamically rewrite the url value of v-source-xyz according to the value of this.$route.params.category and overlay another map, but it does not work.

The map image before the change is displayed, or the map image of the layer read before that is displayed in the foreground.

       <vl-layer-tile ref="baseLayer">
          <vl-source-xyz
            ref="baseMapSource"
            :url="'/img/map/base/{z}/{x}/{y}.png'"
            :projection="projection"
            :min-zoom="minZoom"
            :max-zoom="maxZoom"
            :tile-pixe-ratio="tilePixelRatio"
          />
        </vl-layer-tile>

      <vl-layer-tile v-if="category" ref="overlayLayer">
        <vl-source-xyz
          ref="overlayMapSource"
          :url="`/img/map/${category}/{z}/{x}/{y}.png`"
          :projection="projection"
          :min-zoom="minZoom"
          :max-zoom="maxZoom"
          :tile-pixe-ratio="tilePixelRatio"
        />
      </vl-layer-tile>

Is there a good way to swap the image of the overlay layer?

Refer to https://gis.stackexchange.com/questions/91226/force-reload-of-tiles-in-layer and refreshing the tile cache when the category variable changes as below does not work either. was.

  watch: {
    category() {
      // Reflesh Layer
      console.log(this.$refs.categoryLayerSource);
      const source = this.$refs.categoryLayer.getSource();
      source.tileCache.expireCache({});
      source.tileCache.clear();
      source.refresh();
    },
  },

[ghettovoice]

Hello @logue , try this one:

watch: {
    category() {
      // Reflesh Layer
      this.$refs.overlayMapSource.$createPromise.then(() => {
          const source = this.$refs. overlayMapSource.$source;
          source.tileCache.expireCache({});
          source.tileCache.clear();
          source.refresh();
      });
    },
  },

[logue]

I managed to implement it myself, but an error occurred, so I tried to cheat with try ~ catch.

The point is to use $createPromise. Thanks.

[ekxs0109]

it has no good way ？

[ghettovoice]

it has no good way ？

https://jsfiddle.net/ghettovoice/g3u1vLbw/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.