lxf 2 тижнів тому
батько
коміт
1af811bd3b
1 змінених файлів з 16 додано та 1 видалено
  1. 16 1
      src/views/warningHome/map/waterLayer.js

+ 16 - 1
src/views/warningHome/map/waterLayer.js

@@ -9,6 +9,8 @@ class WaterLayer {
     constructor(map) {
         let that = this;
         this.vectorStyle = new KMap.VectorStyle();
+        // 河流动画相位
+        this.riverAnimationPhase = 0;
 
         this.waterLayer = new KMap.VectorLayer("waterLayer", 99, {
             style: (f) => {
@@ -20,7 +22,12 @@ class WaterLayer {
 
         this.riverLayer = new KMap.VectorLayer("riverLayer", 99, {
             style: (f) => {
-                return that.vectorStyle.getPolygonStyle("#00000010", "#42b884cc", 3)
+                // 简单“呼吸”动画效果:通过 stroke 透明度和宽度轻微变化
+                const phase = that.riverAnimationPhase || 0;
+                const alpha = 0.4 + 0.3 * Math.sin(phase);
+                const strokeWidth = 2 + 1.5 * (0.5 + 0.5 * Math.sin(phase));
+                const strokeColor = `rgba(66, 184, 132, ${alpha.toFixed(2)})`;
+                return that.vectorStyle.getPolygonStyle("rgba(0,0,0,0)", strokeColor, strokeWidth);
             }
         });
 
@@ -28,6 +35,14 @@ class WaterLayer {
         map.addLayer(this.riverLayer.layer);
         this.toggleLayer(false)
         this.kmap = map
+
+        // 启动河流图层简单动画:定时更新相位并触发重绘
+        this.riverAnimationTimer = setInterval(() => {
+            this.riverAnimationPhase = (this.riverAnimationPhase + 0.15) % (Math.PI * 2);
+            if (this.riverLayer && this.riverLayer.layer) {
+                this.riverLayer.layer.changed && this.riverLayer.layer.changed();
+            }
+        }, 80);
     }
 
     initData(arr) {