前言
今天開始要逐步建立一個webGIS,練習一下使用Leaflet等API的實戰能力,在開始之前,先設定這個系統的基本功能:
- 切換底圖
- 定位
- 量測
- 資料查詢
- 街景
- 空間查詢
- 結合統計圖表
- 路徑規劃
- 資料視覺化
本文是參加鐵人賽的文章,同步發表於 “2018鐵人賽-30天打造我的WebGIS系列”
今日工作
我們把工作分成幾天說明,今天預計會完成的部分屬於地圖基本款的設置,
包含了:
- 版型及基本設置
- 切換底圖
- 定位
- 量測
相關的程式碼都放在github,commit原則上會依照文章標示。
版型及基本設置
首先,版型很重要,為了方便起見,我們直接套用boostrap template,並模仿bootleaf這個專案設計了一套版型。
大概會是長這樣:
上方留一個Navigation Bar做為選單空間,此外,最重要的區塊,就是要有一個map的 div
1 | <div id="container"> |
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:這邊用了兩個我覺得滿好看的底圖1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24var 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.js1
2
3var 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.js1
2var measureControl = new L.Control.Measure({ measureControl: true, primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers' });
measureControl.addTo(map);
後記
今天先將版型設置好及將地圖基本款功能放在地圖上,後續我們還有很多部分要實作,明天繼續加油!