A technique to let echarts map of China contain the outline of provinces and cities

Background knowledge and application introduction

This article mainly introduces a trickery method that uses the Echarts map component, which stems from the problems encountered in the actual requirement, which is not commonly used in this technique. People who have a front-end foundation and who have an understanding of echarts can basically read this article.

Perhaps the official also provided the overall map library, but may have limited personal ability, and did not find relevant information or other solutions, if you know the park friends please tell me.

Echarts, a pure Javascript chart library that runs smoothly on PCs and mobile devices, is compatible with most current browsers (Ie8/9/10/11,chrome,firefox,safari, etc.) and relies on lightweight Canvas class libraries Zrender provides intuitive, vivid, interactive and highly customizable data visualization charts.

The sentence was excerpted from the official document of Echarts. Echarts supports many chart types, and when used in the map components, the official provides a lot of map library data, each map data provides JS and JSON two ways of storage: http://echarts.baidu.com/download-map.html

If the link fails, go to echarts official website to find it.

Problems encountered

Baidu provides the map components to support zooming in and out, and I met the demand is that the Chinese map can be enlarged after the map in China to see the outline of the province inside the information. Whether it is the preview above or the actual effect of the map, are: The world map has all the outline of the country, but not in each country outline information; China map has the outline of the provincial administrative district, but there is no further outline information in the provincial administrative districts.

Examples of specific points, if loaded are Chinese map data, zoomed in as follows:

The figure can be seen in the outline of Jiangsu province and Shanghai, but want to look further in the city of Jiangsu Province or the outline of each district in Shanghai that can not be done, unless re-loaded into the provinces and cities of the map, but this is out of China's large map outline.

Solution Solutions

I didn't find another solution. Finally, to study the map data itself, here I used the map data of Shanghai, respectively opened China.json and Shanghai.json, these two files can be downloaded from the Echarts Map Library data page. Compare the JSON data structures in them. (Here I use the online JSON tool website json.cn)

(On the left is the JSON raw data, the right is the collapsed data structure)

China.json

Shanghai.json

From the two graphs can be found that the data is similar, of which China.json features has 34 data, it should represent China's 34 provincial administrative districts; Shanghai.json's features has 17 data, representing 17 regions in Shanghai.

So, I don't care what the structure of each item in features is, merge the two JSON (features data merge a bit).

Now is 51 data, then load this map data, enlarge the Shanghai area to see the effect:

It seems to be all. (in addition to the edge, the edge problem is the Shanghai map and the Chinese map in Shanghai is not exactly the reason why it does not overlap) (Text-intensive problem first ignore it, can be avoided by other means)

Similarly, if you want to get information about other provinces and cities, you need to download map data from other provinces and cities and merge them into China.json.

While this solves the problem, there are some drawbacks:

1. Map data will be too large

2. Partial edge overlap problem

3. Multi-level administrative layers are merged into the first tier (perhaps a merit)

A technique to let echarts map of China contain the outline of provinces and cities