可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)

一、数据格式

说明：数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值，如第一个点经纬度的10000倍为1164383、401471，第三四个数-11、-13分别是第二个点经纬度与第一个点经纬度的差值，后面类比；

若想用此代码，则可用 python 脚本将数据处理成上面类似样式。

通过下面代码处理成正常的经纬度坐标

 $.getJSON('data/lines-bus.json', function (data) {var hStep = 300 / (data.length - 1);var busLines = data.map(function (busLine, idx) {var prevPt;var points = [];for (var i = 0; i < busLine.length; i += 2) {var pt = [busLine[i], busLine[i + 1]];if (i > 0) {pt = [prevPt[0] + pt[0],   //数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值prevPt[1] + pt[1]];}prevPt = pt;points.push([pt[0] / 1e4, pt[1] / 1e4]);  //除以10000得到实际经纬度坐标}return {coords: points,lineStyle: {color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))   //给每条线赋予颜色}};});
});

二、完整代码

<!doctype html>
<html><head><meta charset="utf-8"><title>geo3D-北京公交线路图</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS --><link rel="stylesheet" href="./common.css"></head><body><div id="main"></div><script src="../node_modules/echarts/dist/echarts.js"></script><script src="../node_modules/echarts/map/js/province/beijing.js"></script><script src="../node_modules/echarts/theme/dark.js"></script><script src="../dist/echarts-gl.js"></script><script src="lib/jquery.min.js"></script><script src="js/commonUI.js"></script><script>var chart = echarts.init(document.getElementById('main'));$.getJSON('data/lines-bus.json', function (data) {var hStep = 300 / (data.length - 1);var busLines = data.map(function (busLine, idx) {var prevPt;var points = [];for (var i = 0; i < busLine.length; i += 2) {var pt = [busLine[i], busLine[i + 1]];if (i > 0) {pt = [prevPt[0] + pt[0],   //数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值prevPt[1] + pt[1]];}prevPt = pt;points.push([pt[0] / 1e4, pt[1] / 1e4]);  //除以10000得到实际经纬度坐标}return {coords: points,lineStyle: {color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))   //给每条线赋予颜色}};});chart.setOption({geo3D: {map: '北京',shading: 'realistic',environment: '#111',silent: true,realisticMaterial: {roughness: 0.8,metalness: 0},postEffect: {enable: true},groundPlane: {show: true,color: '#000'},light: {main: {intensity: 0,shadow: true,shadowQuality: 'high',alpha: 30},ambient: {intensity: 0.2}},viewControl: {distance: 50},itemStyle: {color: '#333',borderColor: '#fff'},regionHeight: 0.5},series: [{type: 'lines3D',coordinateSystem: 'geo3D',effect: {show: true,constantSpeed: 2,trailWidth: 2,trailLength: 0.4,// trailColor: [1, 1, 5],trailOpacity: 0.5},blendMode: 'lighter',polyline: true,lineStyle: {width: 0.1,color: 'rgb(200, 80, 40)',opacity: 0.},distanceToGeo3D: [0, 1],data: busLines}]});window.onresize = chart.resize;window.addEventListener('keydown', function () {chart.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: 0});});});</script></body>
</html>

结果图：

若将第 39、40、41 行代码注释掉：

return {coords: points,//lineStyle: {//  color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))   //给每条线赋予颜色//}
};

则得到的结果图为：

可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)相关推荐

北京地铁线路图纯算法附带求极权值(原创) 性能提升版
先上一张大家都看过而且熟悉的北京地铁线路图: 其中本人由于时间时间问题所以就写入了:昌平线,1,2,4,5,6,8,10,13共9条线路图: 接下来我说说我的思路我的思路是这样的: 首先定义变量b, ...
启迪公交上云助力北京公交二维码乘车业务系统顺利上线
公司介绍我们公司是国内领先的公交出行服务提供商,通过承接公交信息化和智慧化项目建设,应用最先进的互联网商业模式,将"人.车.线.站"的大数据资源及相关配套资源进行商业化转换,实现 ...
北京公交公开招标思路
■本报记者周庆文文/图 "我们要让百姓知道招标背后的故事,让百姓了解更深层次的内容."日前,北京公共交通控股(集团)有限公司召开了一个媒体见面会.由于见面会恰好在北京公交集团200 ...
北京公交将标配智能辅助驾驶，具备行人防撞、车道偏离预警
允中发自凹非寺量子位报道 | 公众号 QbitAI 人不行就上AI. 前段时间,公交相关的消息一波接一波,受到前所未有的关注. 但好消息是,AI福利也将至. 据新华社报道,北京公交集团计划在 ...
北京公交“十三五”将通过大数据实现线路优化
北京公交集团规划发展部经理季朗超说,集团目前已在所有公交车上安装了GPS,通过数据共享,可以通过手机APP进行公交查询,未来将更多基于"互联网+"提升公交服务. 线路设计方面,将利 ...
北京地铁线路图（最新-非常实用）
北京地铁线路图: http://map.baidu.com/subways/index.html?c=beijing
Scrapy爬取北京公交并保存MYSQL数据库实例
前言就不过多赘述了,大家只要把scrapy的基本了解之后就可以完成这个项目. 一:创建scrapy项目: 打开控制台输入 scrapy startproject beibus(这个是项目名称,可以自己 ...
北京公交一卡通刷卡详情查询的网址及查询方法
北京公交一卡通刷卡详情查询的网址及查询方法 http://www.bjsuperpass.com/ http://www.bmac.com.cn/ 两个网址是一样的.但是第二个的域名解析经常不开.第一 ...
北京公交一卡通可打公用电话节省60%话费
除了乘公交地铁.到超市购物,公交一卡通又有了新功能.北京网通日前宣布,已在北京城区大批量换装"一卡通公用电话".为了推广使用一卡通,政府相关部门还批准了优惠政策,市话每分钟通话费为 ...

可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)

可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)相关推荐

最新文章

热门文章