参考: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 ...