|
|
@@ -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) {
|