leaflet动态路径
在leaflet中使用动态路径需要结合插件使用,对比了好几个插件,最终找到leaflet.motion比较合适:
leaflet地址:https://leafletjs.com/
leaflet.motion项目地址:https://github.com/Igor-Vladyka/leaflet.motion
一、脚本引入
<script src="~/Scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/Scripts/leafletjs/1.4.0/leaflet.motion.min.js"></script>
二、代码编写,
longLatList为经纬度数组:格式为[[50,0], [60,10]] 这样的,gMap是L.Map地图对象实例
gPath = L.motion.polyline(longLatList,
{
color: "red",
fill: false,
fillOpacity: 0
},
{
auto: true
},
{
removeOnEnd: true,
icon: L.icon({
iconUrl: "/Img/CarIcon/IMG_TRUCK06_LOAD.png",
iconSize: [24, 24],
iconAnchor: [10, 3]
})
}).motionSpeed(speed).addTo(gMap);
小提示:
当地图容器的宽度或者高度变化后,需要手动调用:gMap.invalidateSize(); 方法来更新地图,避免出现部分图层空白

leaflet动态路径的更多相关文章
- 海康JAVA SDK库动态路径加载
海康JAVA SDK初始化路径默认是放在classes下面,见下: HCNetSDK INSTANCE = (HCNetSDK) Native.loadLibrary("HCNetSDK&q ...
- vue项目sql图片动态路径引用问题
最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...
- Asp.Net MVC之 自动装配、动态路径(链接)等
一.Model层 using System; using System.Collections.Generic; using System.Linq; using System.Web; namesp ...
- 【现学现卖】th:href标签动态路径设置,thymeleaf获取session中的属性值
update:2020-02-28:按道理来说这个功能在前后端分离的时候应该不怎么用的上,基本到现在我还是没遇到过有这样的需求,不过也是一种方法就是.th:href="@{/{role}/l ...
- leaflet 动态线渲染
可以采用leaflet插件 leaflet-ant-path ... <script src="js/leaflet-ant-path.js" type="text ...
- openresty(完整版)Lua拦截请求与响应信息日志收集及基于cjson和redis动态路径以及Prometheus监控(转)
直接上文件 nginx.conf #运行用户和组,缺省为nobody,若改为别的用户和组,则需要先创建用户和组 #user wls81 wls; #开启进程数,一般与CPU核数等同 worker_pr ...
- leaflet实现台风动态轨迹
leaflet平台是我最新使用的webGIS平台,该平台比较轻巧以下是我展示台风动态路径展示 1.首先为大家展示一下动态台风所使用数据 上面中采用标准json格式数据,data数据中,points是对 ...
- 动态的src路径怎么写
错误写法 <div class="icon--wrapper" @click="before"> <img class="icon- ...
- VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })
案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...
随机推荐
- Java学习目录(持续更新中)
- Kafka对Java程序员有多重要?连阿里都再用它处理亿万级数据统计
一.了解淘宝Kafka架构 在ActiveMQ.RabbitMQ.RocketMQ.Kafka消息中间件之间,我们为什么要选择Kafka?下面详细介绍一下,2012年9月份我在支付宝做余额宝研发,20 ...
- vs17 破解密钥
Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...
- C# int数据类型呵呵
int16=short; int32=int; int64=long; Int16 值类型表示值介于 -32768 到 +32767 之间的有符号整数. Int32 值类型表示值介于 -2,147,4 ...
- PHP分页倒序时,需要注意的问题
PHP分页倒序请求,如果有新数据加入,下一页会出现重复数据 解决方案: 第一次查询时,给前端返回一个查询时间戳,下一次请求时,把时间戳带过来,只查询比这个时间戳小的数据
- 使用ML.NET实现基于RFM模型的客户价值分析
RFM模型 在众多的客户价值分析模型中,RFM模型是被广泛应用的,尤其在零售和企业服务领域堪称经典的分类手段.它的核心定义从基本的交易数据中来,借助恰当的聚类算法,反映出对客户较为直观的分类指示,对于 ...
- EF三种编程方式图文详解
Entity Framework4.1之前EF支持“Database First”和“Model First”编程方式,从EF4.1开始EF开始支持支持“Code First”编程方式,今天简单看一下 ...
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(四):发布与回滚
写在前面 我们以前windows跑.net Framework程序的时候,发布,自己乖乖的替换程序:备份,也是自己一个一个的重命名备份:回滚,发布遇到问题的回滚更是不用说了:运维很是怕我们 这些用wi ...
- Java开发知识之Java中的集合Set接口以及子类应用
---恢复内容开始--- Java开发知识之Java中的集合Set接口以及子类应用 一丶Set接口以及作用 在上一讲.我们熟悉了接口的实现图.以及自己各有的子类. List接口主要存储的数据是可以重复 ...
- Docker 网络之理解 bridge 驱动
笔者在前文<Docker 网络之进阶篇>中介绍了 CNM(Container Network Model),并演示了 bridge 驱动下的 CNM 使用方式.为了深入理解 CNM 及最常 ...