Leaflet - 仅绘制折线顶点

Question

标题很清楚，我正在使用 Leaflet，我只需要显示多段线的顶点。例如看这张图片:

目前我只能有黑线，我只想要红色方 block 。使用标记不是性能问题的选项，我的线可能很大(500 000 个顶点)并且需要使用 smoothFactor。

这可能吗？如果没有，是否有人知道可以执行此操作的插件，或者提示我如何通过扩展 Polyline 类来执行此操作？

Answer 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