echarts 根据geojson 数据绘制区域图（精确到镇） |
您所在的位置：网站首页 › echarts地图数据json › echarts 根据geojson 数据绘制区域图（精确到镇） |
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代码: //必须设置宽高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}{c} (p / km2)' */ formatter: function(params) { //用于显示多个数据 var res = params.name + ''; 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 + ''; } } } 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————————
|
【本文地址】
今日新闻 |
推荐新闻 |