LatLng
代表一個有着確定經緯度坐標的地理點。
1、用例
var latlng = L.latlng(50.5,30.5);
所有Leaflet的方法中接收的LatLng參數均可以用數組[ ]或者一個表示經緯度的Key/Value表示:
map.panTo( [50,30] ); map.panTo( {lon : 30 , lat : 50}); map.panTo( {lat : 50 , lon : 30}); map.panTo( L.latLng( 50 ,30 ));
2、初始化
L.latLng( lat , lon , <Number>altitude?)//在(lat lon)處創建一個地理點,第三個參數表示高度 L.latLng( [ lat , lon , alt?] ) L.latLng( { latitude : lat , longitude : lon , alt : n?})
注意第一個字母小寫,第二個L才大寫
3、方法
equals( <LatLng>otherlatlng , <Number>maxMargin?)//第二個參數表示誤差值,如果給定點與原坐標之間的經緯度差值在誤差值內,就返回true toString() //返回LatLng的String寫法,類似LatLng(lat,lng)這樣 distanceTo(<LatLng>otherLatLng)//計算兩點間的距離(單位m) wrap() //返回新的LatLng對象,它的經度longitude與原點經度剛好相反(區間是-180~180) toBounds(<Number>sizeInMeters)//返回LatLngBounds,邊長單位m,長度是LatLon點坐標值的一半
LatLngBounds
代表地圖上的一個矩形地理區域
1、用例
var corner1=L.latLng(41.712,-74.227), corner2=L.latLng(40.774-74.125), bounds=L.latLngBounds(corner1,corner2);
所有接受LatLngBounds作為參數的方法,均可以用一個包含兩個LatLng的Array[ ]作為代替,比如:
map.fitBounds(bounds) //等同於 map.fitBounds([corner1 , corner2]) //等同於 map.fitBounds([ [40.712, -74.227] , [40.774, -74.125] ]);
2、初始化
L.latLngBounds( <LatLng>corner1 , <LatLng>corner2 )
L.latLngBounds( <LatLng[]> latlngs )
第二種方法在用於map.fitBounds()作為參數時會很有用。
3、方法
extend(<LatLng> latlng) //延伸該Bounds到可以包含給定點 extend( <LatLngBounds> otherBounds) //延伸到包含給定Bounds pad( <Number> bufferRation ) //根據參數值決定延伸還是收縮該Bounds。0.5表示各個方向上延伸50%,負數表示收縮 getCenter() //返回LatLng;返回中心點 getSouthWest() getNorthEast() getNorthWest() getSouthEast() getWest() //返回最西邊的經度值 getSouth() getEast() getWest() contains(<LatLngBounds>otherBounds) //是否包含給定的Bounds區域 contains(<LatLng> latlng) //是否包含給定點 intersects(<LatLngBounds> otherBounds) //是否與給定區域相交 overlaps(<LatLngBounds> otherBounds) //是否與給定區域部分重疊(區別於相交是,相交可以是點,而重疊的部分一定是一個Bounds) toBBoxString() //返回構成該Bounds的右下和左上角點的坐標的String形式 equals(<LatLngBounds>otherBounds,<Number>maxMargin?)//是否在經緯度誤差為maxMargin的前提下,兩塊Bounds的范圍相同?
Point
代表一個點(x,y),區別於LatLng是Point的坐標是以像素為單位,而LatLng的單位是°;或者說,Point是絕對於Web的,不管你Map怎么變,該Point都始終在Web頁面的那個位置處;而LatLng則是絕對於Map的,它在地圖上的坐標就是LatLng。
常用於地圖平移的參數。
1、用例
var point = L.point(200 , 300);
所有Leaflet的方法中接收Point類型作為參數的,均可以接收一個[ x , y ]作為替代。
2、初始化
L.point( x , y , <Boolean> round? ) //round表示是否進行四舍五入 L.point([ x , y ]) L.point( { x:Number , y:Number } )
3、方法
clone() //返回當前點的副本 add(<Point> otherPoint) //返回兩個點坐標的加和 subtract(otherPoint) //返回兩個點的差 divideBy(n) //返回除以n后的坐標 multiplyBy(n) //返回乘n后的坐標 scaleBy( <Point>scale ) //兩個點的對應坐標相乘得到新點 unscaleBy( scale ) //原點兩坐標除以scale的坐標得到新點 round() //返回一個四舍五入后的點坐標的副本 floor() //向下取整 ceil() //向上取整 trunc() //向0取整 distanceTo(otherPoint) //返回兩點間的笛卡爾距離 equals(otherPoint) //如果兩點坐標相同,返回true contains(otherPoint) //如果otherPoint的每個坐標絕對值都小於原點,則返回true toString()
Bounds
一個矩形區域,長度單位是像素。與Point的關系就像是LatLngBounds與LatLng的關系。
1、用例
var p1=L.point(10,10), p2=L.point(40,60), bounds=L.bounds( p1 , p2 )
所有Leaflet方法中接收Bounds作為參數的,都可以將參數替換為Array [ point1 , point2 ]的形式。
2、初始化
L.bounds(<Point>corner1 , <Point>corner2)
L.bounds( [ corner1 , corner2 ])
3、方法
其實方法與LatLngBounds的方法類似,但是由於名字不太一樣,所以這里還是寫出來:
extend(<Point> point) //延伸該bounds到可以包含給定點 getCenter(<Boolean> round?)//取中心點,round表示是否四舍五入 getBottomLeft() //返回左下角的Point getTopRight() getTopLeft() getBottomRight() getSize() //返回一個Point,表示該Bounds的長和寬 contains(<Bounds>otherBounds) //如果包含給定Bounds就返回true contains(<Point> point) //如果包含給定point就返回true intersects(<Bounds>otherBounds) //如果兩個Bounds相交,就返回true overlaps(<Bounds>otherBounds) //如果兩個Bounds有重疊區域,就返回true
4、屬性,Properties
min //類型Point,左上角的點 max //右下角的點
Icon
Icon就是Marker的圖標
1、用例
var myIcon=L.icon({ iconUrl:'my-icon.png', iconSize:[38,95], iconAnchor:[22,94], popupAnchor:[-3,-76], shadowUrl:'my-icon-shadow.png', shadowSize:[68,95], shadowAnchor:[22,94] }); L.marker( [50.505 , 30.57],{icon: myIcon}).addTo(map);
默認的Icon是一個藍色的Icon(就是我們默認設置Marker的樣式)。
2、初始化
L.icon(<Icon options>options)
3、參數
iconUrl //Icon圖的URL,絕對地址或者相對於根目錄的地址 iconRetinaUrl //手機屏中的icon的URL iconSize //類型Point,表示icon的尺寸(單位Pixel) iconAnchor //類型Point,Icon圖標左上角的坐標(以實際點的坐標為(0,0),相對於實際點的pixel坐標) popupAnchor //Popup的坐標 shadowUrl //Icon 陰影的URL shadowSize shadowAnchor className //給Icon和shadow圖的類命名
5、Icon.Default
如果想自制默認icon,就修改L.Marker.prototype.options