Leaflet:LatLng、LatLngBounds、Point、Bounds、Icon


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作為參數的方法,均可以用一個包含兩個LatLngArray[ ]作為代替,比如:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM