正文
echarts 根据geojson 数据绘制区域图（精确到镇）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
步骤：1）先获取区域（县、镇）json数据 ；2）使用echarts 绘制地图；
先上一波效果图（昆明市东川区）
一、获取区域json数据
1、下载工具“水经微图”，
2、下载东川区，以及东川区各个镇的kml文件
选择影像——50M以下
注意：要下载，东川区，东川区下的每个镇；
3、打开网站（ http://geojson.io ），合成地图生成json数据
点击open——file 打开从水径微图下载的文件，选择后缀名为.kml 的文件,从区到镇依次添加，不可以先添加镇
最终合成
然后点击save——geojson 下载文件
4、将json数据复制到目录下并将文件后缀名改为.json
5、要给json数据里面的每一块区域设置名字，
二、使用echarts 将地图绘制出来
html代码:
<div id="allmap" style="width:100%;height:600px"> //必须设置宽高</div>
js 代码：
var chartDom = document.getElementById('allmap');
var myChart = echarts.init(chartDom);
var option; /* myChart.showLoading(); */
var myChart = echarts.init(document.getElementById('allmap'));
$.get('../geojson/map.json', function(geoJson) {
echarts.registerMap('map', geoJson, {});
var option = { tooltip: {
trigger: 'item',
/* formatter: '{b}<br/>{c} (p / km2)' */
formatter: function(params) { //用于显示多个数据
var res = params.name + '<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for (var j = 0; j < myseries[i].data.length; j++) {
if (myseries[i].data[j].name == params.name) {
res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>';
}
}
}
return res;
} },
visualMap: {
min: 500,
max: 50000,
text: ['High', 'Low'],
left: 'right',
realtime: false,
calculable: true,
show:false,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', "#718cef", "#947aad"]
}
},
series: [{
name: '碳排放',
type: 'map',
mapType: 'map',
aspectScale: 0.85, //地图长度比
label: {
normal: {
show: true,
textStyle: {
color: '#000'
}
},
emphasis: {
show: true,
textStyle: {
color: '#333'
}
}
},
data: [{
name: '阿旺镇',
value: 17000
},
/* {name: '阿旺镇', value: 19000}, */
{
name: '红土地镇',
value: 1000
},
{
name: '舍块乡',
value: 5000
},
{
name: '汤丹镇',
value: 20000
},
{
name: '铜都街道',
value: 25000
},
{
name: '拖布卡镇',
value: 30000
},
{
name: '乌龙镇',
value: 18000
},
{
name: '因民镇',
value: 2300
}, ]
}
]
};
myChart.setOption(option);
});
——————end————————
