在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动态路径的更多相关文章

  1. 海康JAVA SDK库动态路径加载

    海康JAVA SDK初始化路径默认是放在classes下面,见下: HCNetSDK INSTANCE = (HCNetSDK) Native.loadLibrary("HCNetSDK&q ...

  2. vue项目sql图片动态路径引用问题

    最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...

  3. Asp.Net MVC之 自动装配、动态路径(链接)等

    一.Model层 using System; using System.Collections.Generic; using System.Linq; using System.Web; namesp ...

  4. 【现学现卖】th:href标签动态路径设置,thymeleaf获取session中的属性值

    update:2020-02-28:按道理来说这个功能在前后端分离的时候应该不怎么用的上,基本到现在我还是没遇到过有这样的需求,不过也是一种方法就是.th:href="@{/{role}/l ...

  5. leaflet 动态线渲染

    可以采用leaflet插件 leaflet-ant-path ... <script src="js/leaflet-ant-path.js" type="text ...

  6. openresty(完整版)Lua拦截请求与响应信息日志收集及基于cjson和redis动态路径以及Prometheus监控(转)

    直接上文件 nginx.conf #运行用户和组,缺省为nobody,若改为别的用户和组,则需要先创建用户和组 #user wls81 wls; #开启进程数,一般与CPU核数等同 worker_pr ...

  7. leaflet实现台风动态轨迹

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

  8. 动态的src路径怎么写

    错误写法 <div class="icon--wrapper" @click="before"> <img class="icon- ...

  9. VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })

    案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...

随机推荐

  1. PHP算法之冒泡排序

    //冒泡排序 //①思路,先比较出第一次,找一个最大的值,排到最后; //②重复count遍之后,就能得到排序; //③优化,每一次循环之后不需要再次全部重复; $array = [11,5,4,58 ...

  2. Firefox 多行标签的解决方案分享

    更新了 Quantum 以后 TabMixPlus 就不能用了,我最中意的多行标签也没了,捣鼓了一下终于重新回来了. 指南: https://discourse.mozilla.org/t/tabs- ...

  3. 十分钟通过 NPM 创建一个命令行工具

    大过年的,要不要写点代码压压惊?来花十分钟学一下怎么通过 NPM 构建一个命令行工具. 写了一个小 demo,用于代替 touch 的创建文件命令 touchme ,可以创建自带“佛祖保佑”注释的文件 ...

  4. CentOS6.9下离线部署Django项目

    最近项目服务器变动,研究了CentOS6.9下httpd2.4+django1.11.16+python3.6+PostgreSQL的部署,之前还有一个ubuntu16.04下的部署等以后整理好后再来 ...

  5. 002-J2EE-tomcat的配置

    在配置之前我们要先下载一个Tomcat,登入以下网址... 下载解压完了之后可以把里面多余的东西删掉,当然也可以选择不删. 还有这里的也是 如果已经有了 classes 和l ib 目录了, 就不用再 ...

  6. eclipse项目有红叉的解决办法

    eclipse项目上有红叉,说明这个项目存在一些的问题,对于这种情况需要具体来看. 1 新导入项目的红叉 如果是新导入的项目,一般红叉就只在项目名称上面有红叉,项目下的分项上面没有,这一般是由于当初项 ...

  7. 关于pycharm安装出现的interpreter field is empty,无法创建项目存储位置

    关于pycharm安装出现的interpreter field is empty(解释器为空) 关于pycharm安装出现的interpreter field is empty,无法创建项目存储的位置 ...

  8. 深入解析 H.265 编码模式,带你了解Apple全面推进H.265的原因

    今天我们聊聊视频编码.视频文件亘古以来存在一个矛盾:高清画质和视频体积的冲突,相同编码标准下,视频更高清,视频体积更大.因此,应用更先进的视频编码标准,降低视频体积,可以大幅降低网站的流量消耗. 目前 ...

  9. Qt之自定义托盘(二)

    上一篇文章讲述了自定义Qt托盘,不过不是使用QSystemTrayIcon这个类,而是我们自己完全自定义的一个类,我们只需要处理这个类的鼠标hover.鼠标左键点击.鼠标右键点击和鼠标左键双击,就可以 ...

  10. asp.net core系列 34 EF保存数据(1)

    一. 基本数据 每个EF上下文实例都有一个 ChangeTracker(更改跟踪器),它负责跟踪需要写入数据库的更改. 当更改实体类的实例时(修改属性,删除实例,新建实例等),这些更改会记录在 Cha ...