写在最前
下面是《可视化篇:效果图》中第8、9张的实现说明
其中:
1. 个人轨迹的可视化是echart通过调用百度地图API后实现,关于Echarts如何调用百度地图API,请参考上一篇文章《Echarts引入百度地图》
2. 下图展示的个人轨迹均为虚拟数据
3. 本文只做单用户轨迹展示说明,并未深入探讨批量用户轨迹的可视化及优化
4.使用工具为:Echarts
1.Echart版本说明及模块化文件引入
- 目前百度搜索能看到的有echart2和echart3,由于echart3已不提供百度地图实例化的样本(若强行用echart3,需自行写好相关js脚本),所以下文是基于echart2,下载地址为:http://echarts.baidu.com/build/echarts-2.2.7.zip
- 模块化文件的引入主要有main.js,map.js,还有echart.js
require.config({
paths: {
echarts: "echarts",
},
});
require(
[
"echarts",
"echarts/chart/main",
"echarts/chart/map",
],
其中:
main.js文件对应在下载的echart2压缩包目录echarts-2.2.7\extension\BMap\src下,该文件是杨骥(echart团队)写的百度地图在echart上的扩展文件
map.js文件对应目录为:build\dist\chart,再声明一次,引入百度地图时,dist目录需全部复制到开发文件相应目录下
echarts.js同样存在于dist文件
此处详细参见《Echarts引入百度地图》一文。
2.个人轨迹展示的思考及实现
2.1 对于个人轨迹的可视化,最初的设想是:
在百度地图上,搭配时间轴timeline,随着时间的变化用户轨迹的演变,后来在用echart写时发现timeline属性始终对应不到options列表,无法渲染options下用户的轨迹参数列表,再后来与R REmap包作者交谈中进一步确认,echart中timeline目前还无办法在百度地图上渲染,这里应该知会一下echart团队的,下面就不对timeline使用做过多说明了。
除上述不同时间不同地点外,为更好展示轨迹线下的意义,还需要做进一步工作,即不同时间不同地点不同事件,如此对于个人轨迹才有比较契合展示。
最终效果如下:
上班场景:
同行逛街:
2.2 个人轨迹的echart实现
2.2.1 为实例化百度地图背景构建一个容器
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
Margin设为0则与浏览器无边界融合,div属性容器id,后面js脚本里需要用到该属性,并将echart填充到该容器里,当然,div可以有多个,故可以填充多个echart实例。
实例化后再js脚本里调用echart api即可:
var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
enableMapClick: false
});
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var startPoint = {
x: 113.328755, //天河城
y: 23.135588
};
var point = new BMap.Point(startPoint.x, startPoint.y);
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom(true);
上图中的方法都封装在main.js中,使用的时候按上图调用即可,其中css样式对应之前的容器大小,BMapExt为初始化的地图对象,具体可看main.js源码,中间getMap,getEchartsContainer为获取地图实例及echart实例对象,BMap.Point是定义当前打开地图的中心点,最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。
2.2.2 修改百度地图背景
此处可根据需求自行修改,可以通过修改map.setMapStyle函数里百度地图的styleJson达到目的,具体如下:
有两种方法可以定义自己的styleJson:
1.通过http://developer.baidu.com/map/custom/list.htm
该地址为百度对外开放的地图自定义地址,全过程鼠标即可完成自己的模板,最后导出json文件在自己的开发文档中引用即可。
2.修改下面代码
styleJson: [
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
},
{
'featureType': 'building',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway',
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
},
{
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color':'#003051'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'subway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',