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' /> | |
| − | + | <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> | </head> | ||
| − | |||
<body> | <body> | ||
| − | + | <div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div> | |
</body> | </body> | ||
<script> | <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> | </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>
