Support identifying features in vector tile layers (#852)

* Restore earthquakes.jGIS example

* Made identify features work with vector tile

* Solve lint

* Made suggested changes and add simple highlighting

* Made suggested changes

* Better highlighting logic

* Update packages/base/src/mainview/mainView.tsx

* lint

---------

Co-authored-by: Arjun Verma <[email protected]>
Co-authored-by: arjxn-py <[email protected]>

Author: Gauss-Taylor-Euler

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,

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;

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<IProps, IStates> {
           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<IProps, IStates> {
     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);