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————————