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

出自福留子孫
跳轉到： 導覽、 搜尋
第 1 行： 第 1 行：
 
[[分類:OpenStreetMap]]
 
[[分類:OpenStreetMap]]
 
示範程式(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" />
 +
   
 +
        <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>
 +
</pre>

2023年2月21日 (二) 14:55的修訂版本

示範程式(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=13127」