参考：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. python 01篇

    一.Pycharm 使用小tips 1.1 pycharm创建项目时,选择Python环境,不使用默认的虚拟环境 1.2 如何在pycharm中查看python版本 路径:File-Settings- ...

  2. python使用笔记10--os，sy模块

    os操作文件,可以输入绝对路径,也可以输入相对路径 windows使用路径用\连接 Linux使用路径用/连接 但是我的电脑是windows 用/也没问题 1.os常用方法 1 import os 2 ...

  3. python 判断是否在指定时间段

    import datetime,time def jsyx(aa1,aa2): jssj=datetime.datetime.strptime(str(datetime.date.today()+da ...

  4. python pandas inplace参数

    '''pandas 中 inplace 参数在很多函数中都会有,它的作用是:是否在原对象基础上进行修改 ​ inplace = True:不创建新的对象,直接对原始对象进行修改: ​ inplace ...

  5. VScode中LeetCode插件无法登录的情况

    VScode中LeetCode插件无法登录的情况 一直提示账户和密码无效,不知道什么问题. 后来发现是设置问题 在插件中找到leetcode 右键,点击setting 在界面里找到这里,将leetco ...

  6. 【剑指offer】28. 对称的二叉树

    剑指 Offer 28. 对称的二叉树 知识点:二叉树:递归 题目描述 请实现一个函数,用来判断一棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的. 示例 输入:root = [1, ...

  7. C#.NET RSA 私钥签名 公钥验证签名

    C#.NET RSA 私钥签名 公钥验证签名 公钥验签 1.待签名字符串转为byte数组时,一般使用UTF8. 2.将私钥字符串(PKCS8或PKCS1格式)转为C#.NET的RSACryptoSer ...

  8. windows 查看端口号，关闭端口进程

    1.打开cmd,输入:netstat -ano | findstr 8080,根据端口号查找对应的PID.结果如下: 2.根据PID找进程名称,输入命令:tasklist | findstr 1789 ...

  9. [考试总结]noip模拟10

    不小心有咕掉了一段时间 这次考试咕掉的分数也是太多了 然后就是这次暴力完全没有打满 遗憾啊遗憾 T1 入阵曲 前面的题目背景故意引导我们去往矩阵快速幂的方向去想 然而半毛钱关系没有 其实就是维护前缀和 ...

  10. Intouch 关于报表数据的一种思路

    在熟悉Intouch项目有一段时间了,也做有相关的三个项目,关于Intouch的一些报表数据的采集,也有了自己一定的看法(主要还是因为自己是野路子)今天就把我常用的一种制作思路,提供给大家.(仅供参考 ...