Leaflet锛歀atLng銆丩atLngBounds銆丳oint銆丅ounds銆両con

Posted 2020-12-21

鏍囩锛?a href='http://www.mamicode.com/so/1/style' title='style'>style   鍏崇郴   鎬庝箞   rac   icon   鏍峰紡   over   rgba   鍥炬爣   

LatLng

浠ｈ〃涓€涓湁鐫€纭畾缁忕含搴﹀潗鏍囩殑鍦扮悊鐐广€?/p>

1銆佺敤渚?/p>

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

鎵€鏈塋eaflet鐨勬柟娉曚腑鎺ユ敹鐨凩atLng鍙傛暟鍧囧彲浠ョ敤鏁扮粍[ ]鎴栬€呬竴涓?span style="color: rgba(255, 0, 0, 1)">琛ㄧず缁忕含搴︾殑Key/Value琛ㄧず锛?/p>

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?})

娉ㄦ剰绗竴涓瓧姣嶅皬鍐欙紝绗簩涓狶鎵嶅ぇ鍐?/p>

3銆佹柟娉?/p>

equals( <LatLng>otherlatlng , <Number>maxMargin?)//绗簩涓弬鏁拌〃绀鸿宸€硷紝濡傛灉缁欏畾鐐逛笌鍘熷潗鏍囦箣闂寸殑缁忕含搴﹀樊鍊煎湪璇樊鍊煎唴锛屽氨杩斿洖true
toString() //杩斿洖LatLng鐨凷tring鍐欐硶锛岀被浼糒atLng(lat,lng)杩欐牱
distanceTo(<LatLng>otherLatLng)//璁＄畻涓ょ偣闂寸殑璺濈锛堝崟浣峬锛?/span>
wrap() //杩斿洖鏂扮殑LatLng瀵硅薄锛屽畠鐨勭粡搴ongitude涓庡師鐐圭粡搴﹀垰濂界浉鍙?鍖洪棿鏄?180~180)
toBounds(<Number>sizeInMeters)//杩斿洖LatLngBounds锛岃竟闀垮崟浣峬锛岄暱搴︽槸LatLon鐐瑰潗鏍囧€肩殑涓€鍗?/span>

LatLngBounds

浠ｈ〃鍦板浘涓婄殑涓€涓煩褰㈠湴鐞嗗尯鍩?/p>

1銆佺敤渚?/p>

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

鎵€鏈夋帴鍙?span style="color: rgba(255, 0, 0, 1)">LatLngBounds浣滀负鍙傛暟鐨勬柟娉曪紝鍧囧彲浠ョ敤涓€涓寘鍚袱涓?span style="color: rgba(255, 0, 0, 1)">LatLng鐨?span style="color: rgba(255, 0, 0, 1)">Array[ ]浣滀负浠ｆ浛锛屾瘮濡傦細

map.fitBounds(bounds)

//绛夊悓浜?/span>

map.fitBounds([corner1 , corner2])

//绛夊悓浜?/span>

map.fitBounds([  [40.712, -74.227]  ,  [40.774, -74.125] ]);

2銆佸垵濮嬪寲

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

绗簩绉嶆柟娉曞湪鐢ㄤ簬map.fitBounds()浣滀负鍙傛暟鏃朵細寰堟湁鐢ㄣ€?/p>

 

3銆佹柟娉?/p>

extend(<LatLng> latlng) //寤朵几璇ounds鍒板彲浠ュ寘鍚粰瀹氱偣
extend( <LatLngBounds> otherBounds) //寤朵几鍒板寘鍚粰瀹欱ounds
pad( <Number> bufferRation ) //鏍规嵁鍙傛暟鍊煎喅瀹氬欢浼歌繕鏄敹缂╄Bounds銆?.5琛ㄧず鍚勪釜鏂瑰悜涓婂欢浼?0%锛岃礋鏁拌〃绀烘敹缂?/span>
getCenter() //杩斿洖LatLng锛涜繑鍥炰腑蹇冪偣
getSouthWest()
getNorthEast()
getNorthWest()
getSouthEast()
getWest() //杩斿洖鏈€瑗胯竟鐨勭粡搴﹀€?/span>
getSouth()
getEast()
getWest()
contains(<LatLngBounds>otherBounds) //鏄惁鍖呭惈缁欏畾鐨凚ounds鍖哄煙
contains(<LatLng> latlng) //鏄惁鍖呭惈缁欏畾鐐?/span>
intersects(<LatLngBounds> otherBounds) //鏄惁涓庣粰瀹氬尯鍩熺浉浜?/span>
overlaps(<LatLngBounds> otherBounds) //鏄惁涓庣粰瀹氬尯鍩熼儴鍒嗛噸鍙?鍖哄埆浜庣浉浜ゆ槸锛岀浉浜ゅ彲浠ユ槸鐐癸紝鑰岄噸鍙犵殑閮ㄥ垎涓€瀹氭槸涓€涓狟ounds)
toBBoxString() //杩斿洖鏋勬垚璇ounds鐨勫彸涓嬪拰宸︿笂瑙掔偣鐨勫潗鏍囩殑String褰㈠紡
equals(<LatLngBounds>otherBounds,<Number>maxMargin?)//鏄惁鍦ㄧ粡绾害璇樊涓簃axMargin鐨勫墠鎻愪笅锛屼袱鍧桞ounds鐨勮寖鍥寸浉鍚岋紵

 

Point

浠ｈ〃涓€涓偣(x,y)锛屽尯鍒簬LatLng鏄疨oint鐨勫潗鏍囨槸浠?span style="color: rgba(255, 0, 0, 1)">鍍忕礌涓哄崟浣嶏紝鑰孡atLng鐨勫崟浣嶆槸掳锛涙垨鑰呰锛孭oint鏄粷瀵逛簬Web鐨勶紝涓嶇浣燤ap鎬庝箞鍙橈紝璇oint閮藉缁堝湪Web椤甸潰鐨勯偅涓綅缃锛涜€孡atLng鍒欐槸缁濆浜嶮ap鐨勶紝瀹冨湪鍦板浘涓婄殑鍧愭爣灏辨槸LatLng銆?/p>

甯哥敤浜庡湴鍥惧钩绉荤殑鍙傛暟銆?/p>

1銆佺敤渚?/p>

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

鎵€鏈塋eaflet鐨勬柟娉曚腑鎺ユ敹Point绫诲瀷浣滀负鍙傛暟鐨勶紝鍧囧彲浠ユ帴鏀朵竴涓?span style="color: rgba(255, 0, 0, 1)">[ x , y ]浣滀负鏇夸唬銆?/p>

2銆佸垵濮嬪寲

L.point( x , y , <Boolean> round? ) //round琛ㄧず鏄惁杩涜鍥涜垗浜斿叆
L.point([ x , y ])
L.point( { x:Number , y:Number } )

3銆佹柟娉?/p>

clone()  //杩斿洖褰撳墠鐐圭殑鍓湰
add(<Point> otherPoint) //杩斿洖涓や釜鐐瑰潗鏍囩殑鍔犲拰
subtract(otherPoint) //杩斿洖涓や釜鐐圭殑宸?/span>
divideBy(n) //杩斿洖闄や互n鍚庣殑鍧愭爣
multiplyBy(n) //杩斿洖涔榥鍚庣殑鍧愭爣
scaleBy( <Point>scale ) //涓や釜鐐圭殑瀵瑰簲鍧愭爣鐩镐箻寰楀埌鏂扮偣
unscaleBy( scale ) //鍘熺偣涓ゅ潗鏍囬櫎浠cale鐨勫潗鏍囧緱鍒版柊鐐?/span>
round() //杩斿洖涓€涓洓鑸嶄簲鍏ュ悗鐨勭偣鍧愭爣鐨勫壇鏈?/span>
floor() //鍚戜笅鍙栨暣
ceil() //鍚戜笂鍙栨暣
trunc() //鍚?鍙栨暣
distanceTo(otherPoint) //杩斿洖涓ょ偣闂寸殑绗涘崱灏旇窛绂?/span>
equals(otherPoint) //濡傛灉涓ょ偣鍧愭爣鐩稿悓锛岃繑鍥瀟rue
contains(otherPoint) //濡傛灉otherPoint鐨勬瘡涓潗鏍囩粷瀵瑰€奸兘灏忎簬鍘熺偣锛屽垯杩斿洖true
toString()

 

Bounds

涓€涓煩褰㈠尯鍩燂紝闀垮害鍗曚綅鏄儚绱犮€備笌Point鐨勫叧绯诲氨鍍忔槸LatLngBounds涓嶭atLng鐨勫叧绯汇€?/p>

1銆佺敤渚?/p>

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

鎵€鏈塋eaflet鏂规硶涓帴鏀禕ounds浣滀负鍙傛暟鐨勶紝閮藉彲浠ュ皢鍙傛暟鏇挎崲涓?span style="color: rgba(255, 0, 0, 1)">Array [ point1 , point2 ]鐨勫舰寮忋€?/p>

2銆佸垵濮嬪寲

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

3銆佹柟娉?/p>

鍏跺疄鏂规硶涓嶭atLngBounds鐨勬柟娉曠被浼硷紝浣嗘槸鐢变簬鍚嶅瓧涓嶅お涓€鏍凤紝鎵€浠ヨ繖閲岃繕鏄啓鍑烘潵锛?/p>

extend(<Point> point) //寤朵几璇ounds鍒板彲浠ュ寘鍚粰瀹氱偣
getCenter(<Boolean> round?)//鍙栦腑蹇冪偣锛宺ound琛ㄧず鏄惁鍥涜垗浜斿叆
getBottomLeft() //杩斿洖宸︿笅瑙掔殑Point
getTopRight()
getTopLeft()
getBottomRight()
getSize()  //杩斿洖涓€涓狿oint锛岃〃绀鸿Bounds鐨勯暱鍜屽
contains(<Bounds>otherBounds) //濡傛灉鍖呭惈缁欏畾Bounds灏辫繑鍥瀟rue
contains(<Point> point) //濡傛灉鍖呭惈缁欏畾point灏辫繑鍥瀟rue
intersects(<Bounds>otherBounds) //濡傛灉涓や釜Bounds鐩镐氦锛屽氨杩斿洖true
overlaps(<Bounds>otherBounds) //濡傛灉涓や釜Bounds鏈夐噸鍙犲尯鍩燂紝灏辫繑鍥瀟rue

4銆佸睘鎬э紝Properties

min //绫诲瀷Point锛屽乏涓婅鐨勭偣
max //鍙充笅瑙掔殑鐐?/span>

 

Icon

Icon灏辨槸Marker鐨勫浘鏍?/p>

1銆佺敤渚?/p>

var myIcon=L.icon({
    iconUrl:鈥榤y-icon.png鈥?span style="color: rgba(0, 0, 0, 1)">,
    iconSize:[38,95],
    iconAnchor:[22,94],
    popupAnchor:[-3,-76],
    shadowUrl:鈥榤y-icon-shadow.png鈥?span style="color: rgba(0, 0, 0, 1)">,
    shadowSize:[68,95],
    shadowAnchor:[22,94]
});

L.marker( [50.505 , 30.57],{icon: myIcon}).addTo(map);

榛樿鐨処con鏄竴涓摑鑹茬殑Icon锛堝氨鏄垜浠粯璁よ缃甅arker鐨勬牱寮忥級銆?/p>

2銆佸垵濮嬪寲

L.icon(<Icon options>options)

3銆佸弬鏁?/p>

iconUrl //Icon鍥剧殑URL锛岀粷瀵瑰湴鍧€鎴栬€呯浉瀵逛簬鏍圭洰褰曠殑鍦板潃
iconRetinaUrl //鎵嬫満灞忎腑鐨刬con鐨刄RL
iconSize //绫诲瀷Point锛岃〃绀篿con鐨勫昂瀵革紙鍗曚綅Pixel锛?/span>
iconAnchor //绫诲瀷Point锛孖con鍥炬爣宸︿笂瑙掔殑鍧愭爣锛堜互瀹為檯鐐圭殑鍧愭爣涓?0,0)锛岀浉瀵逛簬瀹為檯鐐圭殑pixel鍧愭爣锛?/span>
popupAnchor //Popup鐨勫潗鏍?/span>
shadowUrl //Icon 闃村奖鐨刄RL
shadowSize
shadowAnchor
className //缁橧con鍜宻hadow鍥剧殑绫诲懡鍚?/span>

5銆両con.Default

濡傛灉鎯宠嚜鍒堕粯璁con锛屽氨淇敼L.Marker.prototype.options