Leaflet.js：修訂版本之間的差異

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

2023年2月22日 (三) 05:19的修訂版本

示範程式( http://jendo.org/~游士賢/使用說明/jupyter/index.html )： 

<!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.00620324010834,121.468425037375],
			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 \u0026copy; \u003ca target='_blank' href='http://openstreetmap.org'\u003eOpenStreetMap\u003c/a\u003e,under \u003ca target='_blank' href='http://www.openstreetmap.org/copyright'\u003eODbL\u003c/a\u003e.',
			detectRetina:false,
			maxNativeZoom:18,
			maxZoom:18,
			minZoom:0,
			noWrap:false,
			opacity:1,
			subdomains:'abc',
			tms:false,
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個圓形標記，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
	var circle_marker_030d721730ec5759fa41649b896ce3b8 = L.circleMarker(
		[24.99819526441787,121.47305833965504],
		{
			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>
取自「http://well-being-ng.net/wellBeingNg/index.php?title=Leaflet.js&oldid=13145」