Leaflet - 创建一个带有 latLon + 距离(米)+ 角度(度)的标记

sgr*_*lon 5 javascript leaflet

如何计算距标记 A 给定距离(以米为单位)和给定角度(以度为单位)处的新点(标记 B)?

Google API 有这个,但我在 Leaflet 中找不到它:

var pointA = new google.maps.LatLng(25.48, -71.26); 
var radiusInKm = 10;
var pointB = pointA.destinationPoint(90, radiusInKm);
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

nik*_*shr 5

您可以使用Leaflet.GeometryUtildestination方法来计算目标点并在那里创建一个标记:

var center = [40.69, -73.98];
var radiusInKm = 10;
var angleInDegrees = 90;

var A = L.marker(center).addTo(map);
var B = L.GeometryUtil.destination(markerA.getLatLng(), angleInDegrees, radiusInKm * 1000);
L.marker(B).addTo(map);
Run Code Online (Sandbox Code Playgroud)

和一个演示

var center = [40.69, -73.98];
var radiusInKm = 10;
var angleInDegrees = 90;

var A = L.marker(center).addTo(map);
var B = L.GeometryUtil.destination(markerA.getLatLng(), angleInDegrees, radiusInKm * 1000);
L.marker(B).addTo(map);
Run Code Online (Sandbox Code Playgroud)
var center = [40.69,-73.98];
var radiusInKm = 10;
var angleInDegrees = 90;

var map = L.map('map').setView(center, 11);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker(center).addTo(map);
L.circle(marker.getLatLng(), {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.2,
    radius: radiusInKm * 1000
}).addTo(map);

var to = L.GeometryUtil.destination(marker.getLatLng(), angleInDegrees, radiusInKm * 1000);
L.marker(to).addTo(map);
Run Code Online (Sandbox Code Playgroud)
html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

如果您想避免使用外部库,您可以从destination方法源代码(目前在第 712 行)中获取灵感。