【feature】1) 将转换ui key和mapbox key的代码移除；

Yuki-Zhao · Yuki-Zhao · commit 95c2506d3bfc · 2023-05-15T10:32:59.000+08:00
2）切换符号，不用所有的key循环设置 =&gt; 拿到前一个符号的key和当前符号的key，设置这些key样式值
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/CircleStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/CircleStyleSetting.tsx
@@ -26,18 +26,18 @@ const CircleStyleSetting = (props: CircleStyleSettingProps) => {
 
     useEffect(() => {
         setStyle({
-            radius: getLayerPropertyStyle(layerId, 'radius'),
-            color: getLayerPropertyStyle(layerId, 'color'),
-            opacity: getLayerPropertyStyle(layerId, 'opacity'),
-            blur: getLayerPropertyStyle(layerId, 'blur'),
-            strokeColor: getLayerPropertyStyle(layerId, 'strokeColor'),
-            strokeOpacity: getLayerPropertyStyle(layerId, 'strokeOpacity'),
-            strokeWidth: getLayerPropertyStyle(layerId, 'strokeWidth'),
-            translate: getLayerPropertyStyle(layerId, 'translate')
+            radius: getLayerPropertyStyle(layerId, 'radius') ?? defaultStyle.radius,
+            color: getLayerPropertyStyle(layerId, 'color') ?? defaultStyle.color,
+            opacity: getLayerPropertyStyle(layerId, 'opacity') ?? defaultStyle.opacity,
+            blur: getLayerPropertyStyle(layerId, 'blur') ?? defaultStyle.blur,
+            strokeColor: getLayerPropertyStyle(layerId, 'strokeColor') ?? defaultStyle.strokeColor,
+            strokeOpacity: getLayerPropertyStyle(layerId, 'strokeOpacity') ?? defaultStyle.strokeOpacity,
+            strokeWidth: getLayerPropertyStyle(layerId, 'strokeWidth') ?? defaultStyle.strokeWidth,
+            translate: getLayerPropertyStyle(layerId, 'translate') ?? defaultStyle.translate
         });
     }, [layerId]);
 
-    const { radius, color, translate, opacity, blur, strokeColor, strokeOpacity, strokeWidth } = style;
+    const { radius, color, translate=[], opacity, blur, strokeColor, strokeOpacity, strokeWidth } = style;
 
     const changeStyle = (key, value): void => {
         changeLayerStyle(layerId, key, value);
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/LineStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/LineStyleSetting.tsx
@@ -23,7 +23,7 @@ const LineStyleSetting = (props: LineStyleSettingProps) => {
         let bottomBoundary;
         lineIds.forEach((id) => {
             const width = getLayerPropertyStyle(id, 'width');
-            const offset = getLayerPropertyStyle(id, 'offset');
+            const offset = getLayerPropertyStyle(id, 'offset') ?? 0;
             const top = offset + width / 2;
             const bottom = offset - width / 2;
             (top > topBoundary || topBoundary === undefined) && (topBoundary = top);
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/PointStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/PointStyleSetting.tsx
@@ -19,7 +19,7 @@ const PointStyleSetting = (props: PointStyleSettingProps) => {
     const { changeLayerStyle, layerId, getLayerPropertyStyle, getImageInfo, selectedSymbolId } = props;
     const defaultStyle = {
         size: 1,
-        color: '#fff',
+        color: '#000',
         rotate: 0,
         opacity: 1,
         translate: [0, 0]
@@ -28,16 +28,15 @@ const PointStyleSetting = (props: PointStyleSettingProps) => {
 
     useEffect(() => {
         setStyle({
-            ...style,
-            size: getLayerPropertyStyle(layerId, 'size'),
-            color: getLayerPropertyStyle(layerId, 'color'),
-            rotate: getLayerPropertyStyle(layerId, 'rotate'),
-            opacity: getLayerPropertyStyle(layerId, 'opacity'),
-            translate: getLayerPropertyStyle(layerId, 'translate')
+            size: getLayerPropertyStyle(layerId, 'size') ?? defaultStyle.size,
+            color: getLayerPropertyStyle(layerId, 'color') ?? defaultStyle.color,
+            rotate: getLayerPropertyStyle(layerId, 'rotate') ?? defaultStyle.rotate,
+            opacity: getLayerPropertyStyle(layerId, 'opacity') ?? defaultStyle.opacity,
+            translate: getLayerPropertyStyle(layerId, 'translate') ?? defaultStyle.translate
         });
     }, [selectedSymbolId]);
 
-    const { size, color, translate, rotate, opacity } = style
+    const { size, color, translate=[], rotate, opacity } = style
     const isDataDrivenRotation = isArray(rotate) && isArray(rotate[1]);
 
     const changeStyle = (key, value): void => {
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/PolygonStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/PolygonStyleSetting.tsx
@@ -29,9 +29,9 @@ const PolygonStyleSetting = (props: PolygonStyleSettingtProps) => {
 
     useEffect(() => {
         setStyle({
-            color: getLayerPropertyStyle(layerId, 'color'),
-            opacity: getLayerPropertyStyle(layerId, 'opacity'),
-            image: getLayerPropertyStyle(layerId, 'image')
+            color: getLayerPropertyStyle(layerId, 'color') ?? defaultStyle.color,
+            opacity: getLayerPropertyStyle(layerId, 'opacity') ?? defaultStyle.opacity,
+            image: getLayerPropertyStyle(layerId, 'image') ?? defaultStyle.image
         });
     }, [selectedSymbolId]);
 
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/SingleLineStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/SingleLineStyleSetting.tsx
@@ -44,19 +44,19 @@ const SingleLineStyleSetting = (props: SingleLineStyleContentProps) => {
 
     useEffect(() => {
         setStyle({
-            width: getLayerPropertyStyle(layerId, 'width'),
-            color: getLayerPropertyStyle(layerId, 'color'),
-            offset: getLayerPropertyStyle(layerId, 'offset'),
-            opacity: getLayerPropertyStyle(layerId, 'opacity'),
-            blur: getLayerPropertyStyle(layerId, 'blur'),
-            join: getLayerPropertyStyle(layerId, 'join'),
-            cap: getLayerPropertyStyle(layerId, 'cap'),
-            translate: getLayerPropertyStyle(layerId, 'translate'),
-            image: getLayerPropertyStyle(layerId, 'image')
+            width: getLayerPropertyStyle(layerId, 'width') ?? defaultStyle.width,
+            color: getLayerPropertyStyle(layerId, 'color') ?? defaultStyle.color,
+            offset: getLayerPropertyStyle(layerId, 'offset') ?? defaultStyle.offset,
+            opacity: getLayerPropertyStyle(layerId, 'opacity') ?? defaultStyle.opacity,
+            blur: getLayerPropertyStyle(layerId, 'blur') ?? defaultStyle.blur,
+            join: getLayerPropertyStyle(layerId, 'join') ?? defaultStyle.join,
+            cap: getLayerPropertyStyle(layerId, 'cap') ?? defaultStyle.cap,
+            translate: getLayerPropertyStyle(layerId, 'translate') ?? defaultStyle.translate,
+            image: getLayerPropertyStyle(layerId, 'image') ?? defaultStyle.image
         });
     }, [layerId, selectedSymbolId, wholeWidth]);
 
-    const { width, color, offset, opacity, blur, join, cap, translate, image } = style;
+    const { width, color, offset, opacity, blur, join, cap, translate=[], image } = style;
 
 
     return (
diff --git a/examples/mapboxgl-v2/src/modules/style-setting-panel/TextStyleSetting.tsx b/examples/mapboxgl-v2/src/modules/style-setting-panel/TextStyleSetting.tsx
@@ -31,20 +31,20 @@ const TextStyleSetting = (props: TextStyleSettingProps) => {
 
     useEffect(() => {
         setStyle({
-            size: getLayerPropertyStyle(layerId, 'size'),
-            color: getLayerPropertyStyle(layerId, 'color'),
-            opacity: getLayerPropertyStyle(layerId, 'opacity'),
-            anchor: getLayerPropertyStyle(layerId, 'anchor'),
-            allowOverlap: getLayerPropertyStyle(layerId, 'allowOverlap'),
-            haloWidth: getLayerPropertyStyle(layerId, 'haloWidth'),
-            spacing: getLayerPropertyStyle(layerId, 'spacing'),
-            fontFamily: getLayerPropertyStyle(layerId, 'fontFamily'),
-            field: getLayerPropertyStyle(layerId, 'field'),
-            translate: getLayerPropertyStyle(layerId, 'translate')
+            size: getLayerPropertyStyle(layerId, 'size') ?? defaultStyle.size,
+            color: getLayerPropertyStyle(layerId, 'color') ?? defaultStyle.color,
+            opacity: getLayerPropertyStyle(layerId, 'opacity') ?? defaultStyle.opacity,
+            anchor: getLayerPropertyStyle(layerId, 'anchor') ?? defaultStyle.anchor,
+            allowOverlap: getLayerPropertyStyle(layerId, 'allowOverlap') ?? defaultStyle.allowOverlap,
+            haloWidth: getLayerPropertyStyle(layerId, 'haloWidth') ?? defaultStyle.haloWidth,
+            spacing: getLayerPropertyStyle(layerId, 'spacing') ?? defaultStyle.spacing,
+            fontFamily: getLayerPropertyStyle(layerId, 'fontFamily') ?? defaultStyle.fontFamily,
+            field: getLayerPropertyStyle(layerId, 'field') ?? defaultStyle.field,
+            translate: getLayerPropertyStyle(layerId, 'translate') ?? defaultStyle.translate
         });
     }, [layerId]);
 
-    const { size, color, opacity, anchor, allowOverlap, haloWidth, spacing, fontFamily, field, translate } = style;
+    const { size, color, opacity, anchor, allowOverlap, haloWidth, spacing, fontFamily, field, translate=[] } = style;
 
     const changeStyle = (key, value): void => {
         changeLayerStyle(layerId, key, value);
diff --git a/src/common/commontypes/symbol/DefaultValue.js b/src/common/commontypes/symbol/DefaultValue.js
@@ -1,5 +1,3 @@
-import { number } from "../../../../libs/echarts/echarts-en"
-
 const COMMON_DEFAULT_VALUE = {
     color: '#000',
     opacity: 1,
diff --git a/src/symbol/MapboxSymbolLayerManager.js b/src/symbol/MapboxSymbolLayerManager.js
@@ -74,7 +74,13 @@ const MapboxSymbolLayerManager = (m) => {
          */
         symbolToLayerStyle(symbol) {
             const type = this.getSymbolType(symbol);
-            return TRANSFORM_SYMBOL_RULE[type]?.(symbol) ?? {};
+            const {paint, layout} = symbol;
+            return {
+                type,
+                paint,
+                layout
+            }
+            // return TRANSFORM_SYMBOL_RULE[type]?.(symbol) ?? {};
         },
     
         /**
@@ -154,13 +160,13 @@ const MapboxSymbolLayerManager = (m) => {
         setSimpleSymbol(layerId, oldSymbol, symbol) {
             const {paint: oldPaint = {}, layout: oldLayout = {}} = oldSymbol;
             const layerInfo = this.symbolToLayerStyle(symbol);
-            const {paint, layout} = layerInfo, paintKeys = Object.keys(paint).concat(Object.keys(oldPaint)), 
+            const {paint = {}, layout = {}} = layerInfo, paintKeys = Object.keys(paint).concat(Object.keys(oldPaint)), 
                 layoutKeys = Object.keys(layout).concat(Object.keys(oldLayout));
 
-            paintKeys.forEach(key => {
+            Array.from(new Set(paintKeys)).forEach(key => {
                 map.setPaintProperty(layerId, key, paint[key]);
             });
-            layoutKeys.forEach(key => {
+            Array.from(new Set(layoutKeys)).forEach(key => {
                 map.setLayoutProperty(layerId, key, layout[key]);
             });
         },
diff --git a/src/symbol/SymbolTransformUtil.js b/src/symbol/SymbolTransformUtil.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import { number } from "../../../../libs/echarts/echarts-en"`
`2`		`-`
`3`	`1`	`const COMMON_DEFAULT_VALUE = {`
`4`	`2`	`color: '#000',`
`5`	`3`	`opacity: 1,`