leaflet antvPath示例

参考：https://www.cnblogs.com/vichang/p/9438870.html

leaflet-antvPath官网：https://github.com/rubenspgcavalcante/leaflet-ant-path

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

示例：

<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>

 

posted @ 2019-06-10 15:35  阴翳公子  阅读(1912)  评论(1)    收藏  举报