JavaScript - 如何为红线绘制黑色轮廓（或描边） - leaflet mapbox

Question

我尝试弄清楚如何用

fillcolor: red

和

outline: black

绘制线串。就像下图一样：

style = {
        fillColor: 'rgb(255,0,0)',
        outline: 'rgb(0,0,0)'
        weight: 10
    };

它不起作用，也许我需要使用行程样式？

任何帮助将不胜感激。

Answer 1

线条没有，也不可能有填充颜色。

您真正想要的是为每个线几何形状绘制两个线符号，同时确保黑色线被绘制为第一个（即在后面）红色线。

在 Leaflet 中，创建两个地图窗格，确保它们的 z 索引正确（阅读教程！），根据需要添加图层，重用线条几何图形，但更改符号外观。

Answer 2

@mik1971 看这个例子。我的情况类似，但对于其他可能的分析效率不高：

var geojson = new L.geoJson(data, {                            
            style: function (feature) {                                                                      
            return {color: 'black', opacity: 1, weight: 3};
        }
        }).addTo(map);
    
        var geojson = new L.geoJson(data, {                        
            style: function (feature) {                                 
                var c;                                                
                switch (feature.properties.dpv_cal) {
                    case 'Pavimentada':
                        c = '#ff0127';                                  
                        break;
                    case 'Mejorada':
                        c = '#db6adb';
                        break;
                    case 'Natural':
                        c = '#ffffff';
                        break;
                    default:
                        c = 'grey';
                        break;
                }
            return {color: c, opacity: 1, weight: 2};
            }
        }).addTo(map);
    }
});

我已经声明了两次我的 geojson 并且它有效。

Answer 3

这对我有用

    this.notPassedLine = L.polyline(path, {
      weight: newOptions?.weight,
      color: newOptions?.notPassedLineColor,
      className: "bordered-polyline",
    }).addTo(this.map);

.bordered-polyline {
  filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff);
}