Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
