iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Modern Web

ML X 友廷等公車系列 第 3

Day 3 : 圖層變變變

  • 分享至 

  • xImage
  •  

Powerful Library : Leaflet

Leaflet : an open-source Javascript library

說明 : 拉圖層 放進 Map 裡頭呈現,會牽扯到 Data SourceTile Provider,而就整合性(支援性),我想 leaflet 做的很好。

Data Source : OpenStreetMap
Tile Provider :

圖層切換

在 mapbox、stamen、thunderforest 當中我最喜歡 stamen ,我覺得很酷炫。
所以決定以 stamen 做為我的例子。

在開始解釋程式碼之前,先來談談為什要切換圖層吧! 除了很Cool之外,還有什麼適用場景呢?
Ans : 早上可能需要比較亮的地圖,而夜間就需要比較深色的地圖,不僅對眼睛比較好,整體視覺體驗也Up Up。

程式碼 : 可切換三種圖層,並選擇 加Marker or 不加 Marker

<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>

Demo (影片)

Yes

Follow me

More Information


上一篇
Day 2 : Bus API Intro.
下一篇
Day 4 : Marker 動起來
系列文
ML X 友廷等公車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
長風青雲
iT邦新手 4 級 ‧ 2019-09-04 22:37:41

啊啊啊我記得!!!最後一個是手繪的那個~
其實你當時跟我講Leaflet我到現在還沒去看哈哈哈哈
畢竟有太多想學的東西了QQ

阿瑜 iT邦研究生 3 級 ‧ 2019-09-04 22:40:51 檢舉

Leaflet 我覺得是既強大 又容易上手。
如果基本的能做的 還不能滿足,其實還有GitHub ,神人大大們的 plugins ,可以做參考 。

嗯嗯~我覺得我最大的缺點是我常常會直接開始自己寫哈哈哈
我覺得我以後要學會找資料 QwQ
也不算是不會找((就是有時候不耐煩看別人寫的程式碼

阿瑜 iT邦研究生 3 級 ‧ 2019-09-04 23:05:44 檢舉

但有時候 看到快抓狂,因為太多可能不是自己需要的,就會自己動工。
但其實一開始 先看 plugin的 readme.md 其實就寫得相當清楚啦 ,
再配合sample程式看要怎麼放。

我要留言

立即登入留言