实时记录运动轨迹插件_浅谈 leaflet 地图插件的使用(制作飞机航线图)
前沿
接到需求飞行航班地图
需求整理
1.获取后台接口数据,且定时请求数据并渲染,体现航班的动态效果
2.在地图上分布给每组数据设同样的图标
3.给循环的marker设置鼠标事件(移入移出样式设置),点击事件弹窗展示接口返回信息
4.点击某条航班动态绘制航线图。
问题:1.飞机图标要体现路线的方向性,不能用一个icon就表示了。
2.接口返回经纬度实时变化,飞机也在动,要根据飞机运动轨迹绘制路线
具体实现
后端要返回航班起点终点经纬度,根据实施经纬度计算角度,从而调整飞机角度
##绘制基础地图
var mymap = L.map('mapid').setView([xxx,xxx], 8),
地图拖动或缩放调接口
mymap.on('zoomend dragend',function(){
mymap.getZoom(); //获取范围经纬度
getMap(); //获取接口方法
})
marker自定义图标
1.如果自定义几个图标以内,可以自定义地址
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
2.如果是范围内的很多图标,且都一样,如下:
var myIcon = L.divIcon({className: 'iconfont icon-99'}),
var res = data //接口返回数据,通过经纬度定位图标位置
$.each(res,function(i){
let arr = [];
arr.push(res[i].latitude)
arr.push(res[i].longitude)
var marker = L.marker(arr,{icon: myIcon}).addTo(mymap);
})
3.如果要给marker 添加事件
marker.on('click',function(e){
//function
}).on('mouseover',function(){
//鼠标移入设置自定义样式 hovColor及文本
marker.setIcon(L.divIcon({className: 'iconfont icon-99 hovColor',
html:''+res[i].flight+''}))
}).on('mouseout',function(){
marker.setIcon(L.divIcon({className: 'iconfont icon-99'}))
})
4.marker获取数据重新渲染
重新渲染需要先清除原标记再添加,且每一个marker都要重新渲染,需要使用LayerGroup组先存放marker
var myLayerGroup = new L.LayerGroup();
myLayerGroup.clearLayers(); //循环marker赋值前先清除清除marker标记组,便于重绘
myLayerGroup.addLayer(marker);
mymap.addLayer(myLayerGroup);
绘制路线
当点击某个航班时,需要接口返回该航班历史经纬度数组,且实时返回,这时可以新建个数组变量latlngs,实时push数组给他,每一次push后重绘路线,看上去就像路线跟着飞机后面动
L.polyline(latlngs, {color: 'red',opacity:'0.8',weight:'1'}).addTo(mymap);
调整飞机方向
后台根据实时位置计算某个航班的飞机角度返回,前台拿到角度设置icon样式,难点在后台
实时记录运动轨迹插件_浅谈 leaflet 地图插件的使用(制作飞机航线图)相关推荐
- 浅谈 leaflet 地图插件的使用(制作飞机航线图)
前沿 接到需求飞行航班地图 需求整理 1.获取后台接口数据,且定时请求数据并渲染,体现航班的动态效果 2.在地图上分布给每组数据设同样的图标 3.给循环的marker设置鼠标事件(移入移出样式设置), ...
- java百度地图路线规划_浅谈百度地图WEB开发中的四种路线规划
百度地图在3.0的Javascript api中增加了四种路径规划,分别是:步行.骑行.自驾.公交. 关于路线规划的引用也相当简单,我们以步行为例://实例化地图 var map = new BMap ...
- 《计算机辅助教学及应用实践研究》,《论文_浅谈计算机辅助教学(定稿)》
<论文_浅谈计算机辅助教学(定稿)> (3页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 摘要:计算机辅助教学中要用到多媒体课件 ...
- python判断两个对象是否为相等使用的运算符是_Python入门_浅谈逻辑判断与运算符...
这是关于Python的第6篇文章,主要介绍下逻辑判断与运算符. (一) 逻辑判断: 如果要实现一个复杂的功能程序,逻辑判断必不可少.逻辑判断的最基本标准:布尔类型. 布尔类型只有两个值:True和Fa ...
- vb怎么样实时取mysql数据库数据_浅谈如何使用vb.net从数据库中提取数据
1.设置从Model中的Sub Main 启动 2.程序结构 3.Model1 Imports System.Windows.Forms.Application Module Module1 Sub ...
- pg数据库 设置不区分大小写_浅谈PostgreSQL中大小写不敏感问题
本文主要讨论PostgreSQL中大小写不敏感存在的问题. 默认情况下,PostgreSQL会将列名和表名全部转换为小写状态. 图1 Person与person 如图1所示,我们创建表person,其 ...
- 飞机qar数据可视化_浅谈QAR大数据分析与应用
QAR数据分析指的是用适当的统计分析方法对收集来的QAR数据进行分析,提取有用信息和形成结论而对QAR数据加以详细研究和概括总结的过程.目前航空公司在QAR数据分析与应用上主要有两类问题. 一是典型超 ...
- mysql 用户通配符_浅谈mysql通配符进行模糊查询的实现方法
在mysql数据库中,当我们需要模糊查询的时候 ,我们会使用到通配符. 首先我们来了解一下2个概念,一个是操作符,一个是通配符. 操作符 like就是SQL语句中的操作符,它的作用是指示在SQL语句后 ...
- es全文检索论文_浅谈使用ElasticSearch实现全文检索
浅谈使用ElasticSearch实现全文检索 IDEADATA-iDSP-Yeun 2016年5月15日 现如今,无论是互联网信息还是企业内部每天产生的信息,都在以指数级增长,对于企业内部,每天 ...
- mysql cdc采集_浅谈CDC在微服务中的应用
原标题:浅谈CDC在微服务中的应用 CDC(Change Data Capture)是一种通过监测数据变更(变更包括新增.修改.删除等)而对变更的数据进行进一步处理的一种设计模式,通常应用在数据仓库以 ...
最新文章
- JavaScript 中的原型原来是这样的
- Atlassian和Slack达成战略伙伴合作关系
- 人工智能的策略,如果国家优先发展”梦想成真”?
- MyEclipse开发教程:使用REST Web Services管理JPA实体(四)
- mysql全文索引FULLTEXT的哈希与BTREE方法对比
- c#中事件注册多个委托并获取委托列表
- 【.NET Core项目实战-统一认证平台】第五章 网关篇-自定义缓存Redis
- 【CVTE Web后台开发实习生2019.12.05在线笔试】总结
- 如何更全面的认识 MongoDB ?
- Python 进阶——重访 list (二)
- 小学科学作业计算器c语言,怎样用C实现一个简单科学计算器
- 大数据 数据平台方案评估
- 并发编程学习(2)----volatile与synchronized
- 频谱感知2:衰落信道上未知信号的能量检测
- 换信科技B2B供应链平台“换易宝”1.0产品上线发布会盛大召开
- C# ManualResetEvent 与 AutoResetEvent 区别
- OverFeat论文解析
- Charles安装SSL证书失败问题
- 【零基础学Python】Day8 Python基本数据类型之Dictionary
- Android手机界面组成