Leaflet - 仅绘制折线顶点答案

【问题标题】：Leaflet - draw polyline vertices onlyLeaflet - 仅绘制折线顶点
【发布时间】：2016-01-05 07:53:42
【问题描述】：

标题很清楚，我使用的是 Leaflet，我只需要显示折线的顶点。例如看这张图：

目前我只能有黑线，我只想要红色方块。使用标记不是性能问题的一种选择，我的线条可能很大（500 000 个顶点），并且需要使用 smoothFactor。

这可能吗？如果没有，是否有人知道这样做的插件，或者提示我如何通过扩展 Polyline 类来做到这一点？

【问题讨论】：

如果你不能使用标记，即使在画布模式下，听起来你想要一个 svg path 删除/隐藏它的重要部分以仅显示顶点部分。（以及你将如何制作反正它们是红色方块？-我猜是一种厚实的红色折线样式？）。我不确定在 SVG 规范中它是如何工作的。
好吧，我是 svg 的菜鸟，所以我绝对不知道 ^^。我不必画红色方块，它可以是点（例如）。

标签： leaflet polyline vertices

【解决方案1】：

你可以在这里做的是每次渲染折线时，获取它的 SVG 路径段，使用这些点将 SVG 矩形元素添加到折线的容器中：

var polyline = L.Polyline([]).addTo(map),
    list = polyline._path.pathSegList

// Iterate segments
for (var i = 0; i < list.length; i++) {

    // Create SVG rectangle element
    rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')

    // Set rectangle size attributes
    rectangle.setAttributeNS(null, 'height', 4)
    rectangle.setAttributeNS(null, 'width', 4)

    // Set position attributes, compensate for size
    rectangle.setAttributeNS(null, 'x', list[i].x - 2)
    rectangle.setAttributeNS(null, 'y', list[i].y - 2)

    // Set rectangle color
    rectangle.setAttributeNS(null, 'fill', 'red')

    // Append rectangle to polyline container
    polyline._container.appendChild(rectangle)
  }

在我有时间测试的情况下似乎可以工作；）虽然不得不使用超时，但不知道为什么，当我有更多时间时再看看。

Plunker 示例：http://embed.plnkr.co/vZI7aC/preview

【讨论】：

这是一个好的开始，谢谢！我正在使用 Leaflet v1.0 beta 所以它需要一些调整。在接下来的几周里，我不再处理这个问题，但如果我解决了它，我会回来的。如果您使用此代码，请注意，它不适用于 Safari。
我看到他们不再为每个路径添加 g 元素，并将所有 path 元素附加到一个 g 元素中。需要进行一些小的修改才能使其与 1.0.0-b1 一起使用。至于Safari的问题，刚刚试了一下，你是对的。有点奇怪，因为它根本不会对我抛出任何错误。我不喜欢 Safari 的检查员，但我会在有时间的时候调查一下。
不，谢谢，总是很乐意提供帮助。一旦我们达成令人满意的解决方案，只需接受答案。我已将示例更新为使用 1.0.0-b1。将分组的矩形直接附加到this._path 的parentElement。现在工作。我会就 Safari 问题与您联系。
太好了，这行得通！我接受了答案，但是，如果您有时间解决 Safari 问题，那就太好了！再次感谢。