|
@@ -23,11 +23,21 @@ class WaterLayer {
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
this.riverLayer = new KMap.VectorLayer("riverLayer", 99, {
|
|
this.riverLayer = new KMap.VectorLayer("riverLayer", 99, {
|
|
|
|
|
+ // style: (f) => {
|
|
|
|
|
+ // // 简单“呼吸”动画效果:通过线宽轻微变化
|
|
|
|
|
+ // const phase = that.riverAnimationPhase || 0;
|
|
|
|
|
+ // const strokeWidth = 2 + 1.5 * (0.5 + 0.5 * Math.sin(phase));
|
|
|
|
|
+ // const strokeColor = that.getLayerColor("river");
|
|
|
|
|
+ // return that.vectorStyle.getPolygonStyle("rgba(0,0,0,0)", strokeColor, strokeWidth);
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
style: (f) => {
|
|
style: (f) => {
|
|
|
- // 简单“呼吸”动画效果:通过线宽轻微变化
|
|
|
|
|
|
|
+ // 简单“呼吸”动画效果:通过 stroke 透明度和宽度轻微变化
|
|
|
const phase = that.riverAnimationPhase || 0;
|
|
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 strokeWidth = 2 + 1.5 * (0.5 + 0.5 * Math.sin(phase));
|
|
|
- const strokeColor = that.getLayerColor("river");
|
|
|
|
|
|
|
+ // 33, 150, 243
|
|
|
|
|
+ const strokeColor = `rgba(33, 150, 243, ${alpha.toFixed(2)})`;
|
|
|
return that.vectorStyle.getPolygonStyle("rgba(0,0,0,0)", strokeColor, strokeWidth);
|
|
return that.vectorStyle.getPolygonStyle("rgba(0,0,0,0)", strokeColor, strokeWidth);
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
@@ -35,7 +45,6 @@ class WaterLayer {
|
|
|
this.canalLayer = new KMap.VectorLayer("canalLayer", 99, {
|
|
this.canalLayer = new KMap.VectorLayer("canalLayer", 99, {
|
|
|
style: (f) => {
|
|
style: (f) => {
|
|
|
const strokeColor = that.getLayerColor("canal");
|
|
const strokeColor = that.getLayerColor("canal");
|
|
|
- console.log('strokeColor', strokeColor);
|
|
|
|
|
return that.vectorStyle.getPolygonStyle("#00000010", strokeColor, 3)
|
|
return that.vectorStyle.getPolygonStyle("#00000010", strokeColor, 3)
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|