echarts 根据geojson 数据绘制区域图(精确到镇)
阅读原文时间:2023年07月08日阅读:1

步骤: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————————