echarts 根据geojson 数据绘制区域图（精确到镇）

2021-11-28 06:20:19

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

echarts 根据geojson 数据绘制区域图（精确到镇）

码农公寓

相关文章