Leaflet 和 TurfJS:无法使用目的地和方位绘制垂直线
Leaflet and TurfJS: Can not draw perpendicular lines using destination and bearing
我正在尝试绘制垂直线,并且我正在使用 destination 和 rhumbDestination 方法。
let home = turf.point([43.12831626497193, 1.259286403656006]);
L.circle(home.geometry.coordinates, {
color: 'purple',
fillColor: 'purple',
fillOpacity: 0.5,
radius: 20
}).addTo(map);
let destination;
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
但生成的线不垂直
Not perpendicular
我正在使用传单进行可视化。
我也用destination方法测试过,结果一样。
虽然轴承是 90 的倍数,但结果是正确的。
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 0, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -180, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
Perpendicular
我做错了什么?如何使用 leaflet 和 turfjs 绘制垂直线?
这是坐标顺序的问题:Leaflet(如 Google 地图)使用 [latitude, longitude] 模式,而 Turf 遵循 [longitude, latitude] 的 GeoJSON 定义,即等同于 [ x, y] 在几何平面上。
感谢stegobit的回答
我正在尝试绘制垂直线,并且我正在使用 destination 和 rhumbDestination 方法。
let home = turf.point([43.12831626497193, 1.259286403656006]);
L.circle(home.geometry.coordinates, {
color: 'purple',
fillColor: 'purple',
fillOpacity: 0.5,
radius: 20
}).addTo(map);
let destination;
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 135, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -45, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
但生成的线不垂直
Not perpendicular
我正在使用传单进行可视化。 我也用destination方法测试过,结果一样。
虽然轴承是 90 的倍数,但结果是正确的。
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 0, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -180, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'green', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, 90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
destination = turf.rhumbDestination(home.geometry.coordinates, 400, -90, {units: 'meters'});
L.polyline([destination.geometry.coordinates, home.geometry.coordinates]).setStyle({color: 'red', weight: 5}).addTo(map);
Perpendicular
我做错了什么?如何使用 leaflet 和 turfjs 绘制垂直线?
这是坐标顺序的问题:Leaflet(如 Google 地图)使用 [latitude, longitude] 模式,而 Turf 遵循 [longitude, latitude] 的 GeoJSON 定义,即等同于 [ x, y] 在几何平面上。
感谢stegobit的回答