参考：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. 两人团队项目-石家庄地铁查询系统（web版）psp表

    结对开发_石家庄地铁查询_博客地址:https://www.cnblogs.com/Aduorisk/p/10652917.html 队友:冯利伟 PSP: PSP0 Personal Softwar ...

  2. Java基础00-数据输入5

    1. 数据输入 1.1 数据输入概述 我们需要的数据(比如账号密码)并不是一开是就有的,而是要输入的. 1.2 Scanner使用的基本步骤 1.3 案例

  3. 搭建SAMBA服务

    说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独搭建SABMA服务的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需要查看相关软件版本 ...

  4. 数据分析学习1-----matplotlib

    安装:Anaconda 详细见:https://blog.csdn.net/lwplwf/article/details/79162470 使用^ThinkPad-E560:~# spyder  命令 ...

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

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

  6. C++第四十二篇 -- CPU Usage

    前言 目的:读取并控制CPU占用率 近期在做CPU Usage方面的事情,让CPU以一种高占用率的状态运行一定的时间,需要读取CPU各个核的占用率,网上关于这方面的资料好少,FQ也只找到了一个WMI的 ...

  7. Django关闭html转义

    我们在views定义的html语句传递到html文件会按照原样式输出,并把我们定义的html标签页输出了,这是因为django模板默认帮我们开起了html转义功能 {{ lp}} <hr> ...

  8. solr（CVE-2020-13957）文件上传

    影响版本 Apache Solr 6.6.0 - 6.6.5 Apache Solr 7.0.0 - 7.7.3 Apache Solr 8.0.0 - 8.6.2 环境搭建 下载环境 http:// ...

  9. GoldenEye-v1靶机

    仅供个人娱乐 靶机信息 下载地址:https://pan.baidu.com/s/1dzs_qx-YwYHk-vanbUeIxQ 一.主机扫描 二.信息收集 三.漏洞的查找和利用 boris    I ...

  10. Jmeter分布式压测实战及踩坑处理(含参数化)

    项目中使用Jmeter进行大并发压测时,单机受限内存.CPU.网络IO,会出现服务器压力还没有上 去,但压测服务器由于模拟的压力太大死机的情况.JMeter的集群模式可以让我们将多台机器联合起来 一起 ...