中国省市县联动地图，可更换成任意省，地图点击省市县下钻。可显示数据并根据数据大小标注不同颜色

最新推荐文章于 2023-07-30 13:05:07 发布
最新推荐文章于 2023-07-30 13:05:07 发布
阅读量1.8k 收藏 15
点赞数
分类专栏： 前端layui 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42197013/article/details/107613855
版权

两类地图预览效果如下：

在这里插入图片描述
在这里插入图片描述

为了保证读者们都能理解透彻

我们先做中国地图省市县三级联动，再根据代码改成某个省的市县联动！

可用于大屏展示地图
地图可以是平面的也可以是3d的，
3d地图请参考我的另一篇文章：实用且牛逼的3D旋转地图上显示柱图，可以更换成任意省市

1. 需要素材
在这里插入图片描述
asset存放地图各省市县的json
css是简单的布局排版
js：index3是湖南省的代码；index-china为全国代码；其余js为插件不用管
我们需要关注的就是这两个js页面；
2.HTML代码与css代码（复制可用）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Echarts 地图钻取</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script src="./js/jquery-3.0.0.min.js"></script>
  <script type="text/javascript" src="./js/index3.js"></script>
  <script type="text/javascript" src="./js/china-main-city-map.js"></script>
  <script type="text/javascript" src="./js/rem.js"></script>
</head>
<body>

<div class='title' >湖南</div>
<div class="box">
  <button class= "backBtn" onclick="backSuperior()">返回上级</button>
  <div id="mapChart" class="chart"></div>
</div>
</body>
</html>

中国的js代码（复制可用）

/* jshint esversion: 6 */
$(function() {//dom加载后执行
    mapChart('mapChart')
})



/**
 * 根据Json里的数据构造Echarts地图所需要的数据
 * @param {} mapJson
 */
function initMapData(mapJson) {
    var mapData = [];
    for (var i = 0; i < mapJson.features.length; i++) {
        mapData.push({
            name: mapJson.features[i].properties.name,
            value:Math.floor(Math.random()*2800)+200//这里是模拟的数据
            //id:mapJson.features[i].id
        })
    }
    return mapData;
}

/**
 * 返回上一级地图
 */
function back(){
    if(mapStack.length!=0){//如果有上级目录则执行
        var map = mapStack.pop();
        $.get('./asset/json/map/'+map.mapId+'.json', function (mapJson,status) {

            registerAndsetOption(myChart,map.mapId,map.mapName,mapJson,false)

            //返回上一级后，父级的ID、Name随之改变
            parentId = map.mapId;
            parentName = map.mapName;

        })

    }

}
/**
 * Echarts地图
 */

//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000;
var chinaName = 'china'
var chinaJson = null;

//记录父级ID、Name
var mapStack = [];
var parentId = null;
var parentName = null;

//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
function mapChart(divid){

    $.get('./asset/json/map/'+chinaId+'.json', function (mapJson) {
        chinaJson = mapJson;
        myChart = echarts.init(document.getElementById(divid));
        registerAndsetOption(myChart,chinaId,chinaName,mapJson,false)
        parentId = chinaId;
        parentName = 'china'
        myChart.on('click', function(param,t) {

            var cityId = cityMap[param.name]
            if(cityId){//代表有下级地图
                $.get('./asset/json/map/'+cityId+'.json', function (mapJson,status) {
                    registerAndsetOption(myChart,cityId,param.name,mapJson,true)
                })
            }else{
                //没有下级地图，回到一级中国地图，并将mapStack清空
                registerAndsetOption(myChart,chinaId,chinaName,chinaJson,false)
                mapStack=[]
                parentId = chinaId;
                parentName = chinaName;


            }
            // $.get('./asset/json/map/'+param.data.id+'.json', function (mapJson,status) {

            //     registerAndsetOption(myChart,param.data.id,param.name,mapJson,true)

            // }).fail(function () {
            //     registerAndsetOption(myChart,chinaId,'china',chinaJson,false)
            // });

        });


    })
}

/**
 *
 * @param {*} myChart
 * @param {*} id        省市县Id
 * @param {*} name      省市县名称
 * @param {*} mapJson   地图Json数据
 * @param {*} flag      是否往mapStack里添加parentId，parentName
 */
function registerAndsetOption(myChart,id,name,mapJson,flag)
{

    echarts.registerMap(name, mapJson);
    
    // myChart.setOption({
        //     series: [{
        //         type: 'map',
        //         map: name,
        //         itemStyle: {
        //             normal: {
        //                 areaColor: 'rgba(23, 27, 57,0)',
        //                 borderColor: '#1dc199',
        //                 borderWidth: 1,
        //             },
        //         },
        //         data:initMapData(mapJson)
        //     }]
        // });
    //上一段是地图的颜色，因为想做出根据数据大小展示颜色不同所以用了以下一段代码
    myChart.setOption({
        //左下角lengend
        tooltip : {
            // show: true,
            trigger: 'item',
            formatter: function(params) {//鼠标移动时展示当前省市县的数据
                if (params.data) return params.name + '：' + params.data['value']
            },
        },

        // dataRange: {
        //     show:false,
        //     x: 'left',
        //     y: 'bottom',
        //     splitList: [
        //         {start: 5, end: 5, color: 'orange'},//当值为5时，区域背景
        //         {start: 10, end: 10, color: '#F2D010'},//当值为10时，区域背景
        //         {start: 15, end: 15, color: '#ccc'},//当值为15时，区域背景
        //     ]
        // },
        visualMap: {//颜色的展示，这里是不显示，可以打开看看
            show:false,
            min: 200,//阈值
            max: 3000,
            left:'1%',
            bottom:'1%',
            itemWidth: 25,
            itemHeight: 100,
            text:['高','低'],
            realtime: false,
            calculable: true,
            textStyle: {
                color:'#fff',
                fontSize:'20'
            },
            inRange: {
                color: ['#18b0ff','#ffde00', '#ff6f18']
            }
        },
        series: [{//地图的一些属性设置
            hoverable: true,    //鼠标经过时，是否高亮显示
            type: 'map',
            map: name,
            label: {
                normal: {
                    show: true,
                    color:"#fff",//城市名称颜色
                    fontSize:10//城市名称字体大小
                },
                emphasis: {
                    show: true,
                    color:"#fff",
                    fontSize:10
                }
            },
            itemStyle: {
                normal: {
                    areaColor: 'rgba(7,157,233,0.4)',//背景颜色值
                    borderColor: '#ddd',

                },
                emphasis: {
                    areaColor: '#3093d8'//指向颜色值
                }
            },

            //

            data: initMapData(mapJson)
        }]
    });
    if(flag){//往mapStack里添加parentId，parentName,返回上一级使用
        mapStack.push({
            mapId: parentId,
            mapName: parentName
        });
        parentId = id;
        parentName = name;
    }
}

湖南的js代码（复制可用）

注释的是我自己写的公司需要业务代码 ，根据实际情况改，我这里做的是1.每次下钻就请求数据填充下级地图 2.大屏页面其他模块图表数据联动；可以不用理会

/* jshint esversion: 6 */
/**
 * Echarts地图
 */

//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 430000;
var chinaName = '湖南'
var chinaJson = null;
var CITYID;
//记录父级ID、Name
var mapStack = [];
var parentId = 430000;
var parentName = '湖南';

var  initState=true;
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
$(function () {//dom加载后执行
    mapChart('mapChart');//
})



/**
 * 根据Json里的数据构造Echarts地图所需要的数据
 * @param {} mapJson
 */
function initMapData(mapJson) {
    var mapData = [];
    for (var i = 0; i < mapJson.features.length; i++) {
        mapData.push({
            name: mapJson.features[i].properties.name,
            value:Math.floor(Math.random()*5000)+200
            //id:mapJson.features[i].id
        })
    }
    return mapData;
}

/**
 * 返回上一级地图
 */
function backSuperior() {
    if (mapStack.length != 0) {//如果有上级目录则执行
        $('.title').html('湖南');
        var map = mapStack.pop();
        $.get('./asset/json/map/' + map.mapId + '.json', function (mapJson) {
            initState=true;
            registerAndsetOption(myChart, map.mapId, map.mapName, mapJson, false)

            //返回上一级后，父级的ID、Name随之改变
            parentId = map.mapId;
            parentName = map.mapName;

        })
    }


}







function mapChart(divid) {

    $.get('./asset/json/map/' + chinaId + '.json', function (mapJson) {
        chinaJson = mapJson;
        myChart = echarts.init(document.getElementById(divid));

        registerAndsetOption(myChart, chinaId, chinaName, mapJson, false)
        parentId = chinaId;
        parentName = '湖南';


        //钻取事件
        myChart.on('click', function (param) {
            $('.title').html(param.name);
            var cityId = cityMap[param.name];
            if (cityId) {//代表有下级地图
                CITYID=cityId;
                $.get('./asset/json/map/' + cityId + '.json', function (mapJson) {
                    //location.href="indexbf.html?cs="+param.name+"&cityid="+cityId;
                    registerAndsetOption(myChart, cityId, param.name, mapJson, true)
                })

            } else {
                // window.fn_get_event_post(cityId,param.name);//调用方法 获取数据 进行渲染
                // console.log("111");
                // $.get('./asset/json/map/' + CITYID + '.json', function (mapJson) {
                //     location.href="indexbf.html?cs="+param.name+"&cityid="+CITYID;
                //     //registerAndsetOption(myChart, cityId, param.name, mapJson, false)
                // })
                // console.log(cityId,param.name)
                // //没有下级地图，回到一级中国地图，并将mapStack清空
                // registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false)
                // mapStack = []
                // parentId = cityId;
                // parentName = param.name;
                // param.name="湖南"
                // alert(param.name);
                return false;
            }

            //刷新页面渲染数据
            // $.get("test.html", {Action:"get",Name:"lulu"}, function (data, textStatus){
            //
            // })

            // param.event.event.stopPropagation();
            // return false

        });
        //移动上去 触发事件
        myChart.on("mouseover",function(param){
        })


    })
}

/**
 *
 * @param {*} myChart
 * @param {*} id        省市县Id
 * @param {*} name      省市县名称
 * @param {*} mapJson   地图Json数据
 * @param {*} flag      是否往mapStack里添加parentId，parentName
 */
function registerAndsetOption(myChart, id, name, mapJson, flag) {
    if(initState==false && name=="湖南"){
        return;
    }else{
        initState=false;
    }
    // window.fn_get_event_post(id,name);
    echarts.registerMap(name, mapJson);
    myChart.setOption({
        //左下角lengend
        tooltip : {
            // show: true,
            trigger: 'item',
            formatter: function(params) {
                if (params.data) return params.name + '：' + params.data['value']
            },
        },

        // dataRange: {
        //     show:false,
        //     x: 'left',
        //     y: 'bottom',
        //     splitList: [
        //         {start: 5, end: 5, color: 'orange'},//当值为5时，区域背景
        //         {start: 10, end: 10, color: '#F2D010'},//当值为10时，区域背景
        //         {start: 15, end: 15, color: '#ccc'},//当值为15时，区域背景
        //     ]
        // },

        toolbox: {
        feature: {
            saveAsImage: {}
        }
        },
        visualMap: {
            show:false,
            min: 200,
            max: 3000,
            left:'1%',
            bottom:'1%',
            itemWidth: 25,
            itemHeight: 100,
            text:['高','低'],
            realtime: false,
            calculable: true,
            textStyle: {
                color:'#fff',
                fontSize:'20'
            },
            inRange: {
                color: ['#18b0ff','#ffde00', '#ff6f18']
            }
        },
        series: [{
            hoverable: true,    //鼠标经过时，是否高亮显示
            type: 'map',
            map: name,
            label: {
                normal: {
                    show: true,
                    color:"#000",//城市名称颜色
                    fontSize:12//城市名称字体大小
                },
                emphasis: {
                    show: true,
                    color:"#fff",
                    fontSize:14
                }
            },
            itemStyle: {
                normal: {
                    areaColor: 'rgba(7,157,233,0.4)',//背景颜色值
                    borderColor: '#ddd',

                },
                emphasis: {
                    areaColor: '#3093d8'//指向颜色值
                }
            },

            //

            data: initMapData(mapJson)
        }]
    });

    if (flag) {//往mapStack里添加parentId，parentName,返回上一级使用
        mapStack.push({
            mapId: parentId,
            mapName: parentName
        });


        parentId = id;
        parentName = name;
    }
    console.log(mapStack);
}

至此，页面成功运行。欢迎大佬们指点

资源直通车链接：https://download.csdn.net/download/qq_42197013/21761477

另：3d地图请参考我的另一篇文章：：实用且牛逼的3D旋转地图上显示柱图，可以更换成任意省市

温暖的松子
关注
专栏目录
echarts：中国地图-省市区三级级联动
weixin_53571388的博客
05-27 1741
效果图： 中国： ↓ 浙江省： ↓ 湖州市 ↓ 南浔区 代码演示： <template> <div class="line-container"> <div> <div id="mapChart"></div> </div> </div> </template> <script> import * as echarts from "echarts"; im
百度地图 省市二级联动（一）
Lee的博客
07-06 3379
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-s
Vue（十八）：echarts地图省市区联动
最新发布
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
07-30 746
echarts地图省市区联动
中国 省市县联动地图 - - 湖南 市县联动地图
08-31
！！！资源解说直通车：https://blog.csdn.net/qq_42197013/article/details/107613855
vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
weixin_44030054的博客
07-07 1万+
最近用echarts 做个地图，省级联动，在网上找省市 import'../node_modules/echarts/province/anhui.js' import'../node_modules/echarts/province/aomen' import'../node_modules/echarts/province/beijing' import'../node_modules/echarts/province/chongqing' import'../no...
echarts地图省市区三级下钻联动
04-06
在本案例中，我们将使用ECharts的自定义地图功能来构建一个可下钻的省市区地图，实现点击不同层级的区域时，地图自动切换到相应详细级别的展示。 首先，我们需要确保已经安装了ECharts库。如果尚未安装，可以通过...
高德地图实现全国(世界，各国，省市区，支持多级钻透)数据分布图。
01-08
高德地图实现全国(省市区，支持穿透)数据分布图，支持世界国省市区的地图显示，支持上下级，多级钻透，自定义数据源，自定义鼠标tip html提示信息，样式，根据高德地图修改，世界（各国：暂时定为中国），全国，省市...
Echart全国地图省市县坐标数据JSON版.zip_Echarts地图 json_Echart全国地图_echarts 地图j
07-15
echarts地图做三级省市县联动JSON格式资源
Echarts地图省级联动，动态加载数据，右键返回，并附有省市json地图。
10-29
省级联动是指在Echarts地图中，当用户点击或选择一个省份时，地图会自动展示该省份下的城市或其他更详细的信息。实现这一功能的关键在于配置Echarts的`series`和`geo`组件。首先，你需要拥有包含省市区县信息的json...
全国省市区乡镇街道四级行政区json数据，含城市电话区号，行政编码，高德地图坐标系准确的中心点和边界线。
09-30
全国省市区乡镇街道四级行政区json数据，含城市电话区号，行政编码，高德地图坐标系准确的中心点和边界线。
echarts全国省市三级地图联动
12-14
echarts全国省市三级地图联动，点击中国地图切换到省的地图，点击省的地图切换到是的地图
jQuery中国省份地图显示+三级联动代码
08-23
jQuery中国省份地图显示+三级联动代码(JQUERY),
echarts地图 点显示大小
JINX1024的博客
06-15 1975
symbolSize: function (val,params) { return val[1] * 3; }, 因为没有val[2]里没有值所以改成了1
Echarts坐标轴中的打点图，根据值得大小改变点的大小
lhxsirky的博客
08-30 5911
如果X轴刻度值不是数值，而是一些单位名称、时间、公司等，那么我们就要在xAxis中data中写出要展示的横坐标，纵坐标拷数据去获取一般情况下，如果纵坐标也不是数值，那么我们就可以和X轴刻度一样去在yAxis中设置一个data来接收这个值。 具体代码如下： option = { xAxis: { splitLine: { show: fal...
Echarts使用二：全国地图与各省市地图联动
热门推荐
呜呜哈的博客
08-13 3万+
上篇博客中写到了echarts中如何将城市高亮显示，这篇介绍一下二级地图联动。即点击中国地图中的一个省份，则显示该省份的详细地图。这里的地图使用本地文件引入的方式，网上很多文章介绍的都有问题，根本就无法正确引入地图的js文件。希望这里可以给大家一个正确的示例。 代码有个不足的地方：这里使用两个div分别放置中国地图和点击的省份地图。其实echarts里面提供了内部的布局方法，不过我没有详细去研究，
选择省市区后在地图上圈出区域，并可在区域内进行拖拽改变经纬度
qdm13209211861的博客
08-14 2232
一、申请key 参考高德地图API（https://lbs.amap.com/api/javascript-api/guide/abc/prepare） 1、首先需要注册开发者账号，成为高德开放平台开发者； 2、 登陆之后，在进入「应用管理」 页面「创建新应用」； 3、 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 二、开发准备 1、在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key； <script type="tex
每日一练15：echarts画中国地图和省联动地图
Super Livia
12-03 491
地图效果： 点击后： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts中国地图</title> <style> body,html, .centerItem{...
html5调颜色浏览器不显示,pyecharts画中国地图（省、市）：如何调整渐变颜色、浏览器中大小、生成的HTML打开是空白无法显示的问题...
weixin_36241311的博客
06-09 1329
最近在做一个数模题，需要中国地图的数据可视化，了解到pyecharts，踩了一些坑，在此记录—————————————————————————版本问题现在网上大多数文章都是用的老版本，比如0.5以下，但pyecharts升级后，变化还是挺大的。我安装的就是最近版，好像是1.8几。绘图代码(模版)先以中国地图为例每个省份和其对应的数值要以元组的形式给到参数里opts.TitleOpts就是标题文字的...
layui select数据动态添加（下拉框数据填充赋值） 附所有代码
04-28 5639
引用文件如下： <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <link rel="stylesheet" href="css/layui.css"> <script type="text/javascript" src="layui.js"></sc...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值