可视化篇：Echarts个人轨迹可视化实现

最新推荐文章于 2024-05-17 13:57:45 发布

杨铖

最新推荐文章于 2024-05-17 13:57:45 发布

阅读量5.5w

点赞数 52

分类专栏：可视化文章标签：可视化 echarts 轨迹

本文链接：https://blog.csdn.net/yc_1993/article/details/51439365

版权

写在最前
下面是《可视化篇：效果图》中第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',

最低0.47元/天解锁文章

杨铖

关注

52
点赞
踩
196

收藏

觉得还不错? 一键收藏
413
评论
可视化篇：Echarts个人轨迹可视化实现

写在最前下面是《可视化篇：效果图》中第8、9张的实现说明其中： 1. 个人轨迹的可视化是echart通过调用百度地图API后实现，关于Echarts如何调用百度地图API，请参考上一篇文章《Echarts引入百度地图》 2. 下图展示的个人轨迹均为虚拟数据 3. 本文只做单用户轨迹展示说明，并未深入探讨批量用户轨迹的可视化及优化 4.使用工具为：Echarts1.Echart
复制链接

扫一扫