Add vector tile selection example

examples/vector-tile-selection.html

@@ -0,0 +1,19 @@
+---
+layout: example.html
+title: Vector Tile Selection
+shortdesc: Select features from vector tiles.
+docs: >
+  <p>
+    Click a rendered vector-tile feature to highlight it on the map. Click on an empty spot (ocean) to reset the selection.
+    By changing the action type to "Multi Select" you can select multiple features at a time.
+  </p>
+tags: "vector tiles, selection"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label>Action type &nbsp;</label>
+  <select id="type" class="form-control">
+    <option value="singleselect" selected>Single Select</option>
+    <option value="multiselect">Multi Select</option>
+  </select>
+</form>

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());
+}