SHP data to Geojson format as echarts map extension file

Source: Internet
Author: User

In the project, the chart information is displayed using the Eharts chart style, need to use the map display method, but the existing map does not meet the individual needs of the project, the use of map images is neither flexible nor beautiful. Echarts map extension file using the Geojson format, there are many ways to make, I choose to convert the SHP data into the Geojson format, because you can use ArcMap to create their own personalized SHP data, can be flexible to meet the needs of the project Geojson data, The production method is as follows:

1, the production of SHP data. People in the geographic information industry know more about data editing in ArcGIS and SHP formats, and are not simply clear and no longer elaborate.

2, then use the resulting SHP data conversion to Geojson format, conversion methods and tools are also many kinds, I use an online conversion tool for data conversion, address is: http://mapshaper.org/

3. Click Select to choose the SHP data you just made.

4. Click Import to display the data.

5, click Export, select Geojson format for data export.

6. The exported Geojson data can be obtained in echarts to customize the map display.

<meta charset= "Utf-8" >
<title>MyMap</title>
<body>
<div id= "main" style= "height:400px" ></div>
<script src= "Js/echarts.js" ></script>
<script src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" >
$.get ("Js/shandong.json", function (map) {
var mychart = echarts.init (document.getElementById (' main '));
Echarts.registermap ("Shandong", map);
var option = {
Series: [{
Map: "Shandong",
Type: "Map"
} ]
};
mychart.setoption (option);
});
</script>

Display interface:

7, there is a point to note that the map displayed is not the same as the original data, the map is scaled, if the map width of the narrower data looks ugly, because the map display settings in Echarts has a Aspectscale property, the length-to-width ratio by default is 0.75. Change to 1 is OK.

<meta charset= "Utf-8" >
<title>MyMap</title>
<body>
<div id= "main" style= "height:400px" ></div>
<script src= "Js/echarts.js" ></script>
<script src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" >
$.get ("Js/shandong.json", function (map) {
var mychart = echarts.init (document.getElementById (' main '));
Echarts.registermap ("Shandong", map);
var option = {
Series: [{
Map: "Shandong",
Type: "Map",
aspectscale:1.0//Aspect ratio. The default is: 0.75, so the map deforms
} ]
};
mychart.setoption (option);
});
</script>

8, after the revised map display:

9, good, finished, behind can be based on customer demand for a variety of landscaping, application.

SHP data to Geojson format as echarts map extension file

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.