Leaflet 開源地圖

開源地圖(open street map)的原理

地圖本身：圖磚

不管是 Google Map 還是其他的開源地圖，都是由「圖磚」所組成。雖然我們在手機或網頁上，看見的是一大片的地圖，而且似乎可以無限延伸，但是其實只是一塊一塊的局部地圖（檔案為圖片檔，png/jpg）組裝起來的。所以，當我們像開源地圖的來源申請地圖時，他其實只是即時地把某個範圍的地圖圖片傳輸給我們而已。

定位

定位的技術，則是透過經緯度把某個位置標記在地圖上。

LeafLet 和 OpenStreetMap 的差異

LeafLet 是 JS 框架

就像 jquery 一樣，提供了常見的 JS 功能，包括載入地圖資料（圖資），在地圖上標記標示點等等。

OpenStreetMap 則是圖資本身

圖資指的是地圖的資料庫，包括地圖、重要標記點（餐廳、旅館、商家、各種地標等等）。例如，Google Map 就是一種圖資，其他包括 Safari Map、OpenStreetMap。Google Map 最大的特色在於這個地圖系統更新頻率高、而且有大量的評價。不過，Google Map並不是免費的，而是依據流量收費（重新整理一次即收一次費用）。若是商用的話，或是會有大量瀏覽流量，不可不慎。

臺灣也有公司提供臺灣的地圖資料庫。

＊因此，在尋找適用的圖資時，地圖的範圍就是非常值得注意的地方。例如，今天的客戶都是臺灣人，那麼取得世界地圖就會有點浪費空間了。反之亦然。

開始Leaflet囉

記得先把 Leaflet 這個資料庫載進網頁

方法和 jQuery 一樣。

在網頁上畫個框框放地圖進來

就像 Google Map 一樣，在載入地圖之前，我們需要先在網頁上給這個地圖規劃出顯示的範圍，而這個範圍必須是區塊元素。Leaflet 是以 map 這個 id 名稱辨識出這個網頁是哪一個地方要放地圖的。

    <div id="map"></div>

JS:

var map = L.map('map',{
    center: []//經緯度
    zoom: 16 //數值越大，顯示的範圍越精細，eg 3 顯示世界地圖
})

跟 JS 說我要建立一個變數，這個變數是透過 Leaflet(L)使用它提供的 map() 這個方法，建立起來的地圖。

這時候地圖的骨架就建立好了。可是，當你檢視網頁時，你會發現z頁上一片空白。這是因為 Leaflet 只建立了方法，它已經幫你幫經緯度畫好了(可是我們看不到)，也透過這個經緯度的系統把標記點
標上了，但地圖本身還沒有載入。

所以，我們還要透過以下的程式碼，告訴 Leaflet 我們要用哪個圖資（圖床）：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'...'}).addTo(map)

上述地圖的 z, x, y 是什麼呢？那就是圖資提供我們的每個地圖圖磚的數值。雖然這串程式碼看似只有一張圖片，但是實際上卻是一連串的地圖圖磚，待輸出到網頁時組裝起來。

在地圖上加上標記：

L.marker([/* 經緯度 */]).addTo(map)
    .bindPopup('<h1>高雄軟體園區</h1>') //標記上增加文字
    .openPopup(); //marker

總結

  1. 宣告地圖: L.map()
  2. 置入地圖圖層：L.tileLayer()
  3. 地圖 marker: L.marker()
  4. 任何東西加到地圖上：addTo()
Select a repo