一、引用Leaflet脚本样式,和Leaflet Ant Path 插件

下载地址:

Leaflet:https://leafletjs.com/download.html

Leaflet Ant Pathhttps://github.com/rubenspgcavalcante/leaflet-ant-path

使用Leaflet Ant Path 插件要求Leaflet的版本大于等于1.0

<link href="~/Scripts/leafletjs/1.4.0/leaflet.css" rel="stylesheet" />
<script src="~/Scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/Scripts/leafletjs/1.4.0/leaflet-ant-path.js"></script>

二、地图初始化

 /**
* 地图初始化
*/
function mapInit() {
var amapNormalUrl = '/api/Map/GetMap?type=783085212&zoom={z}&x={x}&y={y}';
var amapNormalLayer = new L.TileLayer(amapNormalUrl, {
minZoom: 1,
maxZoom: 18,
attribution: ''
}); var mapCenter = new L.LatLng(****,****);
gMap = new L.Map('MapContainer', {
center: mapCenter,
zoom: 16,
minZoom: 1,
maxZoom: 18,
layers: [amapNormalLayer]
});
}

三、画动态线段

//清楚上一次画的线段
if (gPath) {
gMap.removeLayer(gPath);
}
var longLatList =[[****,****],[*****,****]];//经纬度数组
var antPath = L.polyline.antPath;
gPath = antPath(longLatList, {
"paused": false,   //暂停 初始化状态
"reverse": false,  //方向反转
"delay": 3000,    //延迟,数值越大效果越缓慢
"dashArray": [10, 20], //间隔样式
"weight": 3,    //线宽
"opacity": 0.5,  //透明度
//"color": "#0000FF", //颜色
//"pulseColor": "#FFFFFF"  //块颜色
});
gPath.addTo(gMap); // 缩放地图到折线所在区域
gMap.fitBounds(gPath.getBounds());

最新文章

  1. [机器学习] ——KNN K-最邻近算法
  2. fstream文件操作
  3. 烂泥:学习ubuntu之快速搭建LNMP环境
  4. mysql常用命令(1)
  5. leetcode 160
  6. js数组的声明与应用
  7. csv 文件介绍
  8. .net mvc笔记2_Essential C# Features
  9. Vijos 1011 清帝之惑之顺治 记忆录式的动态规划(记忆化搜索)
  10. React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)
  11. 设计模式——备忘录模式(C++实现)
  12. 部署 apply plugin: &#39;realm-android&#39;
  13. pip 源
  14. numpy中的随机数模块
  15. UITableView 自定义多选
  16. 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-7 混合概率密度
  17. python进行数据分析
  18. QT多线程简单例子
  19. 【Error】centos7 minimal connect: Network is unreachable
  20. js 数组 转为树形结构

热门文章

  1. 第一次写html网页
  2. Event(事件)的传播与冒泡
  3. asp.net core系列 36 WebAPI 搭建详细示例
  4. mysql 架构篇系列 4 复制架构一主一从搭建(半同步复制)
  5. Python爬虫入门教程 3-100 美空网数据爬取
  6. mongodb~mapreduce的实现特殊逻辑的统计
  7. Chapter 4 Invitations——26
  8. 【c#】RabbitMQ学习文档(三)Publish/Subscribe(发布/订阅)
  9. [二] JavaIO之File详解 以及FileSystem WinNTFileSystem简介
  10. 浅谈WPF中的MVVM框架--MVVMFoundation