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>