Leaflet - 仅绘制折线顶点
Leaflet - draw polyline vertices only
标题很清楚,我用的是Leaflet,只需要显示折线的顶点。例如看这张图片:
目前我只能有黑线,我只想要红方块。使用标记不是性能问题的选项,我的线条可能很大(500 000 个顶点)并且需要使用 smoothFactor。
这可能吗?如果没有,是否有人知道可以执行此操作的插件,或者提示我如何通过扩展 Polyline class?
你可以在这里做的是每次渲染多段线时,获取它的 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,只需要显示折线的顶点。例如看这张图片:
目前我只能有黑线,我只想要红方块。使用标记不是性能问题的选项,我的线条可能很大(500 000 个顶点)并且需要使用 smoothFactor。
这可能吗?如果没有,是否有人知道可以执行此操作的插件,或者提示我如何通过扩展 Polyline class?
你可以在这里做的是每次渲染多段线时,获取它的 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