时间戳

首页 > 解决方案 > 如何使用像素坐标在 Leaflet 中绘制折线？

leaflet - 如何使用像素坐标在 Leaflet 中绘制折线？

问题描述

我的地图已设置好，标记已到位，并且运行良好。我现在想在标记之间添加线条；所以我使用了 Leaflet 中的代码示例，并从几个标记中添加了坐标，但地图上没有显示这条线。

var polylinePoints = [
    [3474, 12427],
    [2298, 11596],
];

var polyline = L.polyline(polylinePoints).addTo(map);

然后我尝试了这个...

var pointA = new L.LatLng(3474, 12427);
var pointB = new L.LatLng(2298, 11596);
var pointList = [pointA, pointB];

var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
});
firstpolyline.addTo(map);

...并且该行仍然没有显示。

问题可能是我使用的是像素坐标而不是实际的纬度和经度坐标吗？如果是这样，我如何使用像素坐标在标记之间画线？

标签： leaflet

解决方案

问题可能是我使用的是像素坐标而不是实际的纬度和经度坐标吗？如果是这样，我如何使用像素坐标在标记之间画线？

确实。

尝试这个：

var pointA = map.layerPointToLatLng(L.point(3474, 12427));
var pointB = map.layerPointToLatLng(L.point(2298, 11596));
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
});
firstpolyline.addTo(map);

不过，接下来您可能会遇到 origin 问题，请参阅map.getPixelOrigin()

推荐阅读