IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Geomap: Improve Pan and Zoom Performance (#88202)

Browse Source 
* Geomap: Improve pan and zoom performance

* Remove unused code
This commit is contained in:
Drew Slobodnjak 2024-05-30 14:41:59 -07:00 committed by GitHub
parent 7ec93edec1
commit 1c339db7ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/panel/geomap/layers/data/dayNightLayer.tsx
View File

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

4
public/app/plugins/panel/geomap/layers/data/geojsonDynamic.ts
View File

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

4
public/app/plugins/panel/geomap/layers/data/geojsonLayer.ts
View File

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

5
public/app/plugins/panel/geomap/layers/data/markersLayer.tsx
View File

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

4
public/app/plugins/panel/geomap/layers/data/networkLayer.tsx
View File

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

4
public/app/plugins/panel/geomap/layers/data/photosLayer.tsx
View File

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

8
public/app/plugins/panel/geomap/layers/data/routeLayer.tsx
View File

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