Disable update of tile url function for WMS/WMTS functions

#357
ghettovoice · Sep 29, 2020 · 000ec5c · 000ec5c
1 parent 65e5563
commit 000ec5c
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 140 deletions.
diff --git a/src/component/arcgis-rest-source/source.vue b/src/component/arcgis-rest-source/source.vue
@@ -28,6 +28,14 @@
           transition: this.transition,
         })
       },
+      onUrlFuncChange () {},
+    },
+    watch: {
+      urlTmpl (value) {
+        if (!this.$source) return
+
+        this.$source.setUrl(value)
+      },
     },
   }
 </script>
diff --git a/src/component/bingmaps-source/source.vue b/src/component/bingmaps-source/source.vue
@@ -67,6 +67,7 @@
           tileLoadFunction: this.tileLoadFunction,
         })
       },
+      onUrlFuncChange () {},
     },
     watch: {
       ...makeWatchers([

diff --git a/src/component/stamen-source/source.vue b/src/component/stamen-source/source.vue
@@ -36,12 +36,22 @@
         wrapX: this.wrapX,
       })
     },
+    onUrlFuncChange () {},
+  }
+
+  const watch = {
+    urlTmpl (value) {
+      if (!this.$source) return
+
+      this.$source.setUrl(value)
+    },
   }
 
   export default {
     name: 'vl-source-stamen',
     mixins: [xyzSource],
     props,
     methods,
+    watch,
   }
 </script>
diff --git a/src/component/wms-source/source.vue b/src/component/wms-source/source.vue
@@ -47,8 +47,14 @@
           tileLoadFunction: this.tileLoadFunction,
         })
       },
+      onUrlFuncChange () {},
     },
     watch: {
+      urlTmpl (value) {
+        if (!this.$source) return
+
+        this.$source.setUrl(value)
+      },
       ...makeWatchers([
         'gutter',
         'hidpi',

diff --git a/src/component/wmts-source/source.vue b/src/component/wmts-source/source.vue
@@ -102,8 +102,14 @@
           matrixIds,
         })
       },
+      onUrlFuncChange () {},
     },
     watch: {
+      urlTmpl (value) {
+        if (!this.$source) return
+
+        this.$source.setUrl(value)
+      },
       ...makeWatchers([
         'dimensions',
         'format',

diff --git a/src/mixin/tile-source.js b/src/mixin/tile-source.js
@@ -154,6 +154,10 @@ export default {
       this::source.methods.subscribeAll()
       this::subscribeToSourceEvents()
     },
+    onUrlFuncChange (value) {
+      this.$source.setTileUrlFunction(value)
+      this.scheduleRefresh()
+    },
   },
   watch: {
     opaque (value) {
@@ -185,8 +189,7 @@ export default {
     urlFunc (value) {
       if (!this.$source) return
 
-      this.$source.setTileUrlFunction(value)
-      this.scheduleRefresh()
+      this.onUrlFuncChange(value)
     },
     ...makeWatchers([
       'cacheSize',

diff --git a/test/app.vue b/test/app.vue
@@ -1,8 +1,9 @@
 <template>
   <div id="app">
-    <div class="panel">
+    <div>
+      <a href="#" @click="changeStation">Change Station</a><br>
+      {{ stationUrl }}
     </div>
-
     <vl-map ref="map" data-projection="EPSG:4326">
       <vl-view :center.sync="center" :rotation.sync="rotation" :zoom.sync="zoom"
                ident="view" ref="view" />
@@ -11,19 +12,14 @@
         <vl-source-osm />
       </vl-layer-tile>
 
-      <vl-layer-vector>
-        <vl-source-vector ident="draw" ref="vectorSource" :features.sync="features" :loader-factory="loader"></vl-source-vector>
-        <vl-style-func :factory="styleFactory" />
-      </vl-layer-vector>
-
-      <vl-interaction-select ident="modify" :features.sync="selectedFeatures" />
+      <vl-layer-tile>
+        <vl-source-wms :url="stationUrl" :layers="productLayers"></vl-source-wms>
+      </vl-layer-tile>
     </vl-map>
   </div>
 </template>
 
 <script>
-  import { createStyle, readGeoJsonFeature } from '../src/ol-ext'
-
   export default {
     name: 'app',
     data () {
@@ -32,140 +28,22 @@
         center: [0, 0],
         rotation: 0,
         features: [],
-        selectedFeatures: [],
+        geoUrl: 'http://opengeo.ncep.noaa.gov/geoserver/',
+        station: 'krax',
+        product: 'bref_raw',
       }
     },
     computed: {
-      selectedFeatureIds () {
-        return this.selectedFeatures.map(({ id }) => id)
+      stationUrl () {
+        return `${this.geoUrl}${this.station}/ows`
+      },
+      productLayers () {
+        return `${this.station}_${this.product}`
       },
     },
     methods: {
-      loader () {
-        return async () => {
-          await this.loadFeatures()
-        }
-      },
-      loadFeatures() {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            // generate GeoJSON random features
-            const features = [{
-              type: "Feature",
-              geometry: {
-                type: 'Point',
-                coordinates: [5.44921875, 26.745610382199022],
-              },
-              properties: {
-                active: false,
-              },
-            },
-              {
-                type: "Feature",
-                geometry: {
-                  type: 'Polygon',
-                  coordinates: [
-                    [
-                      [
-                        -23.37890625,
-                        45.336701909968134,
-                      ],
-                      [
-                        -49.39453125,
-                        33.137551192346145,
-                      ],
-                      [
-                        -47.4609375,
-                        3.6888551431470478,
-                      ],
-                      [
-                        -20.390625,
-                        -8.059229627200192,
-                      ],
-                      [
-                        -13.0078125,
-                        20.138470312451155,
-                      ],
-                      [
-                        -23.37890625,
-                        45.336701909968134,
-                      ],
-                    ],
-                  ],
-                },
-                properties: {
-                  active: true,
-                },
-              },
-              {
-                type: "Feature",
-                geometry: {
-                  type: "LineString",
-                  coordinates: [
-                    [
-                      44.47265625,
-                      -1.7575368113083125,
-                    ],
-                    [
-                      23.5546875,
-                      9.795677582829743,
-                    ],
-                    [
-                      47.109375,
-                      23.241346102386135,
-                    ],
-                    [
-                      22.8515625,
-                      33.137551192346145,
-                    ],
-                    [
-                      48.33984375,
-                      42.032974332441405,
-                    ],
-                    [
-                      19.86328125,
-                      48.574789910928864,
-                    ],
-                    [
-                      47.8125,
-                      56.65622649350222,
-                    ],
-                  ],
-                },
-                properties: {
-                  active: false,
-                },
-              },
-            ]
-            features.forEach(feature => {
-              feature = readGeoJsonFeature(feature)
-              this.$refs.vectorSource.addFeature(feature)
-            })
-            resolve()
-          }, 3000)
-        })
-      },
-      styleFactory() {
-        const defStyle = createStyle({
-          fillColor: 'white',
-          strokeColor: 'blue',
-          imageRadius: 5,
-          imageFillColor: 'white',
-          imageStrokeColor: 'blue',
-        })
-        const activeStyle = createStyle({
-          fillColor: 'white',
-          strokeColor: 'red',
-          imageRadius: 5,
-          imageFillColor: 'white',
-          imageStrokeColor: 'red',
-        })
-        return feature => {
-          if (feature.get('active')) {
-            return [activeStyle]
-          }
-          return [defStyle]
-        }
+      changeStation () {
+        this.station = 'kakq'
       },
     },
   }