Visualization: Mapbox + ECHARTS-GL show Blood traffic

Preface
Long time not with the new, even if this hobby is to be busy work to kill off.
17 is almost over, this should be the end of this year, hope to share more interesting things next year.

which
1.echarts is used for 3.8.0, ECHARTS-GL with the 1.0.0-beta.
2. Need Mapbox Accstoken, https://www.mapbox.com/maps/here to register a number, and then configure some map style, enter the account has an access tokens, rendering the map needs this thing.

Words do not say, first above, the approximate effect is this, recommended reference Http://gallery.echartsjs.com/editor.html?c=xBkyhntOEW:

Data Section

Refer to the Echarts official website example, the format of the data section is about this:

Data: [
  {road_line: ' 168.386,-44.8495;168.386,-44.8464;168.386,-44.8464 '},
  {road_line: ' ... '},
  ...
]

Of course, this is not the format that is passed in when the line is rendered, crossing Web Echarts document Gl:series[i]-lines3d.data[i], (Here I do the porter):

An array of data for a three-dimensional flight graph, where each item of data can be a set of coordinates containing the starting and ending points. Supports more than two coordinates when Polyline is set to true. As follows:

Data: [
    [
        [120, 66, 1],//latitude and longitude of the starting point and altitude coordinates
        [122,, 2]  //end of latitude and longitude and altitude coordinates
    ]
]

There are times when you need to configure the name of a data item or a separate style. The latitude and longitude coordinates need to be written to the Coords property. As follows:

Data: [
    {coords: [[] [[]],
        [122,]],
        //Data value
        value:10,
        //Data name
        name: ' foo ',
        //Line style
        LineStyle: {}
    }
]

In fact, when the introduction, the reference website is the second, in fact, the data array contains more than one object, each object should have its own coords (track latitude and longitude of the degree group), Value/name/linestytle. Just note that when the number of latitude and longitude points in the coords is greater than 2 o'clock, you need to specify Polyline:true under series. Rendering Section Mapbox

The Mapbox section has several points to note:
1. Introduce the Mapbox SDK on the index page:

<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 '/>

Introduce Mapbox asses tokens in the effect-implemented JS file, for example:

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 ', Posteff ECT: {enable:true, FXAA: {enable:true}}, Light:
            {main: {intensity:1, shadow:true, shadowquality: ' High ' }, Ambient: {intensity:0.}}}, series: [{..
    . }]
})

The above option Mapbox need to note a few points, style: ' mapbox://styles/mapbox/ Dark-v9 ' can be seen on the Mapbox official website, or define some of their own map style, Altitudescale official website interpretation is the altitude, the actual setting can specify a larger point, to avoid the map to be overwritten when zoomed in or not show, in addition Mapbox access Token please apply for yourself, there is a quota limit as if, Echarts official website is because that access token quota is full and show no effect. ECHARTS-GL

Compared to echarts3.x, this ECHARTS-GL more is a visual feast, can be directly used for large-screen big data display (mentality a bit pompous, Mo Strange), about this traffic vein map, actually directly see Series.lines3d can, no difficulty.

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 (+, 0) ',
            opacity:0.
        },

        data: {
            count:function () {
                return taxiroutes.length;
            },
            getitem:function (idx) {
                Return TAXIROUTES[IDX]}}
    ]

A few points to note is that CoordinateSystem can directly specify mapbox,polyline to be set to True (the official website has been made clear), Blendmode set to lighter when multiple lines overlay can be highlighted.
That's about it. some tips

Originally wanted to write some small tricks, found all said, so it is, I wish to share more wonderful things in the coming year.