簡單介紹口罩查詢地圖製作
因為看到網路上有相關網站製作的教學，就試著做了一個簡易的查詢網站。
建立
模板是使用教學提供的，沒有做什麼變動。
使用 vue create 來建立專案
Vue CLI 4.2
使用 vue create 來建立專案
套件
leafletjs
用來建立免費地圖 OSM 的地標資訊
npm install --save leaflet
記得載入 css 樣式
1
2
3
4
5
6
7
| <link rel='stylesheet' href='https://unpkg.com/leaflet@1.5.1/dist/leaflet.css'>
or
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
|
載入套件
在要使用的檔案 <script></script> 標籤內
import L from 'leaflet'
bootstrap
處理 css 樣式
npm install --save bootstrap@4.0.0-beta.3
安裝完後檔案路徑
node_modules/bootstrap/scss/bootstrap
載入套件
在要使用的檔案 <style lang="scss"></style> 標籤內
@import 'bootstrap/scss/bootstrap';
axios vue-axios
處理 ajax 及 API 資料部分
npm install --save axios vue-axios
載入
在 main.js 加入
1
2
3
4
| import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
|
jQuery
npm install — save jquery popper.js
載入
在要使用的檔案 <script></script> 標籤內
import $ from "jquery";
webpack 中設定
必須要在 webpack 執行時就去載入 jQuery ，修改
./build/webpack.base.conf.js，加入以下程式碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
| var webpack = require('webpack')
接著在同一份檔案當中加入plugin設定
module.exports = {
entry: {},
output: {},
resolve: {},
module: {},
plugins: [new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})]
}
|
台灣縣市鄉鎮 JSON
以下網址可下載台灣縣市鄉鎮資訊
https://github.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON
載入
在檔案的 <style lang="scss"></style> 標籤內，加上
import cityName from './assets/CityCountyData.json'
藥局資訊 API
https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json
leafletjs 基本操作
建立地圖、圖標、訊息…等等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <div class="col-sm-9">
<div id="map"></div>
</div>
<script>
// 載入 leaflet 套件
import L from 'leaflet'
export default {
name: 'home',
data: () => ({
osmMap: {},
}
}),
mounted () {
// 新增並顯示地圖
this.osmMap = L.map('map', {
center: [25.03, 121.55],
zoom: 15
})
// 載入圖層到地圖(不然地圖會是空白)
L.tileLayer(urlTemplate, options).addTo(map)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {
foo: 'bar',
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(this.osmMap)
// 加上圖標
// L.marker([25.0085455, 121.4594333]).addTo(this.osmMap)
// 加上圖標與訊息
// L.marker([
// geometry.coordinates[1],
// geometry.coordinates[0]
// ]).addTo(this.osmMap).bindPopup(
// `<strong>${properties.name}</strong> <br>
// 口罩剩餘：<strong>成人 - ${properties.mask_adult ? `${properties.mask_adult} 個` : '未取得資料'}/ 兒童 - ${properties.mask_child ? `${properties.mask_child} 個` : '未取得資料'}</strong><br>
// 地址: <a href="https://www.google.com.tw/maps/place/${properties.address}" target="_blank">${properties.address}</a><br>
// 電話: ${properties.phone}<br>
// <small>最後更新時間: ${properties.updated}</small>`, { closeOnClick: false }).openPopup()
// 多邊形
// L.polygon([
// [22.992, 120.289],
// [22.982, 120.299],
// [22.970, 120.267],
// [22.990, 120.267]
// ]).addTo(this.osmMap)
// 圓形
// L.circle(
// [22.988, 120.220], // 圓心座標
// 1000, // 半徑（公尺）
// {
// color: 'red', // 線條顏色
// fillColor: '#f03', // 填充顏色
// fillOpacity: 0.5 // 透明度
// }
// ).addTo(this.osmMap)
// 獨立訊息
// L.popup()
// .setLatLng([23.010, 120.289])
// .setContent('獨立的訊息方塊。')
// .openOn(this.osmMap)
// 連接到指定點
//this.osmMap.panTo([geometry.coordinates[1], geometry.coordinates[0]]);
}
</script>
|
刪除地標
OSM 是以圖層的概念來組成，地標會以圖層類型累加，因此地標數量過多會影響效能。所以在切換查詢地點時，最好要清除其他不需要顯示的地標。
1
2
3
4
5
6
7
| removeMarker () {
this.osmMap.eachLayer((layer) => {
if (layer instanceof L.Marker) {
this.osmMap.removeLayer(layer)
}
})
},
|
改變地標樣式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const greenIcon = L.icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [12, 41]
})
const { properties, geometry } = item
L.marker([
geometry.coordinates[1],
geometry.coordinates[0]
], { icon: greenIcon }).addTo(this.osmMap)
|
其他程式
載入藥局資訊
1
2
3
4
5
| const api = 'https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json'
this.$http.get(api).then((Response) => {
// console.log(Response)
this.data = Response.data.features
})
|
其他程式碼部分可參考
https://github.com/Wcc723/wheremask
個人實作網站(有做小地方調整)
https://jw310.github.io/maskmap/#/
參考：
https://www.openstreetmap.org/
https://leafletjs.com/
https://leafletjs.com/examples/quick-start/
https://blog.gtwang.org/web-development/leaflet-open-source-javascript-library-for-mobile-friendly-interactive-maps/
https://www.youtube.com/watch?v=pUizu62dlnY
https://www.youtube.com/watch?v=7CXnNMVMXeo&t=2s
六角學院
