leaflet antvPath示例

時間 2019-12-08

標籤 leaflet antvpath 示例简体版

原文原文鏈接

參考：http://www.javashuo.com/article/p-unezgzab-dv.htmljavascript

leaflet-antvPath官網：https://github.com/rubenspgcavalcante/leaflet-ant-pathcss

leaflet-antvPath官網2：https://rubenspgcavalcante.github.io/leaflet-ant-path/html

示例：java

<html>

<head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link rel="stylesheet" href="./dist/leaflet.css">
    <script src="./dist/leaflet.js"></script>
    <script src="./dist/leaflet-ant-path.js"></script>
    <!-- <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> -->
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=781070f0aec19a13b3e2615a0c131d4a"></script>
    <style>
        body {
            margin: 0px;
        }

        #heading {
            text-align: center;
            padding: 20px;
            background: #333;
            color: #CCC;
        }

        a {
            color: #3388ff;
        }

        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #333;
        }

        .leaflet-canvas-layer {
            opacity: 0.55;
        }
    </style>
</head>

<body>
    <div id="map"></div>
</body>
<script>
    //------------------------------------------------------------------------

    var map = L.map('map', {
        center: [31.95789128, 120.64626101],
        zoom: 11,
        maxzoom: 18,
        minzoom: 1,
        zoomControl: false,  // 是否默認縮放控件添加到地圖
        editable: true,  // 用於測繪
    });
    L.tileLayer('http://mt3.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&s=Galile&x={x}&y={y}&z={z}', {
        attribution: '<a href="#">google leaflet</a>',
        maxZoom: 18,
    }).addTo(map);

    // ----------------地圖標記點位---------------------
    // L.marker([31.95789128, 120.64626101]).addTo(map)
    //     .bindPopup('info')
    //     .openPopup();
   // -----------------地圖標記點位-------------------------- 
　　//---------------------------------------------------------------------------------------------

    let arrs = [
        [31.30, 120.58],  // 蘇州市
        [31.32, 120.63],   // 平江區
        [31.30, 120.63],   // 滄浪區
        [31.95789128, 120.64626101],
        [31.30, 120.75],  // 虎丘區
    ];

//---------------------高德地圖--------------------------

// var polygon = L.polygon(arrs, { // color: 'green', // fillColor: '#f03', // fillOpacity: 0.5 // }).addTo(map); 
    // var map = new AMap.Map('map', {
    //     zoom: 11,//級別
    //     center: [120.64626101, 31.95789128],//中心點座標
    //     viewMode: '3D'//使用3D視圖
    // });//---------------------高德地圖--------------------------

//---------------------leaflet-antvPath--------------------------
    var antPath = L.polyline.antPath;
    var path = antPath(arrs, {
        "paused": false,   　　//暫停  初始化狀態
        "reverse": false,　　//方向反轉
        "delay": 3000,　　　　//延遲，數值越大效果越緩慢
        "dashArray": [10, 20],　//間隔樣式
        "weight": 5,　　　　//線寬
        "opacity": 0.5,　　//透明度
        "color": "#0000FF",　//顏色
        "pulseColor": "#FFFFFF"　　//塊顏色
    });
    path.addTo(map);
//---------------------leaflet-antvPath--------------------------


</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。