Leaflet是一個插件可以引入地圖資源，提供方法插件等可以對地圖進行互動，
- 準備：
就像jQuery一樣使用一個插件需要引入這個插件的檔案，首先在<head>標簽中添加Css樣式,然后引入Leaflet的js檔案.這里具體看官方檔案
創建一個顯示地圖的容器，并設定高度
- 地圖初始化：
設定打開地圖的地理位置，顯示級別，坐標系等，
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
在Leaflet的 L 物件就像jQuery的 $ 一樣暴露給window供我們呼叫里面的方法，
使用L.map() 函式構造器實體化一個地圖物件，
用法：
L.map(id,{
//可選引數設定，常用的引數有
center：[ ] / /初始化地圖的地理中心
zoom：number / /初始化地圖的縮放
})
setView方法：設定地圖心事的地理中心和縮放級別，上面的代碼也可以寫成
var mymap = L.map('mapid',{ center:[51.505,-0.09], zoom:13 })
- 加載地圖源
Leaflet官方推薦使用MapBox地圖，Mapbox的矢量地圖是瓦片地圖，需要呼叫打開瓦片圖層的介面 L.TileLayer
上面說到瓦片地圖，什么是瓦片地圖？
一幅精確到街道級別的世界地圖圖片寬度為數以百萬計的像素，由于這些資料太大了，從而導致無法一次下載并且在記憶體里也無法一次都hold住，而瀏覽器并行獲取和顯示多張小圖片，比獲取和顯示一張大圖片要高效的多，就有了地圖瓦片來提高效率，由許多小的正方形的圖片組成，這些小圖片稱作瓦片，瓦片的大小一般為256*256像素，這些瓦片一個挨一個并列放置以組成一張很大的看似無縫的地圖，
例如百度地圖，當放大時就可以看到還沒加載到的方塊空缺，下圖是百度地圖加載的圖片請求，
呼叫L.tileLayer(utl,{
//添加可選引數
例如：
attribution:'hahaha'
}).addTo(mymap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
上面代碼關鍵在于請求地圖url.上面加載的應該是OpenStreetMap，還可以加載Mapbox地圖(需要去官網注冊賬戶然后申請)，高德地圖，谷歌地圖，也可以使用在線地圖（ARCGis online），具體URL怎么回事，去哪里得到URL我也是搞不懂是怎么回事，如果有知道的告訴告訴弟弟，
除了以上常見的地圖提供商的地圖，也可以使用自己的地圖，例如圖片，
L.imageOverlay(imageUrl,imageBounds).addTo(mymap)
視頻格式也可以最為地圖，使用
L.iamgeOverlay(videoUrl,videoBounds).addTo(mymap)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95346.html
標籤：JavaScript