Visualization: Echarts Personal trajectory visualization implementation

Written in the first
Here is the "visual chapter: Renderings" in the 8th, 9 of the implementation of the description

which
1. Personal trajectory visualization is echart through the call Baidu Map API implementation, about echarts how to call Baidu Map API, please refer to the previous article "Echarts Introduction Baidu Map"
2. The personal traces shown in the image below are virtual data
3. This article only do single-user track display, not in-depth discussion of the bulk user trajectory visualization and optimization
4. Using the tool as follows: Echarts 1.Echart Release Notes and modular file Introduction Baidu Search can see there is echart2 and Echart3, because ECHART3 has not provided a sample of Baidu map instantiation (if forcibly used Echart3, Need to write the relevant JS script yourself), so the following is based on Echart2, the download address is: Http://echarts.baidu.com/build/echarts-2.2.7.zip The introduction of modular files is mainly main.js,map.js and echart.js

Require.config ({
        paths: {
            echarts: "Echarts",
        },
    });

    Require (
    [
        "Echarts",
        "Echarts/chart/main",
        "Echarts/chart/map",    
    ],

among them:
Main.js file corresponding to the Echart2 compressed package directory under Download ECHARTS-2.2.7\EXTENSION\BMAP\SRC, the file is Yang Yi (Echart team) written by Baidu Map extension file on the Echart
Map.js file corresponding directory is: Build\dist\chart, and then declare once, the introduction of Baidu map, Dist directory should be copied to the corresponding directory of development files
Echarts.js also exists in the dist file
See the article "Echarts Introduction Baidu Map" in detail here. 2. Reflection and realization of personal track display 2.1 for visualization of personal trajectories, the initial assumptions are:

On the Baidu map, with the time axis timeline, with the change of time the user trajectory of the evolution, and later in the write with Echart found timeline property always corresponds to the options list, can not render options under the user's trajectory parameter list, and then later with R Remap package author to further confirm the conversation, Echart in timeline there is no way to render on Baidu map, here should know Echart team, the following is not timeline use do too much explanation.
In addition to the above different time and different locations, in order to better show the meaning of the track line, but also need to do further work, that is, different times at different locations and different events, so that the personal trajectory can be more fit to display.
The final effect is as follows: working scene:

Peer Shopping:

Echart Realization of 2.2 human trajectory 2.2.1 Build a container for the instance of Baidu map background

 
Margin set to 0 and the browser without boundary fusion, div attribute container ID, the following JS script needs to use this attribute, and the echart filled into the container, of course, Div can have more than one, so you can populate multiple Echart instances.
After instantiation, the Echart API can be called in the JS script:

        var bmapext = new Bmapextension ($ (' #main ') [0], BMap, echarts,{
            enablemapclick:false
        });
        var map = Bmapext.getmap ();
        var container = Bmapext.getechartscontainer ();

        var startPoint = {
            x:113.328755,//Tianhe City 
            y:23.135588
        };

        var point = new Bmap.point (startpoint.x, startpoint.y);
        Map.centerandzoom (point, N);
        Map.enablescrollwheelzoom (TRUE);
 
The methods in the above are encapsulated in Main.js, when using the above image call, where the CSS style corresponding to the previous container size, bmapext for the initialization of the map object, specifically to see Main.js source code, the middle Getmap, Getechartscontainer to get the map instance and Echart instance object, Bmap.point defines the center point of the currently open map, and the bottom two functions define the zoom level of the map and whether it can be scrolled. 2.2.2 Change Baidu map background

Here can be modified according to the needs of their own, you can modify the Map.setmapstyle function in the Baidu map Stylejson to achieve the goal, specifically as follows:
There are two ways to define your own Stylejson: 1. by http://developer.baidu.com/map/custom/list.htm

The address for Baidu to open the map of the custom address, the whole process of the mouse can complete its own template, the final export JSON file in their own development document reference. 2. Modify the following code

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 ': ' #015B '}}, {' Featuretype ': ' Highway ', '
ElementType ': ' Labels ',                    ' Stylers ': {' visibility ': ' Off '}}, { ' Featuretype ': ' Arterial ', ' ElementType ': ' Geometry ', ' styler S ': {' color ': ' #003051 '}}, {' Featuretyp E ': ' Arterial ', ' elementtype ': ' Labels ', ' stylers ': {' Visibil
                    ity ': ' 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 ', ' stylers ': { ' Color ': ' #313131 '}}, {' Featuretype ': ' All ', ' ElementType ': ' Labels.text.fill ', ' stylers ': {' color ': ' #F   
                    FFFFF '}}, {' Featuretype ': ' Manmade ', 
          ' ElementType ': ' Geometry ', ' stylers ': {' visibility ': ' Off '}
                    }, {' Featuretype ': ' Manmade ', ' elementtype ': ' Labels ',
                    ' Stylers ': {' visibility ': ' Off '}}, {
                    ' Featuretype ': ' Local ', ' ElementType ': ' Geometry ', ' stylers ': { ' Visibility ': ' Off '}, {' Featuretype ': ' Loca
                    L' ElementType ': ' Labels ', ' stylers ': {' visibility ': ' Off '}
                    }, {' Featuretype ': ' Subway ', ' ElementType ': ' Geometry ',
                    ' Stylers ': {' lightness ':-65}}, {
                              ' Featuretype ': ' Railway ', ' ElementType ': ' All ', ' stylers ': { ' Lightness ': -40}}, {' Featuretyp
                              E ': ' Boundary ', ' ElementType ': ' Geometry ', ' stylers ': {
                    ' Color ': ' #8b8787 ', ' weight ': ' 1 ', ' lightness ':-29 }
          }
    ]
 
The following changes are compared before and after:
before modification

after modification
2.2.3 Echart Intervention 1. Option Object

All of the attribute parameters in the Echart are stored in the option object, and finally the option is instantiated by the SetOption method, in part as follows:


Specific parameter settings reference Echart2 configuration document: Http://echarts.baidu.com/echarts2/doc/doc.html 2. Timeline Properties

The Timeline property is the outermost of the option object, and the array defined by the data parameter under the Timeline property corresponds to each {} parameter column under the Options property in the option object, since Echart does not support timeline on the Baidu map, Therefore no longer elaborate. 3. Legend Properties

The Legend property defines a different {} array under the series, which is still the same number in the options under Opion. Specific performance for different labels to control the different graphics map, as shown below:


The corresponding legend parameters for the above diagram are as follows:

    color:[' Gold ', ' red '],
    legend:{
        data:[' work track (a) ', ' Shopping trail (b, c) ',
        x: ' Left ',
        Orient: ' Vertical ',
        padding:[30,15,15,30],
        textstyle:{
            fontsize:17,
            color: ' RGB (204,204,204) ',
        },
        selected:{
            ' work track (A) ': true,
            ' shopping trail (b, C) ': false,
        },
        Selectedmode: ' Single ',
    },
 
The two objects defined in the data array correspond to the two arrays in the series, respectively:
4. Geocoord Properties

This property corresponds to the latitude and longitude of the instanced point, the custom Chinese name always seems to be wrong, when there is a batch of points, it is suggested to change the name of the English + number, in addition Geocoord control the following Markline and Markpoint, and Geocoord and Markline, Markpoint attribute peer.

      geocoord:{
                 ' p1 ': [113.317568,23.135959],
                 ' P2 ': [113.317783,23.135278],
                 ' p3 ': [113.321489,23.135432],
                 ' P4 ': [113.321525,23.135282],
                 ' P5 ': [113.321592,23.13517],
                 ' P6 ': [113.321799,23.135083],
                 ' P7 ': [ 113.322158,23.135141],
                 ' P8 ': [113.322374,23.135378],
                 ' p9 ': [113.321992,23.135847],
                 ' P10 ': [ 113.322243,23.13949],
                 ' p11 ': [113.322396,23.1397],
                 ' p12 ': [113.328163,23.13943],
                 ' p13 ': [ 113.334945,23.139033],
                 ' p14 ': [113.334658,23.133217],
                 ' P15 ': [113.33313,23.13222],
                 ' p16 ': [ 113.328755, 23.137588]
    },
 
5. Markline,markpoint Properties 
 Here the Markline parameter is the key to realizing the trajectory, where the data parameter controls the migration direction of the trajectory, the first name represents the starting point, the second represents the end point, and other properties such as Color,value can be added to control the color of the line and the size of the point. The 
 Markpoint parameter is the effect of implementing the relevant point, where the data parameter controls the corresponding point, and the other parameters are similar to Markline. 

     Markline: {symbol:[' none ', ' Arrow '], symbolsize:[' 0 ', ' 0.1 '], smooth:true, smooth:0, Effect: {show:true, scalesize:1, period:30, color: ' #fff ', SHADOWBL
              Ur:10}, ItemStyle: {color: ' red ', Normal: {color:function (param) {
              return (Param.data[0].value.colorvalue);
                  }, Borderwidth:3, LineStyle: {type: ' solid ', width:3, Shadowblur:10}, Label:{show:false,value: ' Tianhe City '}}, data : [[{name: ' P1 '}, {name: ' P2 ', Value:{colorvalue: ' Gold '}], [{name: ' P2 '}, {name: ' P3 ', value:{ ColorValue: ' Gold '}], [{name: ' P3 '}, {name: ' P4 ', Value:{colorvalue: ' Gold '}}], [{name: ' P4 '}, {name: ' P5 ', Value:{colorvalue: ' Gold '}], [{name: ' P5 '}, {name: ' P6 ', VALue:{colorvalue: ' Gold '}], [{name: ' P6 '}, {name: ' P7 ', Value:{colorvalue: ' Gold '}}], [{name: ' P
                7 '}, {name: ' P8 ', Value:{colorvalue: ' Gold '}], [{name: ' P8 '}, {name: ' P9 ', Value:{colorvalue: ' Gold '}], [{name: ' P9 '}, {name: ' P10 ', Value:{colorvalue: ' Gold '}], [{name: ' P10 '}, {name: ' P11 ', value:{colorval UE: ' Gold '}], [{name: ' P11 '}, {name: ' P12 ', Value:{colorvalue: ' Gold '}} ', [{name: ' P12 '}, {name
                : ' P13 ', Value:{colorvalue: ' Gold '}], [{name: ' P13 '}, {name: ' P14 ', Value:{colorvalue: ' Gold '}}],
        [{name: ' P14 '}, {name: ' P15 ', Value:{colorvalue: ' Gold '}]] },
 
 Above is markline detail, below is markpoint detail: 
 

      markpoint:{symbol: ' Image://./image/location.svg ', Symbolsize:function (v) {R Eturn V/5}, effect:{show:true, type: ' Bounce ', PE
                        Riod:3,}, itemstyle:{normal:{label:{ Show:false,},}, emphasis:{Labe
               l:{Show:false,},},}, data:[ {name: ' P1 ', value:50, tooltip:{formatter: ' Time:8:30am<br/> depart from: Zhonghai Jincheng South
                       Yuan '},}, {name: ' p16 ', value:100, tooltip:{
               Formatter: ' Tianhe City <br/> longitude:113.328755<br/> Latitude: 23.137588 '}, {name: ' P15 ', ValUE:50, tooltip:{formatter: ' Time:10:00am<br/> destination: Freego Ying Long Plaza ' },
               },
            ],
        },
 
Where symbol is an additional downloaded picture, you can customize the point icon. 6. ToolTip Property

This property controls the hover cue box, which corresponds to different things in different locations at different times above, where the ToolTip can be placed in the Markpoint data array:

            data:[
               {name: ' P1 ', value:50,
                   tooltip:{
                       formatter: ' Time:8:30am<br/> Departure: CSCL Nanyuan '
                   }
               ,
               {name: ' p16 ', value:100,
                   tooltip:{
                       formatter: ' Tianhe City <br/> longitude:113.328755<br/> Latitude: 23.137588 '  
                   },
               },
               {name: ' P15 ', value:50,
                   tooltip:{
                       formatter: ' Time:10:00am<br/> destination: Freego Ying Lung Plaza '
                   },
               },
            ],
 
It can also be placed at the outermost layer of the option object, with the Markline,markpoint peer:

    ToolTip: {
        show:true,
        trigger: ' Item ',
        hidedelay:4000,
        formatter:function (d) {
            var jw= ' Longitude: ' + d.value[0]+ ' <br/> '
                jw + = ' Latitude: ' +d.value[1]
            return JW       
        }
    },
 
This method controls the volume of the Prompt box, if you want to do relatively free customization, it is recommended to use the first method of ToolTip. 7. Other Properties

See the code at the end of this article. 2.3 Developing the document structure

The total directory:

Echars Directory:

Echarts/chart Directory:

JS Directory:
2.4 Implementing the full code:

home £ º

<