Leaflet
an open-source JavaScript library for mobile-friendly interactive maps
Leaflet中有两种示意坐标点的数据结构,一种是最经常运用的LatLng
,另一种则是Point
。
L.LatLng
LatLng是示意一个具有纬度(lat)和经度(lng)的地舆坐标(以度为单元)。LatLng的以下组织形式都可用于leaflet的要领(除非有特别申明):
map.panTo([50, 30]); //数组
map.panTo({lon: 30, lat: 50}); //简朴对象
map.panTo({lat: 50, lng: 30}); //简朴对象
map.panTo(L.latLng(50, 30)); //函数
运用要领
var latlng = L.latLng(50.5, 30.5);
组织函数
组织函数 | 形貌 |
---|---|
L.latLng(<Number> latitude, <Number> longitude, <Number> altitude?) | 经由过程给定的纬度和经度建立一个地舆坐标点(海拔高度是可选的 ,以米为单元) |
L.latLng(<Array> coords) | 数组花样示意的地舆坐标 |
L.latLng(<Object> coords) | 一般对象示意的地舆坐标 |
L.Point
Point指的是用像素示意x和y的坐标点。Point的以下组织形式都可用于leaflet的要领和选项(除非有特别申明):
map.panBy([200, 300]); //数组
map.panBy(L.point(200, 300)); //函数
运用要领
var point = L.point(200, 300);
组织函数
组织函数 | 形貌 |
---|---|
L.point(<Number> x, <Number> y, <Boolean> round?) | 用给定的x和y坐标建立一个Point对象。假如可选项round 设置为true,则舍入x和y值。 |
L.point(<Number[]> coords) | 数组花样 |
L.point(<Object> coords) | 一般对象花样 |
两者互相转换
这两个函数会依据当前舆图的缩放水平(zoom
)转换地舆点与像素点,返回值分别是Point和latLng。
要领 | 返回值 | 形貌 |
---|---|---|
latLngToPoint(<LatLng> latlng, <Number> zoom) | Point | 在统一缩放级别下,将地舆坐标转换为像素坐标。 |
pointToLatLng(<Point> point, <Number> zoom) | LatLng | 在统一缩放级别下,将像素坐标转换为地舆坐标。 |
两者共同点
因为LatLng
和Point
均不是继续于Leaflet的L.Class
对象,所以它们都不能拓展新的类,也不能经由过程include
函数为其增加新的要领。
两者不同点
LatLng
是形貌经纬度的坐标类,代表具有肯定纬度和经度的地舆点,而Point
形貌的是在屏幕上位置的像素点,重要用于屏幕交互事宜上,比方鼠标单击双击事宜,在屏幕上的触控滑动事宜等,即当鼠标事宜发作时,相对于舆图图层或舆图容器的点的像素坐标位置。在有些情况下,须要经由过程上述两个函数要领对两者举行互相转换。
如安在舆图上增加坐标点?
既然L.LatLng和L.Point没有继续于L.Class
,也就不会有响应的要领将坐标点增加进舆图图层,那怎么办呢?
您能够尝试运用L.Layer
父类下的L.Circle
,经由过程它将坐标点增加进舆图,运用要领以下:
var latLng = L.latLng(30.594331217463765, 114.28321838378906); //建立坐标点
L.circle(latLng, {radius:300,color: 'red', fillColor:'#f03',fillOpacity:1}).addTo(map); //将坐标点增加进图层
注:将radius
设置为0,在舆图上则显现为一个点。为了轻易您检察结果,将其设置为300。固然了,在这里的L.latlng只是一个保留坐标的作用。
上述内容有任何毛病,迎接留言指出,感谢~