css - 如何在传单中设置路径样式？

Question

我有使用 dashArray 选项设置样式的几何线条。我正在尝试添加黑色轮廓以区分较亮 basemap 上的间隙。

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

将以下样式应用于各个图层会创建一 strip 有黑色轮廓的白线:

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

你可以用两条路径达到同样的效果:

1. 背景，连续且广泛。
2. 前景，虚线且较窄。透过缝隙可以看到背景。

这不是不完全相同的结果，因为如果您想要圆形大写字母，那是白色破折号。但是如果你想要真正的方帽，如下所示，那么你会得到同样的效果:

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);

<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>