Leaflet.js - 修訂歷史

丁志仁於 2023年2月23日 (四) 01:19

2023-02-23T01:19:10Z

丁志仁於 2023年2月23日 (四) 01:00

2023-02-23T01:00:55Z

丁志仁於 2023年2月23日 (四) 00:55

2023-02-23T00:55:13Z

丁志仁於 2023年2月23日 (四) 00:48

2023-02-23T00:48:43Z

丁志仁於 2023年2月23日 (四) 00:43

2023-02-23T00:43:53Z

丁志仁於 2023年2月23日 (四) 00:41

2023-02-23T00:41:18Z

丁志仁於 2023年2月23日 (四) 00:38

2023-02-23T00:38:51Z

丁志仁於 2023年2月23日 (四) 00:24

2023-02-23T00:24:39Z

丁志仁於 2023年2月22日 (三) 01:24

2023-02-22T01:24:58Z

丁志仁於 2023年2月22日 (三) 01:18

2023-02-22T01:18:10Z

@@ 第42行： / 第42行： @@
 `</pre>
-示範程式一：一個地點：
+示範程式一：一個地點
 <pre><!DOCTYPE html>
 <html>

@@ 第20行： / 第20行： @@
 	attribution: '&amp;copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors',
 }).addTo(map);</pre>
 #urlTemplate：圖資請求設定 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
 #*{s}: 圖磚請求的 subDomain 預設為 a、b、c
@@ 第27行： / 第26行： @@
 #*{y}: 圖磚的 y 座標
 #attribution：圖資版權設定
-在 javascript 中'''一組反引號「`」可以把多行的 HTML 包起來，並且使用${ } 輕易的插入變數：'''
+在以下範例中， HTML 段落常用「反引號」包裹，裡面可以再包單引號或雙引號。在 javascript 中'''一組反引號「`」可以把多行的 HTML 包起來，並且使用${ } 輕易的插入變數：'''
 <pre>let price = 50;
 let name = '珍珠奶茶';

@@ 第3行： / 第3行： @@
 #[https://dowyuu.github.io/program/2021/03/22/Leaflet-note/ Leaflet––輕量且易懂易用的互動地圖](值得整理)
 #[https://w3c.hexschool.com/openstreetmap/e8ac08ac OpenStreetMap & Leaflet 打造地圖視覺化](有範例程式與 API 大綱簡介)
+#[https://www.youtube.com/watch?v=pUizu62dlnY Leaflet + OpenStreetMap 兩小時應用開發教學影片]
 Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。
@@ 第42行： / 第42行： @@
 `</pre>
+示範程式一：一個地點：
 <pre><!DOCTYPE html>
 <html>

@@ 第1行： / 第1行： @@
 [[分類:OpenStreetMap]]
 '''參考連結：'''
-#[https://dowyuu.github.io/program/2021/03/22/Leaflet-note/ Leaflet––輕量且易懂易用的互動地圖]
+#[https://dowyuu.github.io/program/2021/03/22/Leaflet-note/ Leaflet––輕量且易懂易用的互動地圖](值得整理)
 Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。

←上個修訂		於 2023年2月23日 (四) 00:43 的修訂
第1行：		第1行：
	[[分類:OpenStreetMap]]		[[分類:OpenStreetMap]]
		+	'''參考連結：'''
		+	#[https://dowyuu.github.io/program/2021/03/22/Leaflet-note/ Leaflet––輕量且易懂易用的互動地圖]
	Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。		Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。

@@ 第78行： / 第78行： @@
 			zoom:15,
 			zoomControl:true,
-			preferCanvas:false,
+			preferCanvas:false
+		}
 	);
@@ 第94行： / 第94行： @@
 			opacity:1,
 			subdomains:'abc',
-			tms:false,
+			tms:false
+		}
 	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
@@ 第114行： / 第114行： @@
 			radius:8,
 			stroke:true,
-			weight:3,
+			weight:3
+		}
 	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
@@ 第133行： / 第133行： @@
 </html></pre>
 示範程式二：兩個地點
-<pre></pre>
+<pre><!DOCTYPE html>

@@ 第42行： / 第42行： @@
-示範程式( http://jendo.org/~游士賢/使用說明/jupyter/index.html )：
+示範程式一：一個地點( http://jendo.org/~游士賢/使用說明/jupyter/index.html )：
 <pre><!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
 	<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>
+	<!--可省略<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>
 	<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'/>
+	<!--可省略<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />-->
 	<style>
 		/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
@@ 第97行： / 第86行： @@
+		{
 			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>.',
+				'Data by © <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,
@@ 第143行： / 第132行： @@
 </script>
 </html></pre>

@@ 第10行： / 第10行： @@
 L.map 第1個參數能接收 ID 選取器或 DOM ， 第2個參數 options 用物件設定需要的屬性
-'''用 L.tileLayer 建立圖層：'''
+'''用 L.tileLayer 建立圖磚：'''
 <pre>L.tilelayer(<String> urlTemplate, <TileLayer options> options?)</pre>
@@ 第16行： / 第16行： @@
 	attribution: '&amp;copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors',
 }).addTo(map);</pre>
-設定圖資後使用 addTo() 送入map 物件。 attribution 的值是用「反引號」包裹，裡面可以再包單引號或雙引號。
+#設定圖資後使用 addTo() 送入map 物件。本例中 attribution 的值是用「反引號」包裹，裡面可以再包單引號或雙引號。
+#urlTemplate：圖資請求設定 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Leaflet.js - 修訂歷史

丁志仁 於 2023年2月23日 (四) 01:19

丁志仁 於 2023年2月23日 (四) 01:00

丁志仁 於 2023年2月23日 (四) 00:55

丁志仁 於 2023年2月23日 (四) 00:48

丁志仁 於 2023年2月23日 (四) 00:43

丁志仁 於 2023年2月23日 (四) 00:41

丁志仁 於 2023年2月23日 (四) 00:38

丁志仁 於 2023年2月23日 (四) 00:24

丁志仁 於 2023年2月22日 (三) 01:24

丁志仁 於 2023年2月22日 (三) 01:18