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"& ...
随机推荐
- FastDFS 学习笔记
一.理论基础 FastDFS比较适合以中小文件为载体的在线服务,比如跟NGINX(APACHE)配合搭建图片服务器. 分布式文件系统FastDFS FastDFS是纯C语言实现,只支持Linux. ...
- Oracle视图(和Mysq一样l)
本章内容: Oracle视图介绍与创建.Oracle视图的查询与修改.Oracle的复杂视图 1. Oracle视图介绍与创建 (1)了解常见的数据库对象都有哪些 (2)了解什么是视图以及为什么要使用 ...
- HTTP/3 简介
前言 HTTP 2.0是由谷歌SPDY进化而来,现有的实现基本都是走SSL(说是可以不用SSL,但基本没这么干的),传输层使用TCP.HTTP 3.0是由谷歌QUIC进化出来的,QUIC没有大动HTT ...
- Python内置函数(11)——classmethod
英文文档: classmethod(function) Return a class method for function. A class method receives the class as ...
- CentOS 7 源码编译安装 Nginx
这里安装的是nginx 1.14版本 1.下载源码 #下载 wget http://nginx.org/download/nginx-1.14.0.tar.gz #解压 tar -xzf nginx- ...
- synchronize 关键字原理
众所周知 synchronized 关键字是解决并发问题常用解决方案,有以下三种使用方式: 同步普通方法,锁的是当前对象. 同步静态方法,锁的是当前 Class 对象. 同步块,锁的是 () 中的对象 ...
- C#版 - Leetcode 306. 累加数 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- 精读《react-easy-state 源码》
1. 引言 react-easy-state 是个比较有趣的库,利用 Proxy 创建了一个非常易用的全局数据流管理方式. import React from "react"; i ...
- 一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- win10下rdlc报表在vs(visual studio)中中文显示小方块的批量处理解决方法
在网上找vs中rdlc报表显示中文时显示小方块的解决方案,无外就是修改文本框的字体属性.但是对于维护已有的rdlc报表时,有中文的地方(此时都显示了小方块)会很多,再一个一个设置实在太麻烦.所以自己花 ...