feat:optimize performance by use map global state

packages/gl/src/layer/util/imageMesh.ts

@@ -48,14 +48,16 @@ export function createImageMesh(geometry, image, extent2d, offset, scale, unifor
 }
 
 export function updateFilter(mesh: reshader.Mesh, map: maptalks.Map, res: number) {
-    const minFilter = getTexMinFilter(map);
+    const cache = maptalks.MapStateCache[map.id];
+    const zoom = cache ? cache.zoom : map.getZoom();
+    const dpr = cache ? cache.devicePixelRatio : map.getDevicePixelRatio();
+    const minFilter = getTexMinFilter(map, zoom);
 
     if (mesh.properties.minFilter !== minFilter) {
         const baseColorTexture = (mesh.material.get('baseColorTexture') as any);
         baseColorTexture.setMinFilter(minFilter);
         mesh.properties.minFilter = minFilter;
     }
-    const dpr = map.getDevicePixelRatio();
     const resized = map.getResolution() !== res;
 
     let magFilter: number = WebGLConstants.GL_NEAREST;
@@ -69,8 +71,7 @@ export function updateFilter(mesh: reshader.Mesh, map: maptalks.Map, res: number
     }
 }
 
-function getTexMinFilter(map: maptalks.Map) {
-    const zoom = map.getZoom();
+function getTexMinFilter(map: maptalks.Map, zoom: number) {
     const blurTexture = map.isMoving() && map.getRenderer().isViewChanged();
     let minFilter;
     if (blurTexture) {

packages/maptalks/src/core/mapbox/index.ts

@@ -22,8 +22,8 @@ export function loadGeoSymbol(symbol, geo): any {
         let bearing = 0, pitch = 0, zoom = 10, hasMap = !!map;
         if (map) {
             const mapId = map.id;
-            if (MapStateCache[mapId]) {
-                const cache = MapStateCache[mapId];
+            const cache = MapStateCache[mapId];
+            if (cache) {
                 bearing = cache.bearing;
                 pitch = cache.pitch;
                 zoom = cache.zoom;

packages/maptalks/src/geometry/Circle.ts

@@ -4,6 +4,7 @@ import Coordinate from '../geo/Coordinate';
 import Extent from '../geo/Extent';
 import Point from '../geo/Point';
 import { CommonProjectionType } from '../geo/projection';
+import { MapStateCache } from '../map/MapStateCache';
 import CenterMixin from './CenterMixin';
 import Polygon, { PolygonOptionsType, RingCoordinates, RingsCoordinates } from './Polygon';
 
@@ -122,7 +123,9 @@ export class Circle extends CenterMixin(Polygon) {
     //@internal
     _containsPoint(point: Point, tolerance?: number): boolean {
         const map = this.getMap();
-        if (map.getPitch()) {
+        const cache = MapStateCache[map.id];
+        const pitch = cache ? cache.pitch : map.getPitch();
+        if (pitch) {
             return super._containsPoint(point, tolerance);
         }
         const center = map._pointToContainerPoint(this._getCenter2DPoint()),

packages/maptalks/src/geometry/Geometry.ts

@@ -34,6 +34,7 @@ import type { Map } from '../map';
 import { WithNull } from '../types/typings';
 import { InfoWindowOptionsType } from '../ui/InfoWindow';
 import { getMinMaxAltitude } from '../core/util/path';
+import { MapStateCache } from '../map/MapStateCache';
 
 const TEMP_POINT0 = new Point(0, 0);
 const TEMP_EXTENT = new PointExtent();
@@ -697,7 +698,9 @@ export class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
         map._prjToPointAtRes(min, glRes, min);
         map._prjToPointAtRes(max, glRes, max);
         this._extent2d = new PointExtent(min, max);
-        (this._extent2d as any).z = map.getZoom();
+        const cache = MapStateCache[map.id];
+        const zoom = cache ? cache.zoom : map.getZoom();
+        (this._extent2d as any).z = zoom;
         return this._extent2d;
     }
 

packages/maptalks/src/geometry/editor/GeometryEditor.ts

@@ -13,6 +13,7 @@ import * as Symbolizers from '../../renderer/geometry/symbolizers';
 import { GeometryEditOptionsType, GeometryEditSymbolType } from '../ext/Geometry.Edit';
 import { getDefaultBBOX, pointsBBOX } from '../../core/util/bbox';
 import Extent from '../../geo/Extent';
+import { MapStateCache } from '../../map/MapStateCache';
 
 const EDIT_STAGE_LAYER_PREFIX = INTERNAL_LAYER_PREFIX + '_edit_stage_';
 const SHADOW_DRAG_EVENTS = 'dragend dragstart';
@@ -39,9 +40,9 @@ function createHandleSymbol(markerType: string, opacity: number): GeometryEditSy
 
 /**
  * coordinate to containerPoint with altitude
- * @param map 
- * @param coordinate 
- * @returns 
+ * @param map
+ * @param coordinate
+ * @returns
  */
 function coordinatesToContainerPoint(map, coordinate) {
     const glRes = map.getGLRes();
@@ -519,13 +520,18 @@ class GeometryEditor extends Eventable(Class) {
     _createHandleInstance(containerPoint: Point, opts: GeometryEditOptionsType): EditHandle {
         opts = opts || {};
         const map = this.getMap();
+
         const symbol = loadFunctionTypes(opts['symbol'], (): any => {
+            const cache = MapStateCache[map.id];
+            const zoom = cache ? cache.zoom : map.getZoom();
+            const pitch = cache ? cache.pitch : map.getPitch();
+            const bearing = cache ? cache.bearing : map.getBearing();
             return [
-                map.getZoom(),
+                zoom,
                 {
-                    '{bearing}': map.getBearing(),
-                    '{pitch}': map.getPitch(),
-                    '{zoom}': map.getZoom()
+                    '{bearing}': bearing,
+                    '{pitch}': pitch,
+                    '{zoom}': zoom
                 }
             ];
         });

packages/maptalks/src/geometry/ext/Geometry.Drag.ts

@@ -9,6 +9,7 @@ import { ConnectorLine } from '../ConnectorLine';
 import Point from '../../geo/Point';
 import Coordinate from '../../geo/Coordinate';
 import { getResouceCacheInstance } from '../../core/ResourceCacheManager';
+import { MapStateCache } from '../../map/MapStateCache';
 
 const DRAG_STAGE_LAYER_ID = INTERNAL_LAYER_PREFIX + '_drag_stage';
 
@@ -424,7 +425,9 @@ class GeometryDragHandler extends Handler {
     //@internal
     _correctCoord(coord: any): any {
         const map = this.target.getMap();
-        if (!map.getPitch()) {
+        const cache = MapStateCache[map.id];
+        const pitch = cache ? cache.pitch : map.getPitch();
+        if (!pitch) {
             return coord;
         }
         const target = this.target;

packages/maptalks/src/layer/ImageLayer.ts

@@ -9,6 +9,7 @@ import Layer, { LayerOptionsType } from './Layer';
 import { PointExtent } from '../geo';
 import { getResouceCacheInstance } from '../core/ResourceCacheManager';
 import { MixinConstructor } from '../core/Mixin';
+import { MapStateCache } from '../map/MapStateCache';
 
 
 /**
@@ -257,7 +258,9 @@ export class ImageLayerCanvasRenderer extends ImageLayerRenderable(CanvasRendere
         const nw = TEMP_POINT.set(extent.xmin, extent.ymax);
         const point = map._pointAtResToContainerPoint(nw, map.getGLRes());
         let x = point.x, y = point.y;
-        const bearing = map.getBearing();
+        const cache = MapStateCache[map.id];
+        const bearing = cache ? cache.bearing : map.getBearing();
+
         if (bearing) {
             ctx.save();
             ctx.translate(x, y);

packages/maptalks/src/layer/Layer.ts

@@ -12,6 +12,7 @@ import { CommonProjectionType } from '../geo/projection';
 import Coordinate from '../geo/Coordinate';
 import Point from '../geo/Point';
 import LayerAbstractRenderer from '../renderer/layer/LayerAbstractRenderer';
+import { MapStateCache } from '../map/MapStateCache';
 
 /**
  * 配置项
@@ -501,13 +502,16 @@ class Layer extends JSONAble(Eventable(Renderable(Class))) {
         if (isNumber(opacity) && opacity <= 0) {
             return false;
         }
-        const map = this.map;
-        if (map) {
-            const zoom = map.getZoom();
-            const minZoom = this.options.minZoom, maxZoom = this.options.maxZoom;
-            if ((!isNil(maxZoom) && maxZoom < zoom) ||
-                (!isNil(minZoom) && minZoom > zoom)) {
-                return false;
+        const { minZoom, maxZoom } = this.options;
+        if (isNumber(minZoom) || isNumber(maxZoom)) {
+            const map = this.map;
+            if (map) {
+                const cache = MapStateCache[map.id];
+                const zoom = cache ? cache.zoom : map.getZoom();
+                if ((!isNil(maxZoom) && maxZoom < zoom) ||
+                    (!isNil(minZoom) && minZoom > zoom)) {
+                    return false;
+                }
             }
         }
 

packages/maptalks/src/layer/tile/TileLayer.ts

@@ -29,6 +29,7 @@ import { Coordinate, Extent } from '../../geo';
 import { type TileLayerCanvasRenderer } from '../../renderer';
 import { Tile } from '../../renderer/layer/tilelayer/TileLayerRendererable';
 import { BBOX, bboxInMask } from '../../core/util/bbox';
+import { MapStateCache } from '../../map/MapStateCache';
 
 const DEFAULT_MAXERROR = 1;
 const TEMP_POINT = new Point(0, 0);
@@ -789,7 +790,8 @@ class TileLayer extends Layer {
         }
         // const r = 1;
         const error = geometricError * r / distance * this.options['tileErrorScale'];
-        const pitch = map.getPitch();
+        const cache = MapStateCache[map.id];
+        const pitch = cache ? cache.pitch : map.getPitch();
         if (pitch <= 60) {
             return error * 1.45;
         }

packages/maptalks/src/map/Map.Camera.ts

@@ -347,7 +347,7 @@ Map.include(/** @lends Map.prototype */{
             return this.setCenter(coordinates)
         }
         const glRes = this.getGLRes();
-        bearing = isNil(bearing) ? this.getBearing(): bearing;
+        bearing = isNil(bearing) ? this.getBearing() : bearing;
         pitch = isNil(pitch) ? this.getPitch() : pitch;
         const radPitch = pitch * RADIAN;
         const radBearing = bearing * RADIAN;
@@ -749,6 +749,10 @@ Map.include(/** @lends Map.prototype */{
             this._mapGlRes = this.getGLRes();
             this._mapExtent2D = this.get2DExtent();
             this._mapGlExtent2D = this.get2DExtentAtRes(this._mapGlRes);
+            const renderer = this.getRenderer();
+            if (renderer && renderer._updateMapStateCache) {
+                renderer._updateMapStateCache();
+            }
         };
     }(),
 

packages/maptalks/src/map/MapStateCache.ts

@@ -3,6 +3,8 @@ type MapStateCacheValue = {
     bearing: number,
     zoom: number,
     devicePixelRatio: number;
+    resolution: number;
+    center: any;
     //other states can be added later
 }
 export const MapStateCache: Record<number, MapStateCacheValue> = {
@@ -18,7 +20,9 @@ export function updateMapStateCache(map) {
         pitch: map.getPitch(),
         bearing: map.getBearing(),
         zoom: map.getZoom(),
-        devicePixelRatio: map.getDevicePixelRatio()
+        devicePixelRatio: map.getDevicePixelRatio(),
+        resolution: map.getResolution(),
+        center: map.getCenter(),
         //other states can be added later
     };
 }

packages/maptalks/src/renderer/edit/EditHandle.ts

@@ -10,6 +10,7 @@ import { BBOX, bufferBBOX, getDefaultBBOX } from '../../core/util/bbox';
 import type Map from '../../map/Map';
 import type GeometryEditor from '../../geometry/editor/GeometryEditor';
 import { getResouceCacheInstance } from '../../core/ResourceCacheManager';
+import { MapStateCache } from '../../map/MapStateCache';
 
 const resources = getResouceCacheInstance();
 let prevX, prevY;
@@ -121,7 +122,8 @@ export default class EditHandle extends Eventable<any>(Class) {
         const w = this.w;
         const h = this.h;
         if (x + w > 0 && x < map.width && y + h > 0 && y < map.height) {
-            const dpr = map.getDevicePixelRatio();
+            const cache = MapStateCache[map.id];
+            const dpr = cache ? cache.devicePixelRatio : map.getDevicePixelRatio();
             ctx.globalAlpha = this.opacity;
             ctx.drawImage(this._img, Math.round((x + dx) * dpr), Math.round((y + dy) * dpr), Math.round(w * dpr), Math.round(h * dpr));
             return true;
@@ -250,7 +252,8 @@ export default class EditHandle extends Eventable<any>(Class) {
         const { x, y } = this._point;
         const w = this.w;
         const h = this.h;
-        dpr = dpr || map.getDevicePixelRatio();
+        const cache = MapStateCache[map.id];
+        dpr = dpr || cache ? cache.devicePixelRatio : map.getDevicePixelRatio();
         this.bbox = this.bbox || getDefaultBBOX();
         const x1 = Math.round((x + dx) * dpr);
         const y1 = Math.round((y + dy) * dpr);

packages/maptalks/src/renderer/edit/EditOutline.ts

@@ -2,6 +2,7 @@ import type Map from '../../map/Map';
 import type GeometryEditor from '../../geometry/editor/GeometryEditor';
 import type { Point } from '../../geo';
 import type { BBOX } from '../../core/util/bbox';
+import { MapStateCache } from '../../map/MapStateCache';
 
 export interface EditOutlineOptions {
     zIndex?: number;
@@ -49,7 +50,8 @@ export default class EditOutline {
             this.ymax <= 0 || this.ymin >= map.height) {
             return;
         }
-        const dpr = map.getDevicePixelRatio();
+        const cache = MapStateCache[map.id];
+        const dpr = cache ? cache.devicePixelRatio : map.getDevicePixelRatio();
         // make line thiner
         const padding = 0.5;
         function c(v: number) {

packages/maptalks/src/renderer/geometry/Painter.ts

@@ -14,6 +14,7 @@ import Extent from '../../geo/Extent';
 import type { WithUndef } from '../../types/typings';
 import { Geometries } from '../../geometry'
 import { ResourceCache } from '../../core/ResourceCacheManager';
+import { MapStateCache } from '../../map/MapStateCache';
 
 //registered symbolizers
 //the latter will paint at the last
@@ -230,9 +231,10 @@ class Painter extends Class {
             glScale = mapStateCache.glScale;
             containerExtent = mapStateCache.containerExtent;
         } else {
+            const cache = MapStateCache[map.id];
             resolution = map.getResolution();
-            pitch = map.getPitch();
-            bearing = map.getBearing();
+            pitch = cache ? cache.pitch : map.getPitch();
+            bearing = cache ? cache.bearing : map.getBearing();
             glScale = map.getGLScale();
             containerExtent = map.getContainerExtent();
         }
@@ -537,7 +539,8 @@ class Painter extends Class {
             //@internal
             _2DExtent = map.get2DExtent();
             glExtent = map.get2DExtentAtRes(map.getGLRes());
-            pitch = map.getPitch();
+            const cache = MapStateCache[map.id];
+            pitch = cache ? cache.pitch : map.getPitch();
         }
         let extent2D = _2DExtent._expand(lineWidth);
         if (pitch > 0 && altitude) {
@@ -844,7 +847,8 @@ class Painter extends Class {
         this._verifyProjection();
         const map = this.getMap();
         resources = resources || this.getLayer()._getRenderer().resources;
-        const zoom = map.getZoom();
+        const cache = MapStateCache[map.id];
+        const zoom = cache ? cache.zoom : map.getZoom();
         const isDynamicSize = this._isDynamicSize();
         if (!this._extent2D || this._extent2D._zoom !== zoom || !this._fixedExtent) {
             if (this._extent2D && this._extent2D._zoom !== zoom) {
@@ -924,7 +928,8 @@ class Painter extends Class {
 
     getFixedExtent() {
         const map = this.getMap();
-        const zoom = map.getZoom();
+        const cache = MapStateCache[map.id];
+        const zoom = cache ? cache.zoom : map.getZoom();
         if (this._isDynamicSize()) {
             return this._computeFixedExtent(null, new PointExtent());
         }

packages/maptalks/src/renderer/geometry/VectorRenderer.ts

@@ -16,6 +16,7 @@ import Painter from './Painter';
 import type { ProjectionType } from '../../geo/projection';
 import Coordinate from '../../geo/Coordinate';
 import { WithNull } from '../../types/typings';
+import { MapStateCache } from '../../map/MapStateCache';
 
 const TEMP_WITHIN = {
     within: false,
@@ -110,8 +111,11 @@ const el = {
         }
         const map = this.getMap();
         const altitude = this._getAltitude();
-        // when map is tilting, draw the circle/ellipse as a polygon by vertexes.
-        return altitude > 0 || map.getPitch() || ((this instanceof Ellipse) && map.getBearing());
+        const cache = MapStateCache[map.id];
+        const pitch = cache ? cache.pitch : map.getPitch();
+        const bearing = cache ? cache.bearing : map.getBearing();
+        // when map is tilting, draw the ;circle/ellipse as a polygon by vertexes.
+        return altitude > 0 || pitch || ((this instanceof Ellipse) && bearing);
     },
 
     //@internal
@@ -213,7 +217,9 @@ const sectorInclude = {
             // @ts-expect-error
             return Canvas.polygon(...args);
         } else {
-            const r = this.getMap().getBearing();
+            const map = this.getMap();
+            const cache = MapStateCache[map.id];
+            const r = cache ? cache.bearing : map.getBearing();
             if (r) {
                 args[3] = args[3].slice(0);
                 args[3][0] += r;

packages/maptalks/src/renderer/geometry/symbolizers/CanvasSymbolizer.ts

@@ -3,6 +3,7 @@ import { loadGeoSymbol, isFunctionDefinition, interpolated, } from '../../../cor
 import Symbolizer from './Symbolizer';
 import Canvas from '../../../core/Canvas';
 import { ResourceCache } from '../../../core/ResourceCacheManager';
+import { MapStateCache } from '../../../map/MapStateCache';
 
 /**
  *所有基于 HTML5 Canvas2D 的symbolizer类
@@ -36,7 +37,9 @@ abstract class CanvasSymbolizer extends Symbolizer {
             }
         } else if (this._opacityFn) {
             const map = this.getMap();
-            ctx.globalAlpha = this._opacityFn(map.getZoom());
+            const cache = MapStateCache[map.id];
+            const zoom = cache ? cache.zoom : map.getZoom();
+            ctx.globalAlpha = this._opacityFn(zoom);
         } else if (ctx.globalAlpha !== 1) {
             ctx.globalAlpha = 1;
         }