Geomap: Improve Pan and Zoom Performance (#88202)

* Geomap: Improve pan and zoom performance

* Remove unused code

public/app/plugins/panel/geomap/layers/data/dayNightLayer.tsx

@@ -4,7 +4,7 @@ import { Coordinate } from 'ol/coordinate';
 import { MultiLineString } from 'ol/geom';
 import Point from 'ol/geom/Point';
 import { Group as LayerGroup } from 'ol/layer';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import { fromLonLat } from 'ol/proj';
 import VectorSource from 'ol/source/Vector';
 import { Fill, Stroke, Style, Circle } from 'ol/style';
@@ -78,7 +78,7 @@ export const dayNightLayer: MapLayerRegistryItem<DayNightConfig> = {
     const sourceLineMethods = Object.getPrototypeOf(sourceLine);
 
     // Night polygon
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
       style: new Style({
         fill: new Fill({
@@ -88,7 +88,7 @@ export const dayNightLayer: MapLayerRegistryItem<DayNightConfig> = {
     });
 
     // Night line (for crosshair sharing)
-    const nightLineLayer = new VectorLayer({
+    const nightLineLayer = new VectorImage({
       source: new VectorSource({
         features: [],
       }),
@@ -106,7 +106,7 @@ export const dayNightLayer: MapLayerRegistryItem<DayNightConfig> = {
       geometry: new Point([]),
     });
 
-    const sunLayer = new VectorLayer({
+    const sunLayer = new VectorImage({
       source: new VectorSource({
         features: [sunFeature],
       }),
@@ -144,7 +144,7 @@ export const dayNightLayer: MapLayerRegistryItem<DayNightConfig> = {
       }),
     });
 
-    const sunLineLayer = new VectorLayer({
+    const sunLineLayer = new VectorImage({
       source: new VectorSource({
         features: [sunLineFeature],
       }),

public/app/plugins/panel/geomap/layers/data/geojsonDynamic.ts

@@ -2,7 +2,7 @@ import { FeatureLike } from 'ol/Feature';
 import OlMap from 'ol/Map';
 import { unByKey } from 'ol/Observable';
 import GeoJSON from 'ol/format/GeoJSON';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import VectorSource from 'ol/source/Vector';
 import { Fill, Stroke, Style } from 'ol/style';
 import { ReplaySubject } from 'rxjs';
@@ -118,7 +118,7 @@ export const dynamicGeoJSONLayer: MapLayerRegistryItem<DynamicGeoJSONMapperConfi
     const style = await getStyleConfigState(config.style);
     const idToIdx = new Map<string, number>();
 
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
       style: (feature: FeatureLike) => {
         const idx = idToIdx.get(feature.getId() as string);

public/app/plugins/panel/geomap/layers/data/geojsonLayer.ts

@@ -2,7 +2,7 @@ import { FeatureLike } from 'ol/Feature';
 import Map from 'ol/Map';
 import { unByKey } from 'ol/Observable';
 import GeoJSON from 'ol/format/GeoJSON';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import VectorSource from 'ol/source/Vector';
 import { Style } from 'ol/style';
 import { ReplaySubject } from 'rxjs';
@@ -112,7 +112,7 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
     const polyStyleStrings: string[] = Object.values(GeoJSONPolyStyles);
     const pointStyleStrings: string[] = Object.values(GeoJSONPointStyles);
     const lineStyleStrings: string[] = Object.values(GeoJSONLineStyles);
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
       style: (feature: FeatureLike) => {
         const featureType = feature.getGeometry()?.getType();

public/app/plugins/panel/geomap/layers/data/markersLayer.tsx

@@ -1,7 +1,7 @@
 import { isNumber } from 'lodash';
 import { FeatureLike } from 'ol/Feature';
 import Map from 'ol/Map';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import React, { ReactNode } from 'react';
 import { ReplaySubject } from 'rxjs';
 
@@ -74,8 +74,9 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
     const style = await getStyleConfigState(config.style);
     const location = await getLocationMatchers(options.location);
     const source = new FrameVectorSource(location);
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
+      declutter: false // TODO consider making this an option or explore grouping strategies
     });
 
     const legendProps = new ReplaySubject<MarkersLegendProps>(1);

public/app/plugins/panel/geomap/layers/data/networkLayer.tsx

@@ -3,7 +3,7 @@ import { Feature } from 'ol';
 import { FeatureLike } from 'ol/Feature';
 import Map from 'ol/Map';
 import { Geometry, LineString, Point, SimpleGeometry } from 'ol/geom';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import { Fill, Stroke, Style, Text } from 'ol/style';
 import FlowLine from 'ol-ext/style/FlowLine';
 import React, { ReactNode } from 'react';
@@ -91,7 +91,7 @@ export const networkLayer: MapLayerRegistryItem<NetworkConfig> = {
     const location = await getLocationMatchers(options.location);
     const source = new FrameVectorSource(location);
 
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
     });
     const hasArrows = config.arrow === 1 || config.arrow === -1 || config.arrow === 2;

public/app/plugins/panel/geomap/layers/data/photosLayer.tsx

@@ -1,6 +1,6 @@
 import { FeatureLike } from 'ol/Feature';
 import Map from 'ol/Map';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import { Stroke, Style } from 'ol/style';
 import Photo from 'ol-ext/style/Photo';
 
@@ -86,7 +86,7 @@ export const photosLayer: MapLayerRegistryItem<PhotoConfig> = {
 
     const location = await getLocationMatchers(options.location);
     const source = new FrameVectorSource(location);
-    const vectorLayer = new VectorLayer({
+    const vectorLayer = new VectorImage({
       source,
     });
 

public/app/plugins/panel/geomap/layers/data/routeLayer.tsx

@@ -3,7 +3,7 @@ import Feature, { FeatureLike } from 'ol/Feature';
 import Map from 'ol/Map';
 import { LineString, Point, SimpleGeometry } from 'ol/geom';
 import { Group as LayerGroup } from 'ol/layer';
-import VectorLayer from 'ol/layer/Vector';
+import VectorImage from 'ol/layer/VectorImage';
 import VectorSource from 'ol/source/Vector';
 import { Fill, Stroke, Style, Circle } from 'ol/style';
 import FlowLine from 'ol-ext/style/FlowLine';
@@ -94,7 +94,7 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
     const style = await getStyleConfigState(config.style);
     const location = await getLocationMatchers(options.location);
     const source = new FrameVectorSource(location);
-    const vectorLayer = new VectorLayer({ source });
+    const vectorLayer = new VectorImage({ source });
     const hasArrows = config.arrow === 1 || config.arrow === -1;
 
     if (!style.fields && !hasArrows) {
@@ -222,14 +222,14 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
       }),
     });
 
-    const crosshairLayer = new VectorLayer({
+    const crosshairLayer = new VectorImage({
       source: new VectorSource({
         features: [crosshairFeature],
       }),
       style: crosshairStyle,
     });
 
-    const linesLayer = new VectorLayer({
+    const linesLayer = new VectorImage({
       source: new VectorSource({
         features: lineFeatures,
       }),