diff --git a/examples/earthquakes.jGIS b/examples/earthquakes.jGIS index d3c372eb3..e8a0e55ef 100644 --- a/examples/earthquakes.jGIS +++ b/examples/earthquakes.jGIS @@ -194,10 +194,10 @@ "options": { "bearing": 0.0, "extent": [ - -18039043.293897964, - -4847443.5412946865, - 1383665.5829297584, - 13318211.842235815 + -19456309.48732131, + -3639686.263420881, + 2800931.776353102, + 12110454.564362008 ], "latitude": 35.52446437432016, "longitude": -74.80890180273175, diff --git a/packages/base/src/commands/index.ts b/packages/base/src/commands/index.ts index d702984cf..10c76d41e 100644 --- a/packages/base/src/commands/index.ts +++ b/packages/base/src/commands/index.ts @@ -158,6 +158,7 @@ export function addCommands( 'VectorLayer', 'ShapefileLayer', 'WebGlLayer', + 'VectorTileLayer', ].includes(selectedLayer.type); const isIdentifying = current.model.isIdentifying; @@ -174,9 +175,12 @@ export function addCommands( if (!selectedLayer) { return false; } - return ['VectorLayer', 'ShapefileLayer', 'WebGlLayer'].includes( - selectedLayer.type, - ); + return [ + 'VectorLayer', + 'ShapefileLayer', + 'WebGlLayer', + 'VectorTileLayer', + ].includes(selectedLayer.type); }, execute: args => { const current = tracker.currentWidget; diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx index 8654234aa..82caddef6 100644 --- a/packages/base/src/mainview/mainView.tsx +++ b/packages/base/src/mainview/mainView.tsx @@ -72,7 +72,7 @@ import { transformExtent, } from 'ol/proj'; import { register } from 'ol/proj/proj4.js'; -import RenderFeature from 'ol/render/Feature'; +import RenderFeature, { toGeometry } from 'ol/render/Feature'; import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, @@ -650,7 +650,10 @@ export class MainView extends React.Component { const features = tile.getFeatures(); if (features && features.length > 0) { - this._model.syncTileFeatures({ sourceId: id, features }); + this._model.syncTileFeatures({ + sourceId: id, + features, + }); } }); @@ -2101,6 +2104,48 @@ export class MainView extends React.Component { const jgisLayer = this._model.getLayer(layerId); switch (jgisLayer?.type) { + case 'VectorTileLayer': { + const geometries: Geometry[] = []; + const features: any[] = []; + + this._Map.forEachFeatureAtPixel(e.pixel, (feature: FeatureLike) => { + let geom: Geometry | undefined; + + if (feature instanceof RenderFeature) { + geom = toGeometry(feature); + } else if ('getGeometry' in feature) { + geom = feature.getGeometry(); + } + + const props = feature.getProperties(); + + if (geom) { + geometries.push(geom); + } + features.push({ + ...props, + }); + + return true; + }); + + if (features.length > 0) { + this._model.syncIdentifiedFeatures(features, this._mainViewModel.id); + } + + if (geometries.length > 0) { + for (const geom of geometries) { + this._model.highlightFeatureSignal.emit(geom); + } + } else { + const coordinate = this._Map.getCoordinateFromPixel(e.pixel); + const point = new Point(coordinate); + this._model.highlightFeatureSignal.emit(point); + } + + break; + } + case 'WebGlLayer': { const layer = this.getLayer(layerId) as WebGlTileLayer; const data = layer.getData(e.pixel);