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只是一个保存坐标的作用。
上述内容有任何错误,欢迎留言指出,谢谢~