2020-11-13 23:56 
ShineLe 
阅读(499
评论(0
编辑 
收藏 
举报

LatLng

代表一个有着确定经纬度坐标的地理点。

1、用例

  1. var latlng = L.latlng(50.5,30.5);

所有Leaflet的方法中接收的LatLng参数均可以用数组[ ]或者一个表示经纬度的Key/Value表示:

  1. map.panTo( [50,30] );
  2. map.panTo( {lon : 30 , lat : 50});
  3. map.panTo( {lat : 50 , lon : 30});
  4. map.panTo( L.latLng( 50 ,30 ));

2、初始化

  1. L.latLng( lat , lon , <Number>altitude?)//在(lat lon)处创建一个地理点,第三个参数表示高度
  2. L.latLng( [ lat , lon , alt?] )
  3. L.latLng( { latitude : lat , longitude : lon , alt : n?})

注意第一个字母小写,第二个L才大写

3、方法

  1. equals( <LatLng>otherlatlng , <Number>maxMargin?)//第二个参数表示误差值,如果给定点与原坐标之间的经纬度差值在误差值内,就返回true
  2. toString() //返回LatLng的String写法,类似LatLng(lat,lng)这样
  3. distanceTo(<LatLng>otherLatLng)//计算两点间的距离(单位m)
  4. wrap() //返回新的LatLng对象,它的经度longitude与原点经度刚好相反(区间是-180~180)
  5. toBounds(<Number>sizeInMeters)//返回LatLngBounds,边长单位m,长度是LatLon点坐标值的一半

LatLngBounds

代表地图上的一个矩形地理区域

1、用例

  1. var corner1=L.latLng(41.712,-74.227),
  2. corner2=L.latLng(40.774-74.125),
  3. bounds=L.latLngBounds(corner1,corner2);

所有接受LatLngBounds作为参数的方法,均可以用一个包含两个LatLngArray[ ]作为代替,比如:

  1. map.fitBounds(bounds)
  2. //等同于
  3. map.fitBounds([corner1 , corner2])
  4. //等同于
  5. map.fitBounds([ [40.712, -74.227] , [40.774, -74.125] ]);

2、初始化

  1. L.latLngBounds( <LatLng>corner1 , <LatLng>corner2 )
  2. L.latLngBounds( <LatLng[]> latlngs )

第二种方法在用于map.fitBounds()作为参数时会很有用。

 

3、方法

  1. extend(<LatLng> latlng) //延伸该Bounds到可以包含给定点
  2. extend( <LatLngBounds> otherBounds) //延伸到包含给定Bounds
  3. pad( <Number> bufferRation ) //根据参数值决定延伸还是收缩该Bounds。0.5表示各个方向上延伸50%,负数表示收缩
  4. getCenter() //返回LatLng;返回中心点
  5. getSouthWest()
  6. getNorthEast()
  7. getNorthWest()
  8. getSouthEast()
  9. getWest() //返回最西边的经度值
  10. getSouth()
  11. getEast()
  12. getWest()
  13. contains(<LatLngBounds>otherBounds) //是否包含给定的Bounds区域
  14. contains(<LatLng> latlng) //是否包含给定点
  15. intersects(<LatLngBounds> otherBounds) //是否与给定区域相交
  16. overlaps(<LatLngBounds> otherBounds) //是否与给定区域部分重叠(区别于相交是,相交可以是点,而重叠的部分一定是一个Bounds)
  17. toBBoxString() //返回构成该Bounds的右下和左上角点的坐标的String形式
  18. equals(<LatLngBounds>otherBounds,<Number>maxMargin?)//是否在经纬度误差为maxMargin的前提下,两块Bounds的范围相同?

 

Point

代表一个点(x,y),区别于LatLng是Point的坐标是以像素为单位,而LatLng的单位是°;或者说,Point是绝对于Web的,不管你Map怎么变,该Point都始终在Web页面的那个位置处;而LatLng则是绝对于Map的,它在地图上的坐标就是LatLng。

常用于地图平移的参数。

1、用例

  1. var point = L.point(200 , 300);

所有Leaflet的方法中接收Point类型作为参数的,均可以接收一个[ x , y ]作为替代。

2、初始化

  1. L.point( x , y , <Boolean> round? ) //round表示是否进行四舍五入
  2. L.point([ x , y ])
  3. L.point( { x:Number , y:Number } )

3、方法

  1. clone() //返回当前点的副本
  2. add(<Point> otherPoint) //返回两个点坐标的加和
  3. subtract(otherPoint) //返回两个点的差
  4. divideBy(n) //返回除以n后的坐标
  5. multiplyBy(n) //返回乘n后的坐标
  6. scaleBy( <Point>scale ) //两个点的对应坐标相乘得到新点
  7. unscaleBy( scale ) //原点两坐标除以scale的坐标得到新点
  8. round() //返回一个四舍五入后的点坐标的副本
  9. floor() //向下取整
  10. ceil() //向上取整
  11. trunc() //向0取整
  12. distanceTo(otherPoint) //返回两点间的笛卡尔距离
  13. equals(otherPoint) //如果两点坐标相同,返回true
  14. contains(otherPoint) //如果otherPoint的每个坐标绝对值都小于原点,则返回true
  15. toString()

 

Bounds

一个矩形区域,长度单位是像素。与Point的关系就像是LatLngBounds与LatLng的关系。

1、用例

  1. var p1=L.point(10,10),
  2. p2=L.point(40,60),
  3. bounds=L.bounds( p1 , p2 )

所有Leaflet方法中接收Bounds作为参数的,都可以将参数替换为Array [ point1 , point2 ]的形式。

2、初始化

  1. L.bounds(<Point>corner1 , <Point>corner2)
  2. L.bounds( [ corner1 , corner2 ])

3、方法

其实方法与LatLngBounds的方法类似,但是由于名字不太一样,所以这里还是写出来:

  1. extend(<Point> point) //延伸该bounds到可以包含给定点
  2. getCenter(<Boolean> round?)//取中心点,round表示是否四舍五入
  3. getBottomLeft() //返回左下角的Point
  4. getTopRight()
  5. getTopLeft()
  6. getBottomRight()
  7. getSize() //返回一个Point,表示该Bounds的长和宽
  8. contains(<Bounds>otherBounds) //如果包含给定Bounds就返回true
  9. contains(<Point> point) //如果包含给定point就返回true
  10. intersects(<Bounds>otherBounds) //如果两个Bounds相交,就返回true
  11. overlaps(<Bounds>otherBounds) //如果两个Bounds有重叠区域,就返回true

4、属性,Properties

  1. min //类型Point,左上角的点
  2. max //右下角的点

 

Icon

Icon就是Marker的图标

1、用例

  1. var myIcon=L.icon({
  2. iconUrl:\'my-icon.png\',
  3. iconSize:[38,95],
  4. iconAnchor:[22,94],
  5. popupAnchor:[-3,-76],
  6. shadowUrl:\'my-icon-shadow.png\',
  7. shadowSize:[68,95],
  8. shadowAnchor:[22,94]
  9. });
  10. L.marker( [50.505 , 30.57],{icon: myIcon}).addTo(map);

默认的Icon是一个蓝色的Icon(就是我们默认设置Marker的样式)。

2、初始化

  1. L.icon(<Icon options>options)

3、参数

  1. iconUrl //Icon图的URL,绝对地址或者相对于根目录的地址
  2. iconRetinaUrl //手机屏中的icon的URL
  3. iconSize //类型Point,表示icon的尺寸(单位Pixel)
  4. iconAnchor //类型Point,Icon图标左上角的坐标(以实际点的坐标为(0,0),相对于实际点的pixel坐标)
  5. popupAnchor //Popup的坐标
  6. shadowUrl //Icon 阴影的URL
  7. shadowSize
  8. shadowAnchor
  9. className //给Icon和shadow图的类命名

5、Icon.Default

如果想自制默认icon,就修改L.Marker.prototype.options

版权声明:本文为ShineLeBlog原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/ShineLeBlog/p/13970804.html