鐵人賽Day 16- Leaflet.js：設置基本地圖元件

前言

今天開始要逐步建立一個webGIS，練習一下使用Leaflet等API的實戰能力，在開始之前，先設定這個系統的基本功能：

• 切換底圖
• 定位
• 量測
• 資料查詢
• 街景
• 空間查詢
• 結合統計圖表
• 路徑規劃
• 資料視覺化

  本文是參加鐵人賽的文章，同步發表於 “2018鐵人賽-30天打造我的WebGIS系列”

今日工作

我們把工作分成幾天說明，今天預計會完成的部分屬於地圖基本款的設置，
包含了：

• 版型及基本設置
• 切換底圖
• 定位
• 量測

相關的程式碼都放在github，commit原則上會依照文章標示。

版型及基本設置

首先，版型很重要，為了方便起見，我們直接套用boostrap template，並模仿bootleaf這個專案設計了一套版型。

大概會是長這樣：

上方留一個Navigation Bar做為選單空間，此外，最重要的區塊，就是要有一個map的 div

<div id="container">
  <div id="map"></div>
  //預留其他上下左右panel,寬度及高度建議滿版
</div>

ps.關於排版詳情請參考原始碼..

接下來，我們在app.js加入：
map = L.map('map').setView([25.0375928, 121.5529563], 10);
在這邊提醒一下，leaflet預設使用的坐標系統是EPSG:4326，但tileLayers的WMTS標準大多是EPSG:3857，忘記或搞混的可以參考這一篇，另外，第二個值是指zoom layer。

底圖切換功能

加入底圖部分，在過去幾天我們也有使用了幾次，基本上是使用tileLayer這個類別，然而，webGIS通常會加入多種底圖，並且要有切換的功能。

因此，在此我們使用Leaflet.Basemaps套件：

ps.類似的功能也可以自行實作看看，使用layerGroup

Include the CSS:
<link rel="stylesheet" href="L.Control.Basemaps.css" />
Include the JavaScript:
<script src="L.Control.Basemaps-min.js"></script>

app.js：這邊用了兩個我覺得滿好看的底圖

var basemaps = [
  L.tileLayer('//{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    maxZoom: 20,
    minZoom: 0,
    label: 'Toner Lite'  // optional label used for tooltip
  }),

  L.tileLayer('//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    subdomains: 'abcd',
    maxZoom: 16,
    minZoom: 1,
    label: 'Watercolor'
  })
];

map.addControl(L.control.basemaps({
  basemaps: basemaps,
  tileX: 0,  // tile X coordinate
  tileY: 0,  // tile Y coordinate
  tileZ: 1   // tile zoom level
}));

定位功能

定位功能是webgis基本款，因為光有地圖，很多使用者會不知道自己在哪裡而迷了路，因此類似Google關鍵字地標搜尋，可以輸入關鍵字定位的功能，會是webGIS會出現的東西。

這類地標搜尋可以使用Google、Here、Mapbox，有些是免費(有request限制)以些是付費的，像這些POI供應平台申請access token後即可使用他們的API，在這邊我們使用的也是套件:Leaflet.geocoder。

Include the CSS:
<link rel="stylesheet" href="~/dist/assets/css/Control.Geocoder.css" />

Include the JavaScript:
<script src="~/dist/assets/js/Control.Geocoder.js"></script>

app.js

var geocoder = L.Control.geocoder({
  defaultMarkGeocode: true
}).addTo(map);

量測功能

在圖上量測距離及面積，我們一樣直接使用模組，並把套件的文字稍微中文化。
Include the CSS:
<link rel="stylesheet" href="~/dist/assets/css/leaflet-measure.css" />

Include the JavaScript:
<script src="~/dist/assets/js/leaflet-measure.js"></script>

app.js

var measureControl = new L.Control.Measure({ measureControl: true, primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers' });
measureControl.addTo(map);

後記

今天先將版型設置好及將地圖基本款功能放在地圖上，後續我們還有很多部分要實作，明天繼續加油！