echarts实现在市级行政区点击县级行政区，显示单个县级行政区地图数据

一渊之隔

已于 2024-07-23 10:45:07 修改

阅读量250

点赞数 5

文章标签： echarts 前端 javascript

于 2024-07-23 10:44:20 首次发布

本文链接：https://blog.csdn.net/qq_37263478/article/details/131792167

版权

因需兼容ie，此处所有变量声明都用var。如无需支持，可另做let修改。这里以常州市为例,我们可以去阿里云提供的地理工具去截取地图json数据DataV.GeoAtlas地理小工具系列

点击所选区域，右侧会对应显示json数据，再次点击右侧红框内的第一个按钮即可复制南通市的geoJson数据，同时按照此方法，把常州市内的所有区县的地图数据都保存为单个json文件，

html主要代码


 <div class="map" id="map"></div>//此处为常州大市的图表
            <div class="map" id="map_ct" style="display: none"></div>//单个区县行

<!--中文转拼音js-->
<script src="../static/js/pinyin4js.js"></script>

js方法：需要注意的是初始化市级地图必须要销毁click事件，同时切换到二级行政区必须要先清空图表信息，否则会有上一次的地图残影闪烁，此处点击获取二级行政区另外使用了pinyin4js.js中文转拼音的插件，点击即可免费下载使用，因不需要声调，只需要拼音来获取对应的geoJson数据，即可

function echarts(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('map'));

    var option;

    var convertData = function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    // value: geoCoord.concat(0,0).concat(data[i].value),
                    value: geoCoord,
                    itemStyle: {
                        color: 'white'
                    }
                });
            }
        }
        return res;
    };

    myChart.showLoading();
        $.get('../static/js/bdcDp/changzhouMap/changzhou.json', function (geoJson) {//此处地址为所保存的南通市的json
        myChart.hideLoading();
        myChart.hideLoading();
        echarts.registerMap('changzhou', geoJson);
        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                }
            },
            geo: {
                map: 'nantong',
                roam: false, // 不开启缩放和平移
                zoom: 1, // 视角缩放比例
                top: 50,
                aspectScale: 0.8,
                label: {
                    normal: {
                        show: false,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#2282d6',
                        borderColor: '#2282d6',
                        borderWidth: 1,
                        borderType: 'solid',
                        opacity: 0.8,
                        shadowBlur: 10,
                        shadowColor: '#080D15',
                        shadowOffsetX: 5,
                        shadowOffsetY: 5
                    },
                    emphasis: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#fff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#fff' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                }
            },
            series: [{
                type: 'map',
                geoIndex: 1,
                aspectScale: 0.8,
                map: 'changzhou',
                zoom: 1,
                top: 42,
                roam: false,
                nameProperty: 'name',
                colorBy: 'series',
                data:data,
                itemStyle: {
                    borderColor: '#3dd4ff',
                    borderWidth: '2',
                    // shadowBlur: 20, //软阴影值
                    shadowColor: '#95d3fd',
                    shadowOffsetX: 0,
                    // shadowOffsetY: 0,
                    emphasis: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#2332c5' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2332c5' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        label: {
                            show: false
                        }
                    }
                }
            }, {
                name: 'city',
                type: 'effectScatter',
                rippleEffect: {
                    // 涟漪特效相关配置。
                    scale: 4 // 控制涟漪大小
                },
                colorBy: 'series',
                coordinateSystem: 'geo',
                data: convertData(data),
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    fontSize:18,
                    color: '#2E9FF6'
                },
                itemStyle: {
                    color: '#ffffff',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                tooltip: {
                    formatter: '{b0}'
                }
            }]
        });
    });
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option)
    setTimeout(function () {
        myChart.resize();
    }, 200)
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    //销毁点击事件
    myChart.off('click');
    myChart.on("click", function (params) {
         qxmc = params.name;
         color =  params.color;
        // 显示返回按钮
        $(".gobackMap").show();//此处用于返回一级市区大地图
    });
}

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('map_ct'));
    //清空图表信息 否则会有上一次地图的残影闪烁
    myChart.clear();
    var option;
    var geoCoordMap = {
        天宁区: [120.11, 31.84],
        新北区: [119.9, 31.92],
        钟楼区: [119.85, 31.81],
        金坛区: [119.5, 31.74],
        武进区: [119.91, 31.6],
        溧阳市: [119.39, 31.46]
    };
    //匹配地图坐标值
    var convertData = function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            //取传入的区县值
            if ( !isNullOrEmpty(geoCoord) &&data[i].name==qxmc) {
                res.push({
                    name: data[i].name,
                    value: geoCoord,
                    itemStyle: {
                        color: 'white'
                    }
                });
            }
        }
        return res;
    };
    //判断返回的区县地图 此处调用了pinyin4js.js中文转拼音的插件 qxmc是点击地图获取的区县名称 后面是格式
    var area = PinyinHelper.convertToPinyinString(qxmc,'', PinyinFormat.WITHOUT_TONE)
    // myChart.showLoading();
    $.get('../static/js/bdcDp/changzhouMap/' + area + '.json', function (geoJson) {
        // myChart.hideLoading();
        //展示地图
        echarts.registerMap('changzhou', geoJson);
        //地图配置
        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                formatter: function formatter(params) {
//如无需显示该处代码可忽略，此处多为显示对应区县的某些数据
                    var res = params.name + '<br/>';
                    var myseries = params.data.value;
                    if (isNotBlank(myseries)) {
                        res += '总面积:' + myseries[0] + '万㎡' + '<br/>' + '套数:' + myseries[1] + '<br/>';
                    } else {
                        res += '总面积:' + 0 + '万㎡' + '<br/>' + '套数:' + 0 + '<br/>';
                    }
                    return res;
                },
                textStyle: {
                    fontFamily: "Microsoft YaHei",
                    fontSize:18
                }
            },
            geo: {
                map: 'changzhou',
                roam: false, // 不开启缩放和平移
                zoom: 1, // 视角缩放比例
                top: 50,
                aspectScale: 0.8,
                label: {
                    normal: {
                        show: false,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#2282d6',
                        borderColor: '#2282d6',
                        borderWidth: 1,
                        borderType: 'solid',
                        opacity: 0.8,
                        shadowBlur: 10,
                        shadowColor: '#080D15',
                        shadowOffsetX: 5,
                        shadowOffsetY: 5
                    },
                    emphasis: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#fff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#fff' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                }
            },
            series: [{
                type: 'map',
                geoIndex: 1,
                aspectScale: 0.8,
                map: 'changzhou',
                zoom: 1,
                top: 42,
                roam: false,
                nameProperty: 'name',
                colorBy: 'series',
                data: data,
                itemStyle: {
                    borderColor: '#3dd4ff',
                    borderWidth: '2',
                    shadowBlur: 20,
                    shadowColor: '#95d3fd',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    emphasis: {
                        areaColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#2332c5' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2332c5' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        label: {
                            show: false
                        }
                    }
                }
            }, {
                name: 'city',
                type: 'effectScatter',
                rippleEffect: {
                    // 涟漪特效相关配置。
                    scale: 4 // 控制涟漪大小
                },
                colorBy: 'series',
                coordinateSystem: 'geo',
                data: convertData(data),
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    fontSize:18,
                    color: '#1292F5'
                },
                itemStyle: {
                    color: '#ffffff',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                tooltip: {
                    formatter: '{b0}'
                }
            }]
        });
    });
    setTimeout(function () {
        myChart.resize();
    }, 200)
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}