Leaflet中L.Point与L.LatLng的区别联系

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只是一个保存坐标的作用。

上述内容有任何错误，欢迎留言指出，谢谢~