my-openlayer 3.1.3 → 3.1.4

package/core/point/PointPulseLayer.js

@@ -81,7 +81,15 @@ export default class PointPulseLayer {
         const source = new VectorSource({
             features: PointPulseLayer.createFeatures(pointData, options)
         });
-        const createStyles = (feature) => {
+        const baseZIndex = options.zIndex || ConfigManager.DEFAULT_POINT_OPTIONS.zIndex;
+        const iconImg = options.icon?.img ?? options.icon?.src;
+        /**
+         * 仅负责绘制脉冲动画，避免动画覆盖图标。
+         */
+        const createPulseStyle = (feature) => {
+            if (!pulseOptions.enabled) {
+                return undefined;
+            }
             const rawData = feature.get('rawData');
             const level = String(rawData?.[levelKey] ?? 'default');
             const progress = frameIndex / Math.max(1, pulseOptions.frameCount - 1);
@@ -90,28 +98,28 @@ export default class PointPulseLayer {
             const opacity = 1 - progress;
             const fillColor = pulseOptions.colorMap[level] ?? pulseOptions.colorMap.default ?? 'rgba(6, 183, 253, 0.32)';
             const strokeColor = pulseOptions.strokeColorMap?.[level] ?? pulseOptions.strokeColorMap?.default;
-            const styles = [];
-            if (pulseOptions.enabled) {
-                const pulseCacheKey = `${level}_${frameIndex}`;
-                let pulseStyle = pulseStyleCache.get(pulseCacheKey);
-                if (!pulseStyle) {
-                    pulseStyle = new Style({
-                        zIndex: 0,
-                        image: new CircleStyle({
-                            radius,
-                            fill: new Fill({ color: PointPulseLayer.withOpacity(fillColor, opacity) }),
-                            stroke: strokeColor && pulseOptions.strokeWidth > 0
-                                ? new Stroke({ color: PointPulseLayer.withOpacity(strokeColor, opacity), width: pulseOptions.strokeWidth })
-                                : undefined
-                        })
-                    });
-                    pulseStyleCache.set(pulseCacheKey, pulseStyle);
-                }
-                styles.push(pulseStyle);
+            const pulseCacheKey = `${level}_${frameIndex}`;
+            let pulseStyle = pulseStyleCache.get(pulseCacheKey);
+            if (!pulseStyle) {
+                pulseStyle = new Style({
+                    image: new CircleStyle({
+                        radius,
+                        fill: new Fill({ color: PointPulseLayer.withOpacity(fillColor, opacity) }),
+                        stroke: strokeColor && pulseOptions.strokeWidth > 0
+                            ? new Stroke({ color: PointPulseLayer.withOpacity(strokeColor, opacity), width: pulseOptions.strokeWidth })
+                            : undefined
+                    })
+                });
+                pulseStyleCache.set(pulseCacheKey, pulseStyle);
             }
+            return pulseStyle;
+        };
+        /**
+         * 仅负责绘制图标与文本，固定放在脉冲层之上。
+         */
+        const createStaticStyle = (feature) => {
+            const rawData = feature.get('rawData');
             const text = options.textVisible && options.textKey && rawData ? String(rawData[options.textKey] ?? '') : '';
-            // P1-4: icon.img 是新名，icon.src 保留兼容（@deprecated）
-            const iconImg = options.icon?.img ?? options.icon?.src;
             const staticCacheKey = [
                 options.img ?? iconImg ?? '',
                 options.scale ?? options.icon?.scale ?? ConfigManager.DEFAULT_POINT_ICON_SCALE,
@@ -120,8 +128,7 @@ export default class PointPulseLayer {
             ].join('|');
             let pointStyle = staticStyleCache.get(staticCacheKey);
             if (pointStyle) {
-                styles.push(pointStyle);
-                return styles;
+                return pointStyle;
             }
             const pointStyleOptions = {};
             const iconSrc = options.img ?? iconImg;
@@ -147,23 +154,34 @@ export default class PointPulseLayer {
             }
             if (pointStyleOptions.image || pointStyleOptions.text) {
                 pointStyle = new Style(pointStyleOptions);
-                pointStyle.setZIndex(1);
                 staticStyleCache.set(staticCacheKey, pointStyle);
-                styles.push(pointStyle);
+                return pointStyle;
             }
-            return styles;
+            return undefined;
         };
-        const layer = new VectorLayer({
+        const pulseLayer = new VectorLayer({
+            properties: {
+                name: options.layerName,
+                layerName: options.layerName
+            },
+            source,
+            style: createPulseStyle,
+            zIndex: baseZIndex,
+        });
+        const visible = options.visible === undefined ? true : options.visible;
+        pulseLayer.setVisible(visible);
+        map.addLayer(pulseLayer);
+        const staticLayer = new VectorLayer({
             properties: {
                 name: options.layerName,
                 layerName: options.layerName
             },
             source,
-            style: createStyles,
-            zIndex: options.zIndex || ConfigManager.DEFAULT_POINT_OPTIONS.zIndex,
+            style: createStaticStyle,
+            zIndex: baseZIndex + 1,
         });
-        layer.setVisible(options.visible === undefined ? true : options.visible);
-        map.addLayer(layer);
+        staticLayer.setVisible(visible);
+        map.addLayer(staticLayer);
         const tick = () => {
             if (!running)
                 return;
@@ -173,7 +191,7 @@ export default class PointPulseLayer {
             if (nextFrameIndex !== renderedFrameIndex) {
                 frameIndex = nextFrameIndex;
                 renderedFrameIndex = nextFrameIndex;
-                layer.changed();
+                pulseLayer.changed();
             }
             rafId = requestAnimationFrame(tick);
         };
@@ -192,11 +210,14 @@ export default class PointPulseLayer {
         };
         start();
         return {
-            layer,
+            layer: pulseLayer,
             source,
             start,
             stop,
-            setVisible: (visible) => layer.setVisible(visible),
+            setVisible: (visible) => {
+                pulseLayer.setVisible(visible);
+                staticLayer.setVisible(visible);
+            },
             updateData: (nextData) => {
                 source.clear();
                 source.addFeatures(PointPulseLayer.createFeatures(nextData, options));
@@ -204,7 +225,8 @@ export default class PointPulseLayer {
             remove: () => {
                 stop();
                 source.clear();
-                map.removeLayer(layer);
+                map.removeLayer(pulseLayer);
+                map.removeLayer(staticLayer);
             }
         };
     }

package/core/polygon/PolygonStyleFactory.js

@@ -103,9 +103,20 @@ export default class PolygonStyleFactory {
         const strokeWidth = withDefaultStroke ? options?.strokeWidth ?? previousStroke?.getWidth() : undefined;
         const lineDash = withDefaultStroke ? options?.lineDash ?? previousStroke?.getLineDash() ?? undefined : undefined;
         const lineDashOffset = withDefaultStroke ? options?.lineDashOffset ?? previousStroke?.getLineDashOffset() : undefined;
-        const newColor = hasMappedColor
-            ? colorObj[name]
-            : options?.fillColor ?? (withDefaultFill ? previousFill?.getColor() : undefined);
+        /** *********************颜色回退策略*********************/
+        // 1) colorObj 命中映射：使用映射颜色
+        // 2) 未命中但 options.fillColor 传入：使用传入的 fillColor
+        // 3) 都未提供：使用透明填充，避免沿用上一次更新的颜色
+        let newColor;
+        if (hasMappedColor) {
+            newColor = colorObj[name];
+        }
+        else if (options?.fillColor !== undefined) {
+            newColor = options.fillColor;
+        }
+        else {
+            newColor = withDefaultFill ? 'rgba(0, 0, 0, 0)' : undefined;
+        }
         const featureStyle = new Style({
             stroke: strokeColor !== undefined || strokeWidth !== undefined || lineDash !== undefined || lineDashOffset !== undefined
                 ? new Stroke({ color: strokeColor, width: strokeWidth, lineDash, lineDashOffset })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "3.1.3",
+  "version": "3.1.4",
   "type": "module",
   "license": "MIT",
   "main": "index.js",