diff --git a/examples/webgl-vector-tiles.js b/examples/webgl-vector-tiles.js index 7c8b9435ada..cc1005dd05d 100644 --- a/examples/webgl-vector-tiles.js +++ b/examples/webgl-vector-tiles.js @@ -1,11 +1,14 @@ import MVT from '../src/ol/format/MVT.js'; import Map from '../src/ol/Map.js'; +import VectorLayer from '../src/ol/layer/Vector.js'; +import VectorSource from '../src/ol/source/Vector.js'; import VectorTile from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; import View from '../src/ol/View.js'; import WebGLVectorTileLayerRenderer from '../src/ol/renderer/webgl/VectorTileLayer.js'; import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js'; import {asArray} from '../src/ol/color.js'; +import {log} from '../src/ol/console.js'; import {packColor, parseLiteralStyle} from '../src/ol/webgl/styleparser.js'; const key = @@ -15,7 +18,7 @@ const result = parseLiteralStyle({ 'fill-color': ['get', 'fillColor'], 'stroke-color': ['get', 'strokeColor'], 'stroke-width': ['get', 'strokeWidth'], - 'circle-radius': 4, + 'circle-radius': 10, 'circle-fill-color': '#777', }); @@ -55,6 +58,11 @@ class WebGLVectorTileLayer extends VectorTile { } } +const vectorSource = new VectorSource({ + useSpatialIndex: false, + features: [], +}); + const map = new Map({ layers: [ new WebGLVectorTileLayer({ @@ -71,6 +79,16 @@ const map = new Map({ }), style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text), }), + new VectorLayer({ + style: { + 'fill-color': 'grey', + 'stroke-color': 'green', + 'stroke-width': 3, + 'circle-fill-color': 'red', + 'circle-radius': 10, + }, + source: vectorSource, + }), ], target: 'map', view: new View({ @@ -78,12 +96,38 @@ const map = new Map({ zoom: 2, }), }); + +let activeFeature; + map.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = map.getEventPixel(evt.originalEvent); - const feature = map.forEachFeatureAtPixel(pixel, function (feature) { - return feature; - }); + const feature = map.forEachFeatureAtPixel( + pixel, + function (feature) { + return feature; + }, + { + layerFilter(layer) { + return layer instanceof WebGLVectorTileLayer; + }, + } + ); + if (feature) { + if (activeFeature === feature) { + // skip + } else { + log(feature); + vectorSource.removeFeature(activeFeature); + vectorSource.addFeature(feature); + activeFeature = feature; + } + } else { + if (activeFeature) { + vectorSource.removeFeature(activeFeature); + activeFeature = null; + } + } }); diff --git a/src/ol/renderer/webgl/VectorTileLayer.js b/src/ol/renderer/webgl/VectorTileLayer.js index 549ad2b8be4..3c435983d16 100644 --- a/src/ol/renderer/webgl/VectorTileLayer.js +++ b/src/ol/renderer/webgl/VectorTileLayer.js @@ -482,6 +482,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer { ]; // It is assumed that there is no approximation with this color const ref = colorDecodeId(hitColor); + if (!ref) { + return; + } const feature = t.tileGeometry.getFeatureFromRef(ref); if (feature) { return callback(feature, this.getLayer(), null);