一、引用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());

Leaflet实现动态线路的更多相关文章

  1. R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)

    好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...

  2. 九州动态ip的特色

    九州代理是一款高覆盖的换ip软件,范围可覆盖全国160多个城市.软件可用于游戏试玩.游戏挂机.营销.优化.文档分享.管理.问答推广.数据采集.点赞.增效回访.用户注册等.“九州代理”仅提供国内网络节点 ...

  3. 【翻译】在Ext JS集成第三方库

    原文地址:http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/ 作者:Kevin Kazmierczak Ke ...

  4. 烽火2640路由器命令行手册-12-IBM网络配置命令

    IBM网络配置命令 目  录 第1章 DLSW配置命令... 1 1.1 DLSW配置命令... 1 1.1.1 dlsw local-peer 1 1.1.2 dlsw remote-peer 3 ...

  5. 手把手教你学习R语言

    本文为带大家了解R语言以及分段式的步骤教程! 人们学习R语言时普遍存在缺乏系统学习方法的问题.学习者不知道从哪开始,如何进行,选择什么学习资源.虽然网络上有许多不错的免费学习资源,然而它们多过了头,反 ...

  6. leaflet动态路径

    在leaflet中使用动态路径需要结合插件使用,对比了好几个插件,最终找到leaflet.motion比较合适: leaflet地址:https://leafletjs.com/ leaflet.mo ...

  7. 动态DNS——本质上是IP变化,将任意变换的IP地址绑定给一个固定的二级域名。不管这个线路的IP地址怎样变化,因特网用户还是可以使用这个固定的域名 这样看的话,p2p可以用哇

    动态域名是因应网络远程访问的需要而产生的一项应用技术.因为没有固定IP,只能运用二级域名来应对经常变化的IP,动态域名的由来因此而产生. 它当前主要应用在:路由器.网络摄像机.带网络监控的硬盘录像机. ...

  8. leaflet实现台风动态轨迹

    leaflet平台是我最新使用的webGIS平台,该平台比较轻巧以下是我展示台风动态路径展示 1.首先为大家展示一下动态台风所使用数据 上面中采用标准json格式数据,data数据中,points是对 ...

  9. Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker

    前面写了篇文章,mapboxgl实现带箭头轨迹线,介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果. 下图是我基于leaflet实现的效果. 接下来分享一下在我基于leaflet实现该效果时 ...

随机推荐

  1. [Swift]LeetCode994. 腐烂的橘子 | Rotting Oranges

    In a given grid, each cell can have one of three values: the value 0 representing an empty cell; the ...

  2. windows下golang实现Kfaka消息发送及kafka环境搭建

    kafka环境搭建: 一.安装配置java-jdk (1)kafka需要java环境,安装java-jdk,下载地址:https://www.oracle.com/technetwork/java/j ...

  3. java基础(十二 )-----Java泛型详解

    本文对java的泛型的概念和使用做了详尽的介绍. 概述 泛型在java中有很重要的地位,在面向对象编程及各种设计模式中有非常广泛的应用. 什么是泛型?为什么要使用泛型? 泛型,即“参数化类型”.一提到 ...

  4. Python:机器学习三剑客之 NumPy

    一.numpy简介 Numpy是高性能科学计算和数据分析的基础包,机器学习三剑客之一.Numpy库中最核心的部分是ndarray 对象,它封装了同构数据类型的n维数组.部分功能如下: ndarray, ...

  5. Nagios 监控系统架构

    Nagios 监控系统架设全攻略 简介: Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT ...

  6. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  7. JS引擎线程的执行过程的三个阶段(二)

    继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...

  8. 第49章 令牌端点(Token Endpoint) - Identity Server 4 中文文档(v1.0.0)

    令牌端点可用于以编程方式请求令牌.它支持password,authorization_code,client_credentials,refresh_token和urn:ietf:params:oau ...

  9. 使用表类型(Table Type-SqlServer)实现百万级别的数据一次性毫秒级别插入

    使用表类型(Table Type)实现百万级别的数据一次性插入 思路 1 创建表类型(TaBleType)         2 创建添加存储过程         3 使用C#语言构建一个DataTab ...

  10. Android破解学习之路(十三)—— 另类的破解VIP思路

    前言 一般按照以往,我们想要获得某个软件的VIP,一般是通过修改支付宝的支付流程,原本购买失败的,我们修改代码,从而使得失败变成了成功,不花费金钱 另类思路 有些软件将判断用户是否为VIP的代码写在了 ...