1. Realize the functions:

A city map showing Qinghemen District, Fuxin City. Because the urban geographic information required by Echarts was not found. Need to make one myself.

Second, the tools to be used:

1. Download the regional json geographic information file that Echarts needs to use: DataV.GeoAtlas geographic gadget series

2. Online editing of regional json geographic information files: geojson.io | powered by Mapbox

3. Steps:

1. On the Baidu map, find the location where the echart area needs to be drawn

For example, Yimatu Town, Fuxin Mongolian Autonomous County, Fuxin City and Fluorine Chemical Industrial Park

2. Go to geojson.io and draw the area on our map

First switch to the "Satellite View", and then select the "Circle Tool".

3. Select the area to be drawn

step1: After drawing the area where we want to produce echarts geographic information on the map:

step2: Select the "Edit button" to enter the edit mode:

Note, the save button, every time you modify the coordinate points on the map, you must click save, otherwise the edited information will not take effect.

4. Start dragging the coordinate points on the map to make the coordinate points fall on the desired area

The coordinate point drawing of an area is completed:

When dragging coordinate points, we can zoom in on the map for more precise dragging, and we can also delete redundant coordinate points and add missing coordinate points. Please experience the specific usage skills yourself!

5. Complete our coordinate drawing

Be sure to click the "Save button" after you are done. Every time you modify the coordinate points on the map, you must click Save, otherwise the edited information will not take effect.

6. Add attributes to the coordinate information of the produced area, such as the name displayed on the map and the ID of the parent node

Please refer to the meaning of each attribute of geographic information introduced in the article below to fill in each attribute value.

Visual display of Echarts maps in multiple regions_echarts map of Tianjin_IT Xiaowu's blog-CSDN blog Echarts visual display of maps in multiple regions. How to display different provinces, different cities, and different counties on echart at the same time https://blog.csdn.net/speedwalkman/article/details/129622954

7. Integrate the newly produced regional coordinate information with the city coordinate information

This step is also done by modifying the value of each attribute of GeoJson geographic information, please refer to the above article.

8. Final download

After saving successfully, select "GeoJSON" to download the coordinate data.

Echarts custom map display area, which can display areas such as parks, communities, schools, etc.