如何为设置了dashArray的Leaflet折线设置两种颜色？

嘿，这个需求很实用！Leaflet原生的dashArray属性只能给整条折线设置单一颜色，所以要实现“一段白色、一段另一种颜色”的交替虚线效果，我们得用双层折线叠加的思路来搞定，具体操作如下：

• 先创建一条底层折线：设置你想要的“另一段”颜色，不需要加dashArray，保持实线状态。
• 再在它上方叠加一条上层折线：用你原来的dashArray: [12,12]和白色#ffffff配置，这样上层的白色虚线部分会盖住底层对应区域，而虚线的空白处就会透出底层折线的颜色，刚好形成两种颜色交替的效果。

完整代码示例 #

// 先初始化地图（如果还没做的话）
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 1. 底层折线：设置你需要的另一种颜色，比如红色#ff0000
var bottomPolyline = L.polyline(
    [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]],
    {
        weight: 5, // 和上层折线保持一致的粗细，避免视觉错位
        color: '#ff0000' // 这就是你要的另一段颜色
    }
).addTo(map);

// 2. 上层折线：白色虚线，和你最初的配置一致
var topPolyline = L.polyline(
    [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]],
    {
        weight: 5,
        dashArray: [12, 12],
        color: '#ffffff'
    }
).addTo(map);

小提示 #

• 两条折线的weight必须设置相同，不然会出现粗细不一的违和感。
• 如果要调整虚线的段长或间隔，只需要修改上层折线的dashArray参数就行，底层折线保持实线状态不变。

内容的提问来源于stack exchange，提问作者Perry2008084