diff --git a/examples/select-features.js b/examples/select-features.js index 3196fe96f4..e63dd05d37 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -1,25 +1,33 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; -import OSM from '../src/ol/source/OSM.js'; import Select from '../src/ol/interaction/Select.js'; +import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {Fill, Stroke, Style} from '../src/ol/style.js'; import {altKeyOnly, click, pointerMove} from '../src/ol/events/condition.js'; -const raster = new TileLayer({ - source: new OSM(), +const style = new Style({ + fill: new Fill({ + color: '#eeeeee', + }), }); const vector = new VectorLayer({ source: new VectorSource({ - url: 'data/geojson/countries.geojson', + url: 'https://openlayers.org/data/vector/ecoregions.json', format: new GeoJSON(), }), + background: 'white', + style: function (feature) { + const color = feature.get('COLOR') || '#eeeeee'; + style.getFill().setColor(color); + return style; + }, }); const map = new Map({ - layers: [raster, vector], + layers: [vector], target: 'map', view: new View({ center: [0, 0], @@ -29,20 +37,39 @@ const map = new Map({ let select = null; // ref to currently selected interaction +const selected = new Style({ + fill: new Fill({ + color: '#eeeeee', + }), + stroke: new Stroke({ + color: 'rgba(255, 255, 255, 0.7)', + width: 2, + }), +}); + +function selectStyle(feature) { + const color = feature.get('COLOR') || '#eeeeee'; + selected.getFill().setColor(color); + return selected; +} + // select interaction working on "singleclick" -const selectSingleClick = new Select(); +const selectSingleClick = new Select({style: selectStyle}); // select interaction working on "click" const selectClick = new Select({ condition: click, + style: selectStyle, }); // select interaction working on "pointermove" const selectPointerMove = new Select({ condition: pointerMove, + style: selectStyle, }); const selectAltClick = new Select({ + style: selectStyle, condition: function (mapBrowserEvent) { return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent); },