Leaflet
: an open-source Javascript library
說明 : 拉圖層
放進 Map 裡頭呈現,會牽扯到 Data Source
、 Tile Provider
,而就整合性(支援性),我想 leaflet 做的很好。
Data Source : OpenStreetMap
Tile Provider :
在 mapbox、stamen、thunderforest 當中我最喜歡 stamen ,我覺得很酷炫。
所以決定以 stamen
做為我的例子。
在開始解釋程式碼之前,先來談談為什要切換圖層吧! 除了很Cool之外,還有什麼適用場景呢?
Ans : 早上可能需要比較亮的地圖,而夜間就需要比較深色的地圖,不僅對眼睛比較好,整體視覺體驗也Up Up。
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script>
var cities = L.layerGroup(); // citis 可以裝 Markers
L.marker([22.627560 , 120.267411]).bindPopup('中山電資大樓').addTo(cities), // 加入第一個
L.marker([22.689343 ,120.309121]).bindPopup('左營').addTo(cities), // 加入第二個
L.marker([24.112074,120.615684]).bindPopup('新烏日').addTo(cities), // 加入第三個
L.marker([24.263936,120.569167]).bindPopup(' 清水火車站').addTo(cities); // 加入第四個
// 想加幾個 就有幾個 ↑ //
var toner = new L.StamenTileLayer("toner", { detectRetina: true }) // 建立第一種圖層
var terrain = new L.StamenTileLayer("terrain", { detectRetina: true }) // 建立第二種圖層
var watercolor = new L.StamenTileLayer("watercolor", { detectRetina: true }) // 建立第三種圖層
var map = L.map('map', {
center: [22.627560 , 120.267411], // 設定中心點
zoom: 10, // 設定放大倍率
layers: [toner, cities] // 預設圖層為 toner,網頁載入後 可看到 toner 圖層和前面加的4個地點
});
var baseLayers = { // "名稱": 先前建立好的圖層(值)
"toner": toner,
"terrain": terrain,
"watercolor":watercolor
};
var overlays = { // "名稱" : 先前建立好的marker(值)
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map); // 放入右上控制項裡
</script>
啊啊啊我記得!!!最後一個是手繪的那個~
其實你當時跟我講Leaflet
我到現在還沒去看哈哈哈哈
畢竟有太多想學的東西了QQ
Leaflet 我覺得是既強大 又容易上手。
如果基本的能做的 還不能滿足,其實還有GitHub ,神人大大們的 plugins ,可以做參考 。
嗯嗯~我覺得我最大的缺點是我常常會直接開始自己寫哈哈哈
我覺得我以後要學會找資料 QwQ也不算是不會找((就是有時候不耐煩看別人寫的程式碼
但有時候 看到快抓狂,因為太多可能不是自己需要的,就會自己動工。
但其實一開始 先看 plugin的 readme.md 其實就寫得相當清楚啦 ,
再配合sample程式看要怎麼放。