javascript - 有没有办法在传单多边形、多边形中创建两种颜色的边框？

Question

如何使用传单创建多多边形的自定义边框？我想要内边框为黑色，外边框为红色，反之亦然。

示例图片来说明我的意思:

有什么办法可以做到这一点吗？

Answer 1

您可以使用Leaflet Polyline Offset插件用于绘制重复的折线偏移指定数量的像素并达到一定程度的预期效果。

L.polyline([
  [48.3, 0.1],
  [48.3, 0.7],
  [48.7, 0.7],
  [48.7, 0.1],
  [48.3, 0.1]
], {
  fillColor: "none",
  weight: 4,
  lineJoin: "miter",
  color: "red"
}).addTo(map);

L.polyline([
  [48.3, 0.1],
  [48.3, 0.7],
  [48.7, 0.7],
  [48.7, 0.1],
  [48.3, 0.1]
], {
  fillColor: "none",
  weight: 4,
  lineJoin: "miter",
  color: "black",
  offset: -4 // Thanks to Leaflet Polyline Offset plugin
}).addTo(map);

但是，折线的起点和终点存在一个“错误”，因为它是偏移的，但没有缩短/延伸以缩小与折线起点的间隙。

使用 L.rectangle 或 L.polygon 显示了一个不同的错误，其中最后一段没有偏移。如果有人愿意查看、纠正错误并提交 Pull 请求，那么这可能是插件的改进空间! :-)

演示:http://jsfiddle.net/3v7hd2vx/42/