传单-仅绘制折线顶点

问题描述

标题非常清楚，我使用的是Leaflet，我只需要显示折线的顶点即可.例如查看此图片:

The title is quite clear, I'm using Leaflet and I need to show only the vertices of a polyline. For exemple see this image :

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

Currently I can only have the black line, I'd like only the red squares. Using markers is not an option for performance issue, my lines can be huge (500 000 vertices) and the use of smoothFactor is a need.

有可能吗?如果不是，是否有人知道可以做到这一点的插件，或者暗示我可以通过扩展Polyline类来做到这一点?

Is that possible? If not, does someone knows a plugin that does that, or have a hint on how could I do that by extending the Polyline class?

推荐答案

您可以在每次渲染折线时进行操作，获取其SVG路径的线段，并使用这些点将SVG矩形元素添加到折线的容器中:

What you could do here is every time the polyline gets rendered, get the segments of it's SVG path, use those points to add SVG rectangle elements to the polyline's container:

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

就我有时间进行测试而言，似乎可以正常工作；)虽然不得不使用超时，但不知道为什么，当我有更多时间可以查看时.

Seems to work as far as i had time to test it ;) Had to use a timeout though, don't know why, look in to that when i've got more time on my hands.

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

Example on Plunker: http://embed.plnkr.co/vZI7aC/preview

这篇关于传单-仅绘制折线顶点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！