参考：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使用笔记29--代码驱动

    1 import unittest 2 import requests 3 import jsonpath 4 import time 5 import nnreport 6 7 def get_va ...

  2. C语言:模拟密码输入显示星号

    一个安全的程序在用户输入密码时不应该显示密码本身,而应该回显星号或者点号,例如······或******,这在网页.PC软件.ATM机.POS机上经常看到.但是C语言没有提供类似的功能,控制台上只能原 ...

  3. 【深度学习】在linux和windows下anaconda+pycharm+tensorflow+cuda的配置

    在linux和windows下anaconda+pycharm+tensorflow+cuda的配置 在linux和windows下anaconda+pycharm+tensorflow+cuda的配 ...

  4. Python+Scrapy+Crawlspider 爬取数据且存入MySQL数据库

    1.Scrapy使用流程 1-1.使用Terminal终端创建工程,输入指令:scrapy startproject ProName 1-2.进入工程目录:cd ProName 1-3.创建爬虫文件( ...

  5. Leetcode春季活动打卡第三天：面试题 10.01. 合并排序的数组

    Leetcode春季活动打卡第三天:面试题 10.01. 合并排序的数组 Leetcode春季活动打卡第三天:面试题 10.01. 合并排序的数组 思路 这道题,两个数组原本就有序.于是我们采用双指针 ...

  6. MYSQL一个设备上的主从复制实现-windows

    只记录一次在一个设备上实现mysql主从复制的过程,很详细,建议收藏,用到的时候照着步骤做就可以,会记录所有需要注意到的细节和一些容易遇到的坑以及解决办法! 如果需要在同一台电脑(服务器)上实现mys ...

  7. jenkens安装教程

    war包安装方式(linux和windows下) 具体参见:https://www.cnblogs.com/UncleYong/p/10742867.html

  8. linux 之awk 次数统计

    sort +awk+uniq 统计文件中出现次数 jps -v |grep jar|grep -v Jps|awk  'BEGIN{FS=".jar "} {print $1}'  ...

  9. 一个故事看懂HTTPS

    我是一个浏览器,每到夜深人静的时候,主人就打开我开始学习. 为了不让别人看到浏览记录,主人选择了"无痕模式". 但网络中总是有很多坏人,他们通过抓包截获我和服务器的通信,主人干了什 ...

  10. python，ctf笔记随笔

    一.在centos虚拟机中安装pyhton3环境: 安装pip3:yum install python36-pip 将pip升级到最新版本:pip3 install --upgrade pip 运行p ...