[feature] 扩展mapboxgl的 setStyle 接口 支持 layer带symbol属性。

MyShallowTime · MyShallowTime · commit 17e3f59e9ab1 · 2023-03-21T17:11:18.000+08:00
review by zhaoq
diff --git a/src/mapboxgl/core/MapExtend.js b/src/mapboxgl/core/MapExtend.js
@@ -126,10 +126,24 @@ export var MapExtend = (function () {
     );
   };
 
-  maplibregl.Map.prototype.setSymbol = function (layerId, symbol) {
+  mapboxgl.Map.prototype.setSymbol = function (layerId, symbol) {
     this.symbolLayerManager('mapbox', this).setSymbol(layerId, symbol);
   };
 
+  if(!(mapboxgl.Map.prototype).setStyleBak) {
+    (mapboxgl.Map.prototype).setStyleBak = mapboxgl.Map.prototype.setStyle;
+    mapboxgl.Map.prototype.setStyle = function (style, options) {
+      this.setStyleBak(style, options);
+      this.style.once('style.load', () => {
+        const symbolLayers = style.layers.filter(l => l.symbol);
+        symbolLayers.forEach((l) => {
+          this.setSymbol(l.id, l.symbol);
+        });
+      });
+      return this;
+    }
+  };
+
   function addLayer(layer, map) {
     layer.onAdd && layer.onAdd(map);
   }
diff --git a/src/mapboxgl/core/symbol/SymbolLayerManager.js b/src/mapboxgl/core/symbol/SymbolLayerManager.js
@@ -1,6 +1,6 @@
 import MapboxSymbolLayerManager from "./MapboxSymbolLayerManager";
 
-export const SymbolLayerManager = () => {
+const SymbolLayerManager = () => {
     const result = {};
     return (type) => {
         if(!result[type]) {
@@ -10,4 +10,5 @@ export const SymbolLayerManager = () => {
         }
         return result[type];
     }
-}
+}
+export default SymbolLayerManager;
diff --git a/src/mapboxgl/core/symbol/SymbolTransformUtil.js b/src/mapboxgl/core/symbol/SymbolTransformUtil.js
@@ -24,7 +24,7 @@ export function getSymbolPaintLayout(symbolInfo) {
         paint: {
             'icon-color': symbolInfo.color || IMAGE_POINT_DEFAULT_VALUE.color,
             'icon-opacity': symbolInfo.opacity || IMAGE_POINT_DEFAULT_VALUE.opacity,
-            'icon-translate': symbolInfo.translate || IMAGE_POINT_DEFAULT_VALUE.translate,
+            'icon-translate': symbolInfo.translate || IMAGE_POINT_DEFAULT_VALUE.translate
         },
         layout: {
             'icon-size': symbolInfo.size || IMAGE_POINT_DEFAULT_VALUE.size,
@@ -51,7 +51,7 @@ export function getCirclePaintLayout(symbolInfo) {
             'circle-stroke-color': symbolInfo.stroke || SIMPLE_POINT_DEFAULT_VALUE.stroke,
             'circle-stroke-width': symbolInfo.strokeWidth || SIMPLE_POINT_DEFAULT_VALUE.strokeWidth,
             'circle-stroke-opacity': symbolInfo.strokeOpacity || SIMPLE_POINT_DEFAULT_VALUE.strokeOpacity,
-            'circle-translate': symbolInfo.translate || SIMPLE_POINT_DEFAULT_VALUE.translate,
+            'circle-translate': symbolInfo.translate || SIMPLE_POINT_DEFAULT_VALUE.translate
             // 符号库暂未支持的属性
             // 'circle-translate-anchor': symbolInfo.translateAnchor
         },

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import MapboxSymbolLayerManager from "./MapboxSymbolLayerManager";`
`2`	`2`
`3`		`-export const SymbolLayerManager = () => {`
	`3`	`+const SymbolLayerManager = () => {`
`4`	`4`	`const result = {};`
`5`	`5`	`return (type) => {`
`6`	`6`	`if(!result[type]) {`
`@@ -10,4 +10,5 @@ export const SymbolLayerManager = () => {`
`10`	`10`	`}`
`11`	`11`	`return result[type];`
`12`	`12`	`}`
`13`		`-}`
	`13`	`+}`
	`14`	`+export default SymbolLayerManager;`