百度地图可视化之实现飞线动画
此文章最终实现的效果如下图:
使用mapv和mapvgl两个框架来实现百度地图的可视化。
Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。
MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。
绘制飞线动画,需要用到mapvgl中的FlyLineLayer,其用来展示轨迹飞线图层,是基于Three.js实现的,因此在使用前需要额外引入 mapvgl.threelayers包。
实现步骤
1. 导入js库
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=秘钥"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
其中,与实现散点图比较,新增了mapvgl.threelayers包。
2. 编写容器组件及实现地图初始化
<div id="map_container"></div>
common.js方法中使用map_container为id来创建地图,因此使用common.js来初始化地图时,容器组件id需要与之统一。
function initMyMap() {var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京')//initMap 为common.js中初始化地图方法var map = initMap({center: [cityCenter.lng, cityCenter.lat],zoom: 6,tilt: 60,heading: 0,style: purpleStyle})return map}
3. 初始化数据源
利用城市中心点的经纬度来模拟数据,实际使用中可以通过接口返回数据。使用mapv中的工具类utilCityCenter的方法来得到城市名对应的经纬度数据。使用mapvgl中的内置工具BezierCurve来生成飞线数据。
3.1 BezierCurve
BezierCurve是3D曲线生成器,通过传入起点和终点,生成带高度的贝塞尔曲线坐标集,可以用来生成飞线数据。
var curve = new mapvgl.BezierCurve({start:[12946640.989, 4846560.296],end:[12946348.509, 4846401.146]
})
属性有:
- start:起点坐标
- end:终点坐标
方法有:
- getPoints({number}|{undefined}) :获取生成的曲线坐标集,传入的字段为曲线的分段数,默认为20
- setOptions({Object} options):修改起点终点坐标等属性
3.2 生成贝塞尔曲线坐标集
在准备数据源时,最重要一步就是需要生成贝塞尔曲线坐标集,生成步骤如下:
3.2.1 实例化贝塞尔曲线对象
var curve = new mapvgl.BezierCurve()
3.2.2 设置起点和终点坐标
var startPoint = mapv.utilCityCenter.getCenterByCityName('上海')
var endPoint = mapv.utilCityCenter.getCenterByCityName('南京')
curve.setOptions({ //修改起点、终点坐标等属性start: [startPoint.lng, startPoint.lat],end: [endPoint.lng, endPoint.lat]
})
3.2.3 生成贝塞尔曲线坐标集
var curveModelData = curve.getPoints()
最终完整的初始化数据函数如下:
function initData() {var data = []var cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春','沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州','南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']var random = 100 //模拟的飞线数量var curve = new mapvgl.BezierCurve();while (random--) {var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])curve.setOptions({ //修改起点、终点坐标等属性start: [startPoint.lng, startPoint.lat],end: [endPoint.lng, endPoint.lat]})var curveModelData = curve.getPoints() //获取生成的曲线坐标集,传入的字段为曲线的分段数,默认值是20data.push({geometry: {type: 'LineString',coordinates: curveModelData},// 添加其他相关的数据properties: {count: Math.random()}})}return data
}
4. 绘制数据源
4.1 初始化mapvgl.View图层管理器
var view = new mapvgl.View({map
});
4.2 初始化飞线对象
使用到了mapvgl.FlyLineLayer图层对象。
var flylineLayer = new mapvgl.FlyLineLayer({style: 'chaos',step: 0.3,color: 'rgba(33,242,214,0.3)',textureColor: function(data) {return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd'},texturewidth: 20,textureLength: 10
})
4.3 将飞线对象添加到图层中
view.addLayer(flylineLayer)
4.4 将飞线对象与数据源进行绑定
flylineLayer.setData(data)
4.5 绘制数据源整合代码
function setData(map, data) {var view = new mapvgl.View({map});var flylineLayer = new mapvgl.FlyLineLayer({style: 'chaos',step: 0.3,color: 'rgba(33,242,214,0.3)',textureColor: function(data) {return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd'// return '#ff0000'},texturewidth: 20,textureLength: 10})view.addLayer(flylineLayer)flylineLayer.setData(data)}
5. 函数的调用
var map = initMyMap()
const data = initData()
setData(map, data)
之后在浏览器中打开界面即可显示出相关的飞线动画图。
6. 飞线图层FlyLineLayer介绍
用来展示轨迹飞线图层,基于Threejs
实现,使用前需要额外引入mapvgl.threelayers
包。
属性有:
- style:飞线动画方式,取值 normal或chaos
- normal:默认值,飞线动画速度均匀
- chaos:飞线动画速度不均匀
- color:底线颜色
- textureColor:飞线动画颜色,string类型
- textureWidth:飞线动画的宽度,number类型
- textureLength:飞线动画的长度,占整条线的百分比,取值0~100
- step:飞线动画的步长,越大动画速度越快,number类型
data内容格式为:
[{geometry: {type: 'LineString',coordinates: [[116.394191, 39.91334],[116.417259, 39.913672]]}
}]
百度地图可视化之实现飞线动画相关推荐
- 百度地图结合echarts实现飞线
百度地图结合echarts实现飞线 目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
- 百度地图开发入门(5):飞线动画示例
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 讲解另一种常见应用-飞线动画,主要用于展示数据流向 https://lbsyun.baidu.com/solutions/map ...
- 百度地图MapV实现海量数据画线、点聚合等功能
前言 MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果. 官网地址:MapV ...
- 百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果 上次写的是添加自 ...
- AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图(迁徙图)
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期 总体介绍 最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
- 百度地图可视化之实现散点图
此文章最终实现的效果如下图: 使用mapv和mapvgl两个框架来实现百度地图的可视化. Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点.线.面的数据,每种数据也有不 ...
- 百度地图JavaScript简单标点连线
背景 最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究.从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还要上传鹰眼轨迹,最后还要从 Web 端 ...
- 百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言 本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
- 百度地图API显示车辆运行轨迹并动画展示
百度地图api 版本:3.0 开发文档:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0 需求描述 项 ...
最新文章
- 【专题】“莓日一介”之(BlackBerry 7230“经典”)
- TODO;FIXME;XXX
- 数学中R,Z,N,Q都代表什么意思?
- 【枚举】数列(jzoj 1507)
- JAVA补充-抽象类
- html文件很大,webpack打包之后的文件过大如何解决
- sql server 2008如何导入mdf,ldf文件
- linux 下 ethtool 修改网卡eeprom
- Bus Hound实用教程
- Windows Server 2008 R2 下载地址
- tampermonkey油猴实现自动定时刷新页面,刷访问量
- lattice开发错误集合
- python之pycharm添加环境变量
- yarn install报错及解决办法
- 安卓是属于全人类的还是谷歌的私有产品?
- 带有CAN模块通讯的labview转化为应用程序(exe)CAN模块启动失败问题解决办法
- ECE与计算机相关吗,ECE(电子和计算机工程)相关专业的申请经验分享
- 计算机基础知识(基础入门小白专属)六
- 网络安全——传输层安全协议(3)
- l28n和开发版_*** am335x开发板的疑问以及解答