From c65e802c71ed3af83e76a7d1c6f7d20d1cc56848 Mon Sep 17 00:00:00 2001 From: Simon Seyock Date: Mon, 23 Sep 2019 14:44:51 +0200 Subject: [PATCH] Feature selecting examples --- examples/select-features.html | 22 ---------- examples/select-hover-features.html | 10 +++++ examples/select-hover-features.js | 61 ++++++++++++++++++++++++++ examples/select-multiple-features.html | 10 +++++ examples/select-multiple-features.js | 59 +++++++++++++++++++++++++ 5 files changed, 140 insertions(+), 22 deletions(-) delete mode 100644 examples/select-features.html create mode 100644 examples/select-hover-features.html create mode 100644 examples/select-hover-features.js create mode 100644 examples/select-multiple-features.html create mode 100644 examples/select-multiple-features.js diff --git a/examples/select-features.html b/examples/select-features.html deleted file mode 100644 index c7640d8514..0000000000 --- a/examples/select-features.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: example.html -title: Select Features -shortdesc: Example of using the Select interaction. -docs: > - Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

-

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

-

In this example, a listener is registered for the Select interaction's select event in order to update the selection status above. -tags: "select, vector" ---- -

-
- - -  0 selected features -
diff --git a/examples/select-hover-features.html b/examples/select-hover-features.html new file mode 100644 index 0000000000..5d2f0fa693 --- /dev/null +++ b/examples/select-hover-features.html @@ -0,0 +1,10 @@ +--- +layout: example.html +title: Select Features by Hover +shortdesc: Example of selecting features by hovering. +docs: > + In this example, a listener is registered on the map's pointermove to highlight the currently hovered feature. +tags: "select, vector" +--- +
+ diff --git a/examples/select-hover-features.js b/examples/select-hover-features.js new file mode 100644 index 0000000000..00a0ace04a --- /dev/null +++ b/examples/select-hover-features.js @@ -0,0 +1,61 @@ +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import OSM from '../src/ol/source/OSM.js'; +import VectorSource from '../src/ol/source/Vector.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'; + +const raster = new TileLayer({ + source: new OSM() +}); + +const highlightStyle = new Style({ + fill: new Fill({ + color: 'rgba(255,255,255,0.7)' + }), + stroke: new Stroke({ + color: '#3399CC', + width: 3 + }) +}); + +const vector = new VectorLayer({ + source: new VectorSource({ + url: 'data/geojson/countries.geojson', + format: new GeoJSON() + }) +}); + +const map = new Map({ + layers: [raster, vector], + target: 'map', + view: new View({ + center: [0, 0], + zoom: 2 + }) +}); + +let selected = null; +const status = document.getElementById('status'); + +map.on('pointermove', function(e) { + if (selected !== null) { + selected.setStyle(undefined); + selected = null; + } + + map.forEachFeatureAtPixel(e.pixel, function(f) { + selected = f; + f.setStyle(highlightStyle); + return true; + }); + + if (selected) { + status.innerHTML = ' Hovering: ' + selected.get('name'); + } else { + status.innerHTML = ' '; + } +}); diff --git a/examples/select-multiple-features.html b/examples/select-multiple-features.html new file mode 100644 index 0000000000..2076efdfe6 --- /dev/null +++ b/examples/select-multiple-features.html @@ -0,0 +1,10 @@ +--- +layout: example.html +title: Select multiple Features +shortdesc: Example of selecting multiple features. +docs: > + In this example, a listener is registered on the map's singleclick event to add and remove features from an array. +tags: "select, vector" +--- +
+ 0 selected features diff --git a/examples/select-multiple-features.js b/examples/select-multiple-features.js new file mode 100644 index 0000000000..e28864d637 --- /dev/null +++ b/examples/select-multiple-features.js @@ -0,0 +1,59 @@ +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import OSM from '../src/ol/source/OSM.js'; +import VectorSource from '../src/ol/source/Vector.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'; + +const raster = new TileLayer({ + source: new OSM() +}); + +const highlightStyle = new Style({ + fill: new Fill({ + color: 'rgba(255,255,255,0.7)' + }), + stroke: new Stroke({ + color: '#3399CC', + width: 3 + }) +}); + +const vector = new VectorLayer({ + source: new VectorSource({ + url: 'data/geojson/countries.geojson', + format: new GeoJSON() + }) +}); + +const map = new Map({ + layers: [raster, vector], + target: 'map', + view: new View({ + center: [0, 0], + zoom: 2, + multiWorld: true + }) +}); + +const selected = []; + +const status = document.getElementById('status'); + +map.on('singleclick', function(e) { + map.forEachFeatureAtPixel(e.pixel, function(f) { + const selIndex = selected.indexOf(f); + if (selIndex < 0) { + selected.push(f); + f.setStyle(highlightStyle); + } else { + selected.splice(selIndex, 1); + f.setStyle(undefined); + } + }); + + status.innerHTML = ' ' + selected.length + ' selected features'; +});