参考：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>

leaflet antvPath示例的更多相关文章

  1. leaflet入门（一）示例

    代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  2. Leaflet学习笔记-基础内容

    为什么选择Leaflet 开源,且代码仅有 31 KB,但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢 官网:http://leafletjs.com/ 劣势 ...

  3. Leaflet API翻译

    转自: http://jsrookie.iteye.com/blog/2318972(上) http://jsrookie.iteye.com/blog/2318973(下) L.Map API各种类 ...

  4. leaflet入门（五）API翻译（下）

    L.PointConstructor(函数构造器)Properties(属性)Methods(方法) L.BoundsConstructor(函数构造器)Properties(属性)Methods(方 ...

  5. leaflet入门（四）API翻译（上）

    L.Map L.Marker L.Popup L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div元素和带有地图选项的描述的文字对象来实 ...

  6. Leaflet API 翻译（二）

    摘自:http://www.ithao123.cn/content-824673.html L.Point 显示以像素为单位的点的x,y坐标. 所以接受点对象的leaflet方法和选项都也接受他们简单 ...

  7. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. leaflet的入门开发（一）

    2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...

  9. leaflet的入门开发

    2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...

随机推荐

  1. [网络流24题]最长k可重区间集[题解]

    最长 \(k\) 可重区间集 题目大意 给定实心直线 \(L\) 上 \(n\) 个开区间组成的集合 \(I\) ,和一个正整数 \(k\) ,试设计一个算法,从开区间集合 \(I\) 中选取开区间集 ...

  2. CTF-Streamgame1-writeup

    Streamgame1 题目信息: 附件: streamgame1.py from flag import flag assert flag.startswith("flag{") ...

  3. uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

    通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...

  4. 【翻译】拟合与高斯分布 [Curve fitting and the Gaussian distribution]

    参考与前言 英文原版 Original English Version:https://fabiandablander.com/r/Curve-Fitting-Gaussian.html 如何通俗易懂 ...

  5. vue（21）初识Vuex

    Vuex是做什么的? 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex ...

  6. Ubuntu 19.10安装Wine软件

    ======================================== 我使用的操作系统版本为Ubuntu 19.10 64位,如果是32位Ubuntu19.10则可以跳过步骤一 1.添加 ...

  7. GE ifix 5.5中关于历史报警表的制作

    在关于污水处理厂项目实施过程中,按照业主要求,需要用到报警历史的查询功能,遂搜资料,整理在ifix5.5下如何实现报警历史的查询,经过一天的研究,以及多天的入坑,出坑,总算完成.现整理如下,供后来人参 ...

  8. jquey 定位到有某个类

    $active = $('.g-pop-box .box-option a[class="on"]')

  9. 原来select语句在MySQL中是这样执行的！看完又涨见识了！这回我要碾压面试官！

    大家好,我是冰河~~ MySQL作为互联网行业使用最多的关系型数据库之一,与其免费.开源的特性是密不可分的.然而,很多小伙伴工作了很多年,只知道使用MySQL进行CRUD操作,这也导致很多小伙伴工作多 ...

  10. k8s强制删除资源

    一般强制删除 kubernetes 的资源: kubectl delete <resource> <resourename> --grace-period=0 --force ...