步骤: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代码:
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————————
手机扫一扫
移动阅读更方便
你可能感兴趣的文章