Demand requirements
Need to add the administrative area of Tianfu District on the map of Sichuan Province
Implement this function
Realize this function step by step
1. Get json data
2. Draw map
3. Import project
1. Obtain the map json data file
You can get it from http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
click geojson to download
2. After downloading the file (mapgeojson), draw the map in this URL http://geojson.io/#map=2/20.0/0.0
If it is a downloaded file (select file in open)
Then draw on the map. After drawing, select GeoJson in Save in the menu bar to save. After saving, modify the file name and ask json format
3. It can be used normally after being introduced into the project
// html
<div id="main" style="width: 800px;height:800px;"></div>
// js
var myChart = echarts.init(document.getElementById('main'));
$.get('./mapgeo.json',function(geoJson){
echarts.registerMap('sc',geoJson,{
});
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
visualMap: {
min: 500,
max: 50000,
text:['High','Low'],
left: 'right',
realtime: false,
calculable: true,
inRange: {
color: ['#313695','#4575b4', '#74add1','#abd9e9','#e0f3f8']
}
},
series: [
{
name: '西城',
type: 'map',
mapType: 'sc',
aspectScale: 0.85, //地图长度比
label: {
normal: {
show: true,
textStyle: {
color: '#000'
}
},
emphasis: {
show: true,
textStyle: {
color: '#333'
}
}
},
data: [
{
name: '天府区', value: 5000},
]
}
]
};
myChart.setOption(option);
});