参考：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. java+selenium UI自动化001

    selenium是一个用于Web应用程序测试的工具,可以用来模拟用户在浏览器上的操作. 支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Googl ...

  2. 基于Mininet的网络拓扑搭建代码

    1 import logging 2 import os 3 import time 4 import thread 5 import multiprocessing 6 7 from mininet ...

  3. 详解Lombok中的@Builder用法

    Builder 使用创建者模式又叫建造者模式.简单来说,就是一步步创建一个对象,它对用户屏蔽了里面构建的细节,但却可以精细地控制对象的构造过程. 基础使用 @Builder注释为你的类生成相对略微复杂 ...

  4. Python图表库Matplotlib 组成部分介绍

    图表有很多个组成部分,例如标题.x/y轴名称.大刻度小刻度.线条.数据点.注释说明等等. 我们来看官方给的图,图中标出了各个部分的英文名称 Matplotlib提供了很多api,开发者可根据需求定制图 ...

  5. python -- 程序异常与调试（异常处理）

    一.异常处理 针对在运行时可能会出错的语句块,可以提前设计好出现问题后的解决方案, 或者给出相应的提示信息.使用try-except语句来处理Python抛出的异常: # -------------- ...

  6. Optional 的使用会导致性能下降吗？

    几天前,我在论坛上发了一篇关于Optional 的文章.其中一条评论是一个非常好的问题: Optional 的使用会导致性能下降吗? 答案是: 是的,它会的.但是你应该担心吗? 使用Optional的 ...

  7. C++第四十七篇 -- VS2017带参数启动调试程序

    参考链接:https://www.cnblogs.com/kileyi/p/10163269.html 举例:Test_Bluetooth.exe -help Test_Bluetooth.cpp # ...

  8. （python函数03）zip()函数

    (python函数03)zip()函数 zip是用来压缩的,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个元组(tuple),然后返回有这些tuples组成的对象,可强制转化为列表和 ...

  9. C实现奇偶校验

    奇偶校验原理(来自百度百科):奇偶校验(Parity Check)是一种校验代码传输正确性的方法.根据被传输的一组二进制代码的数位中"1"的个数是奇数或偶数来进行校验.采用奇数的称 ...

  10. css :nth-of-type选择器为什么不起作用！！！

    问题 今天工作才发现的,原来我一直就理解错了!! MDN官网对这个选择器的的定义是: :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位 ...