Summary of using map in Echart

In the recent example of the Echart bus line direction, the development of the drainage network and sewage network to map, at the same time the map needs to overlay the discharge, pollution sources, sewage treatment plants and other elements. Since no previous use of Echart, especially Echart map function, pondering the trial for a long time, finally understand the map above, line and point elements of the loading and display methods, summarized below.

1, the load of the bottom map

The general map needs the bottom chart, echart the data source of the bottom chart, there are three ways, respectively as follows:

(1) Baidu map. need to introduce the Baidu Map API, the specific use of the method see official example (Http://echarts.baidu.com/examples/editor.html?c=lines-bmap-effect, as shown in the left), At this point in the other element layer introduced in the series, the CoordinateSystem value must be set to ' Bmap ', which is the data of the other layer, to the Bmap map as the reference of the space coordinate system, the following right figure:

(2) JSON and Registermap methods. in this way, the base graph data is stored in JSON (GEOJSON) format, in a specific Geojson format (reference http://geojson.org/) and as a method for converting to Geojson (Mapshaper, use reference http:// blog.csdn.net/column/details/14830.html) know for themselves. after obtaining data in JSON format, use REGISTERMAP for manual registration to give the map a name . The method used in Echart can refer to the official example (HTTP://ECHARTS.BAIDU.COM/EXAMPLES/EDITOR.HTML?C=MAP-USA), themap in series for the user to register their own maps , The main points are as follows. Note the problem: Registermap can only register the JSON data of the surface elements, the point, the line is invalid.

(3) <script and Geo methods. this way of the bottom chart data, you can directly use the script tag to introduce a JS file containing data, the introduction will automatically register the map name and data, such as <script src=. /.. /data/china.js "></script>, after the introduction of Echart automatic map registration, can refer to the Echart official example (http://www.echartsjs.com/gallery/ EDITOR.HTML?C=SCATTER-MAP), use the following points. Note the problem: the CoordinateSystem in series must be set to GEO, where the coordinate system reference is consistent with the map defined in GEO; the Geo method is only suitable for surface map data, and it is not valid for point and line element data.

2, the load of line elements

The load of the line elements, generally through the series of type set to lines in the way to achieve (specific reference http://echarts.baidu.com/option.html#series-lines), Parameter CoordinateSystem set to BMAP (Baidu map), Geo or REGISTERMAP manually registered map name.

3, the load of the point factor

The loading of the point element is generally set to scatter or Effectscatter by series type (specific reference http://echarts.baidu.com/option.html#series-scatter and http:// Echarts.baidu.com/option.html#series-effectscatter), the parameter CoordinateSystem set to BMAP (Baidu map), Geo or REGISTERMAP manually registered map name.

The above is a summary of the use of maps in the Echart, inappropriate places also please point out in time, thank you.