Add vector tile selection example

2018-03-21 11:07:01 +01:00
parent 50aa24ef9d
commit 6e9cf0fd9d
2 changed files with 102 additions and 0 deletions
--- a/examples/vector-tile-selection.js
+++ b/examples/vector-tile-selection.js
@@ -0,0 +1,83 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import MVT from '../src/ol/format/MVT.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+// lookup for selection objects
+let selection = {};
+// feature property to act as identifier
+const idProp = 'iso_a3';
+
+const vtLayer = new VectorTileLayer({
+  declutter: true,
+  source: new VectorTileSource({
+    format: new MVT(),
+    url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
+      'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
+  }),
+  style: function(feature) {
+    // normal style
+    let style = new Style({
+      stroke: new Stroke({
+        color: 'gray',
+        width: 1
+      }),
+      fill: new Fill({
+        color: 'rgba(20,20,20,0.9)'
+      })
+    });
+    if (selection[feature.get(idProp)]) {
+      // selection style
+      style = new Style({
+        stroke: new Stroke({
+          color: 'rgba(200,20,20,0.8)',
+          width: 2
+        }),
+        fill: new Fill({
+          color: 'rgba(200,20,20,0.2)'
+        })
+      });
+    }
+    return style;
+  }
+});
+
+const map = new Map({
+  layers: [
+    vtLayer
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+const selectElement = document.getElementById('type');
+
+map.on('click', updateSelection);
+
+function updateSelection(event) {
+  const features = map.getFeaturesAtPixel(event.pixel);
+  if (!features) {
+    selection = {};
+    // force redraw of layer style
+    vtLayer.setStyle(vtLayer.getStyleFunction());
+    return;
+  }
+  const feature = features[0];
+  const fid = feature.get(idProp);
+
+  if (selectElement.value === 'singleselect') {
+    selection = {};
+  }
+  // add selected feature to lookup
+  selection[fid] = feature;
+
+  // force redraw of layer style
+  vtLayer.setStyle(vtLayer.getStyleFunction());
+}