檢視 Leaflet.js 的原始碼

[[分類:OpenStreetMap]]
Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。

通常以CDN(內容傳遞網路)引入建立地圖前需要的 CSS 和 JS 資料，如：
<pre><script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/></pre>

用 L.map 初始化地圖設定
<pre>L.map(<String> id | <HTMLElement> el , options)</pre>
L.map 第1個參數能接收 ID 選取器或 DOM ， 第2個參數 options 用物件設定需要的屬性

用











示範程式( http://jendo.org/~游士賢/使用說明/jupyter/index.html )：
<pre><!DOCTYPE html>
<html>
<head>
	<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
	<script>
		L_NO_TOUCH = false;
		L_DISABLE_3D = false;
	</script>
	<style>html,body {width:100%;height:100%;margin:0;padding:0;}</style>
	<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
	<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
	<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
	<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js'></script>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css'/>
	<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'/>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css'/>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css'/>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css'/>
	<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />
	<style>
		/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
		#map_8d7547be8d8cb9285c28ef544dc96b9c {
			position:relative; /* 設定元素定位方式為相對定位 */
			width:100.0%;
			height:100.0%;
			left:0.0%;
			top:0.0%;
		}
		/*  設定 Leaflet 地圖的字型大小為 1rem，即子元素的字體大小為根元素字體大小的一倍 */
		.leaflet-container {font-size:1rem;}
	</style>
</head>
<body>
	<div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div>
</body>
<script>
	// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS(座標參考系) 等屬性
	var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
		'map_8d7547be8d8cb9285c28ef544dc96b9c',
		{
			center:[25.01421121579881,121.46379173509496],
			crs:L.CRS.EPSG3857,
			zoom:15,
			zoomControl:true,
			preferCanvas:false,
		}
	);
	// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
	var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{
			attribution:
				'Data by &copy; <a target=\'_blank\' href=\'http://openstreetmap.org\'>OpenStreetMap</a>,under <a target=\'_blank\' href=\'http://www.openstreetmap.org/copyright\'>ODbL</a>.',
			detectRetina:false,
			maxNativeZoom:18,
			maxZoom:18,
			minZoom:0,
			noWrap:false,
			opacity:1,
			subdomains:'abc',
			tms:false,
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個圓形標記(代表板橋車站)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
	var circle_marker_d7d6ba893e87bd16ad516ab23a265471 = L.circleMarker(
		[25.01421121579881,121.46379173509496],
		{
			bubblingMouseEvents:true,
			color:'blue',
			dashArray:null,
			dashOffset:null,
			fill:true,
			fillColor:'blue',
			fillOpacity:0.2,
			fillRule:'evenodd',
			lineCap:'round',
			lineJoin:'round',
			opacity:1.0,
			radius:8,
			stroke:true,
			weight:3,
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
	var popup_0c6f68e7affe1987d052919274941dcb = L.popup({maxWidth:'100%'});
	// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
	var html_5fa9a121de83f7c83e84d89cf3764f48 = $(
		`<div id='html_5fa9a121de83f7c83e84d89cf3764f48' style='width:100.0%; height:100.0%;'>板橋車站</div>`
	)[0];
	popup_0c6f68e7affe1987d052919274941dcb.setContent(
		html_5fa9a121de83f7c83e84d89cf3764f48
	);
	// 將圓形標記與彈出視窗做綁定，當使用者點擊圓形標記時，會彈出該彈出視窗
	circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(
		popup_0c6f68e7affe1987d052919274941dcb
	);
</script>
</html></pre>