传单-使用latLon +距离(米)+角度(度)创建标记 [英] Leaflet - create a marker with latLon + distance (meter) + angle (degree)
本文介绍了传单-使用latLon +距离(米)+角度(度)创建标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在距标记A的给定距离(以米为单位)和角度为给定的角度处计算新点(标记B)?
How to calculate a new point (marker B) at a given distance in meter from a marker A and at a given angle in degree?
Google API具有此功能,但我在Leaflet中找不到它:
Google API has this but I can't find it in Leaflet:
var pointA = new google.maps.LatLng(25.48, -71.26);
var radiusInKm = 10;
var pointB = pointA.destinationPoint(90, radiusInKm);
推荐答案
您可以使用 Leaflet.GeometryUtil 的noreferrer> destination
方法来计算目标指向并在其中创建标记:
You can use the destination
method of Leaflet.GeometryUtil to calculate the destination point and create a marker there :
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);
和一个演示
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: '© <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);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<script src="https://npmcdn.com/leaflet-geometryutil"></script>
<div id='map'></div>
If you want to avoid an external library, you can take inspiration from the destination
method source code (currently at line 712).
这篇关于传单-使用latLon +距离(米)+角度(度)创建标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文