在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. D3、openlayers的一次尝试

    近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...

  2. Zabbix系列之八——安装agent监控windows

    一.下载zabbix-agent客户端 被监控的主机装在windows server 2012 64位操作系统,被监控端需要安装: http://www.zabbix.com/downloads/3. ...

  3. RabbitMQ学习笔记(六) RPC

    什么RPC? 这一段是从度娘摘抄的. RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的 ...

  4. asp.net core 系列 22 EF(连接字符串,连接复原,DbContext)

    一.连接字符串 在上二篇中,ASP.NET Core 应用程序连接字符串是写死在ConfigureServices代码中,下面介绍通过配置来实现.连接字符串可以存储在 appsettings.json ...

  5. shell函数-3

    1.shell函数 1.1.shell函数定义 对于重复出现的代码,在shell中可以定义函数,然后在指定的地方调用即可.便于代码复用,提高开发效率. 定义函数的语法如下: function 函数名( ...

  6. springmvc 项目完整示例04 整合mybatis mybatis所需要的jar包 mybatis配置文件 sql语句 mybatis应用

    百度百科: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBat ...

  7. [CSS] css的background及多背景设置

    问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...

  8. 第56章 Client - Identity Server 4 中文文档(v1.0.0)

    该Client模型的OpenID Connect或OAuth 2.0 客户端-例如,本地应用,Web应用程序或基于JS的应用程序. 56.1 Basics Enabled 指定是否启用客户端.默认为t ...

  9. C# 给现有PDF文档添加页眉、页脚

    概述 页眉页脚是一篇完整.精致的文档的重要组成部分.在页眉页脚处,可以呈现的内容很多,如公司名称.页码.工作表名.日期.图片,如LOGO.标记等.在之前的文章中介绍了如何通过新建一页空白PDF页来添加 ...

  10. SpringMVC进行文件上传

    进行文件上传前需要添加相应的依赖 在xml文件中进行相应的文件上传解析器的配置 注意:这里有个坑,因为没注意,再排查错误的时候花了一点时间.就是给bean的id一定要是. 否者就会报如下的错误: