如何在传单中设置路径？

Question

我使用dashArray选项设置了线条几何图形。我尝试添加黑色轮廓以区分较浅的底图上的间隙。

我尝试在下方添加一条较重的黑色路径以创建轮廓，但似乎间隙是透明的。

将以下样式应用于相应的图层会创建一条带有黑色轮廓的白线：

path = {
    color: '#ffffff',
    weight: 3,
    opacity: 1
}

outline = {
    color: '#000000',
    weight: 5,
    opacity: 1
}

当我应用dashArray时，底层显示为：

path = {
    color: '#000000',
    weight: 3,
    opacity: 1,
    dashArray: '5,10'
}

outline = {
    color: '#000000',
    weight: 5,
    opacity: 1
}

有没有一种简单的方法可以达到这个目的？

传单路径样式选项here。

编辑：顶部路径本身为dashArray。其次是当我将dashArray覆盖在更宽的黑线（轮廓）上时。第三是我想要实现的目标。

Answer 1

只需2条路径就可以达到同样的效果：

1. 背景，连续且更广。
2. 前景，虚线和狭窄。通过间隙可以看到背景。

并不完全相同的结果，因为如果你想要圆形帽，它是获得它们的白色破折号。但如果您想要实际的方形帽，如下所示，那么您将获得相同的效果：



＆＃13;
＆＃13;
var map = L.map("map").setView([0.4, 0], 8);
var coords = [
  [0, -1],
  [0, 1],
  [1, 1]
];

// Background continuous black stroke, wider than dashed line.
L.polyline(coords, {
  weight: 10,
  lineCap: 'square', // Optional, just to avoid round borders.
  color: 'black'
}).addTo(map);

// Foreground dashed white stroke, narrower than background.
L.polyline(coords, {
  weight: 6,
  dashArray: '5, 10',
  lineCap: 'square', // Optional, just to avoid round borders.
  color: 'white'
}).addTo(map);
＆＃13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<div id="map" style="height: 200px"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我提出的解决方案将两个示例结合使用三个层，将dashArray路径放置在黑色轮廓图层的顶部。

//base layer black & wider to create outline
outline = {
    color: '#000000',
    weight: 5,
    opacity: 1
}

//white line layer that will show through the transparent gaps
pathBackground = {
    color: '#ffffff',
    weight: 3,
    opacity: 1
}

//dashed path is placed on top of the black-outlined white line
path = {
    color: '#000000',
    weight: 3,
    opacity: 1,
    dashArray: '5,10'
}