Leaflet - 仅绘制折线顶点

时间:2015-10-07 22:00:24

标签: leaflet polyline vertices

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:2)

这里你可以做的是每次渲染折线时,获取它的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)
  }

http://www.exceltojson.com/

就我有时间测试它似乎工作;)但是不得不使用超时,不知道为什么,当我有更多的时间在我的手上时,请查看。

关于Plunker的示例:enter image description here