如何使用像素坐标在Leaflet中绘制折线?

时间:2019-11-13 14:54:32

标签: 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);

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

问题可能出在我使用的是像素坐标,而不是实际的经纬度坐标吗?如果是这样,如何使用像素坐标在标记之间绘制线条?

1 个答案:

答案 0 :(得分:0)

  

问题可能出在我使用的是像素坐标,而不是实际的经纬度坐标吗?如果是这样,如何使用像素坐标在标记之间绘制线条?

当然。

尝试一下:

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

接下来,您可能会遇到起源问题,请参见map.getPixelOrigin()