[Leaflet] 前端地圖套件 Leaflet 介紹

Leaflet Intro

Leaflet 官網是這麼說的：

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

Leaflet 是目前 GitHub 上最熱門星星最多的 Mapping library，另外也有一個相當好用的叫做 Mapbox，它自己是這麼說：

Mapbox.js is a Leaflet plugin. It extends Leaflet functionality with additional code to integrate with Mapbox services and your data on Mapbox.

Mapbox 算是個商業的公司，本身 Mapbox.js 開源免費的，但他額外有自製的圖資，使用的話必須取得 api 及付費。

Leaflet Example

一個簡單的地圖範例如下：

要先插入所需的 js 和 css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.js"></script>

在要插入地圖的地方插入一個 <div> 並設定 ID：

(上面的範例有額外設定 style="height: 250px;")

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

接下來在網頁結尾執行以下 JS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.js"></script>
<script>
  function main() {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
        .openPopup();
  }
  window.onload = main;
</script>

Leaflet 原理

其實透過觀察 Nekwork 可以發現傳統的地圖只是根據 zoom 和 location 抓了一堆圖在把它們拼起來了而已：

當然套件本身會 cache 圖檔而降低抓圖的數量，還有重新 render 的效果會讓使用感覺還不差。

不過現在更快的則是使用 WebGL 來搭配 vector tiles，整體 render 的速度跟體驗就更往上提升了。有興趣可以稍微參考mapbox/mapbox-gl-js(之後有機會再寫一篇筆記)