可视化篇:mapbox + echarts-gl 展示血脉交通

原创 2017年11月13日 15:40:56

preface
好久没跟新,怕是这个爱好都要被繁忙的工作给消磨掉了。。
17年也快结束了,此篇应该是作为今年的结尾了,望来年分享更多有趣的东西。


其中:
1.echarts 用的是3.8.0, echarts-gl 用的1.0.0-beta.
2.需要mapbox的accstoken, https://www.mapbox.com/maps/ 这里注册个号,然后配置一些地图样式,进入账号有一个Access tokens,渲染地图需要这个东西。


话不多说,先上图,大概的效果是这样,建议参考http://gallery.echartsjs.com/editor.html?c=xBkyhntOEW

baseOption1


数据部分

参考echarts官网例子,数据部分的格式大概是这样:

data: [
  {ROAD_LINE: '168.386,-44.8495;168.386,-44.8464;168.386,-44.8464'},
  {ROAD_LINE: '...'},
  ...
]

当然,这并不是渲染线路时传入的格式,看官网echarts文档GL: series[i]-lines3D.data[i], (这里我做一下搬运工):

三维飞线图的数据数组,通常数据的每一项可以是一个包含起点和终点的坐标集。在 polyline 设置为 true 时支持多于两个的坐标。 如下:

data: [
    [
        [120, 66, 1], // 起点的经纬度和海拔坐标
        [122, 67, 2]  // 终点的经纬度和海拔坐标
    ]
]

有些时候需要配置数据项的名字或者单独的样式。需要把经纬度坐标写到 coords 属性下。如下:

data: [
    {
        coords: [ [120, 66], [122, 67] ],
        // 数据值
        value: 10,
        // 数据名
        name: 'foo',
        // 线条样式
        lineStyle: {}
    }
]

实际上在传入的时候,参考官网用的是第二种,其实就是data数组里面包含多个对象,每个对象都对应有自己的coords(轨迹经纬度数组),value/name/lineStytle。只不过需要注意的是,当coords里的经纬度点个数大于2时,需要在series下指定polyline: true.

渲染部分

mapbox

mapbox部分有几个注意点:
1. 在index页引入mapbox的sdk:

<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
  1. 在效果实现的js文件引入mapbox asses token, 例如:
mapboxgl.accessToken = 'pk.eyJ1IjoieWM5MDc2MTYwMDQiLCJhIjoiY2o5d2E2YmNpN2dncTJ4cGFtemoyaXltYSJ9.zNHPyCI5PV6xGnvajvlTNg';

var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    mapbox: {
        center: [174.7838400879,-36.8551296749],
        zoom: 5.2,
        // pitch: 50,
        // bearing: -50,
        altitudeScale: 10000000,
        style: 'mapbox://styles/mapbox/dark-v9',
        postEffect: {
            enable: true,
            FXAA: {
                enable: true
            }
        },
        light: {
            main: {
                intensity: 1,
                shadow: true,
                shadowQuality: 'high'
            },
            ambient: {
                intensity: 0.
            }
        }
    },
    series: [{
        ...
    }]
})

上面option里mapbox需要注意几点,style: 'mapbox://styles/mapbox/dark-v9'可以在mapbox官网看,或者自己定义一些地图样式,altitudeScale官网解释是海拔高度,实际在设置时可以指定大一点,避免地图放大时被覆盖或者显示不出,另外 mapbox的access token请自己申请一下,有额度限制好像,echarts官网的就是因为那个access token额度满了显示不出效果的。

echarts-gl

相比于echarts3.x,此次echarts-gl更加是一场视觉盛宴,完全可以直接用于大屏大数据展示了(心态有点浮夸了,莫怪),关于这个交通血脉图,其实直接看series.lines3D就可以,没什么难点。

series: [{
        type: 'lines3D',

        coordinateSystem: 'mapbox',

        effect: {
            show: true,
            constantSpeed: 5,
            trailWidth: 1,
            trailLength: 10,
            trailOpacity: 1,
            spotIntensity: 2
        },

        blendMode: 'lighter',

        polyline: true,

        lineStyle: {
            width: 0.1,
            color: 'rgb(200, 40, 0)',
            opacity: 0.
        },

        data: {
            count: function() {
                return taxiRoutes.length;
            },
            getItem: function(idx) {
                return taxiRoutes[idx]
            }
        }
    }]

几点需要注意的是,coordinateSystem可以直接指定mapbox,polyline需设置为true(官网已经说得很清楚了),blendMode设置为lighter时当多条线路叠加可以高亮。
大概就这些。

一些tips

本来想写一些小技巧,发现都说过了,那就这样吧,祝来年分享更多精彩的事物。

版权声明:本文为原创,转载后劳烦留言告知

ECharts地图详解

$(function() {    var option = {               title : {                   // 是否显示                 ...
  • t0404
  • t0404
  • 2017年01月03日 11:12
  • 473

echarts-gl快速上手

你把echarts.min.js echarts-gl.min.js 下载地址http://echarts.baidu.com/download.html   这两个js文件从e...
  • chinafire525
  • chinafire525
  • 2017年09月15日 14:34
  • 1686

echarts-gl学习笔记

在做毕设的时候老师提了一个需求,做一个3D的飞行轨迹展示视频,就像 http://422south.com/work/nats-future-air-traffic-patterns-for-lo...
  • l627757940
  • l627757940
  • 2017年05月07日 20:38
  • 1031

echarts mapbox地图案例

  • 2017年12月12日 14:11
  • 4.43MB
  • 下载

echarts3 + 百度地图API展示自定义地图

最近接到一个任务,在前段展示地图,要求是底图要暗色的。目前国内提供地图服务比较知名的也就是高德、百度、天地图。前两个如果商用貌似是要收费的,天地图则完全免费。另外一个需求是要在地图上面根据某些点的值来...
  • qq451354
  • qq451354
  • 2017年03月06日 19:47
  • 4474

在github下载的ECharts-GL打开一片黑色

只需要打开F12就明白了,可能是官方的疏漏吧,居然差一个js文件。去搞一个弄进去就行了...
  • qq_26566331
  • qq_26566331
  • 2017年04月21日 13:34
  • 2811

Mapbox-GL样式参考

MapboxGL最近发布了新的版本(0.11.0),其样式文件也由版本7升级到了版本8,如果升级了mapbox-gl模块,那么以前版本的样式文件已经无法使用,对于新的版本主要更改有以下几个方面: ①...
  • wan_yanyan528
  • wan_yanyan528
  • 2015年09月15日 11:42
  • 4149

[Mapbox GL]使用3D展示建筑物

使用extrusion展示3D建筑物高度 body { margin:0; padding:0; } ...
  • naipeng
  • naipeng
  • 2016年12月22日 18:10
  • 2400

基于WebGL的大数据二三维可视化--uber的deck.gl介绍

deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层,GPU渲染的高性能,React和Mapbox GL集成,结合地理信息数据(GPS)的特点。下...
  • future_todo
  • future_todo
  • 2017年06月02日 18:38
  • 3045

从Mapbox的开源工具看Web GIS的发展

mapbox一直是我很喜欢的公司之一。它的自由开放态度,前沿研究方向,让很多GISer眼前一亮,让他们找到学习或者工作的方向。 其实,mapbox.js是leaflet.js的一个超集,所以不要再问...
  • happyduoduo1
  • happyduoduo1
  • 2016年06月29日 10:33
  • 4151
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:可视化篇:mapbox + echarts-gl 展示血脉交通
举报原因:
原因补充:

(最多只允许输入30个字)