| spring结合Echarts实现中国地图大区、省、市、区/县的穿透 | 您所在的位置：网站首页 › 英雄联盟各大区对应的省份 › spring结合Echarts实现中国地图大区、省、市、区/县的穿透 |
spring结合Echarts实现中国地图大区、省、市、区/县的穿透
|
ECHARTS实现区域、省份、市、区县的数据穿透
前言一、Echarts是什么？二、实现效果1.初始化地图展示2.钻取
三、实现步骤1.引入JS库2.初始化HTML标签、存放Echarts图3.初始化配置文件3.获取地图数据4.合并省份图层5.注册地图6.实现地图点击向下钻取
前言
目前Echarts官网有很多关于省市区3级穿透的案例，但是很少有区域、省、市、区4级穿透的案例，本案例采用SpringMVC结合JSP、Echarts、本地化地图JSON完成（本地json可替换成高德地区获取区划的API） 提示：以下是本篇文章正文内容，下面案例可供参考 一、Echarts是什么？一个基于 JavaScript 的开源可视化图表库， 官网https://echarts.apache.org/ 案例库网址：https://www.makeapie.com/explore.html 二、实现效果 1.初始化地图展示
区域–>省份 省份–>市 代码如下（示例）： 2.初始化HTML标签、存放Echarts图代码如下（示例）： 注意需要设置ID值，方便后续进行配置文件注册，需要设置宽高，不然会显示空白。 3.初始化配置文件 var mapOption = { layoutCenter: ['60%', '65%'],//控制地图左边，上边的位置 layoutSize: "70%",//控制地图的大小 tooltip: { //格式化提示 trigger: "item", formatter: function (p) { let val = p.value; if (!val) { val = 0; } let txtCon = p.name + ":" + val.toFixed(2); return txtCon; } }, title: { show: true, left: "center", top: "15", text: currentArea+currentTab, textStyle: {//标题样式控制 color: "rgb(255,255,255)", fontSize: 20 } }, visualMap: {//刻度 min: 1, max: 1, left: "1%", bottom:"3%", showLabel: !0, pieces:[], textStyle: { color: "#24CFF4" }, show: !0 }, series: [{ name: "地图", type: "map",//显示的类型 map: "china",//显示地图为中国地图 roam: true, //是否可缩放 zoom: 1, //缩放比例 data: [],//地图数据 label: { normal: { show: true, color: "#000000", //省份标签字体颜色 fontSize: 16, // fontWeight: 'bold', areaStyle: { color: '#ffffff',//默认的地图板块颜色 }, formatter: function (p) {//格式化显示各个省份名称，主要是为了不要显示的太长 switch (p.name) { case "内蒙古自治区": p.name = "内蒙古"; break; case "西藏自治区": p.name = "西藏"; break; case "新疆维吾尔自治区": p.name = "新疆"; break; case "宁夏回族自治区": p.name = "宁夏"; break; case "广西壮族自治区": p.name = "广西"; break; case "香港特别行政区": p.name = "香港"; break; case "澳门特别行政区": p.name = "澳门"; break; default: break; } return p.name; } }, emphasis: { show: true, color: "#000000" } }, itemStyle: {//地图边界线样式 normal: { // areaColor: "#24CFF4", borderColor: "#fea8a6", // borderWidth: 1.3, shadowBlur: 1, shadowColor: "#fffdfe", // shadowOffsetX: 7, // shadowOffsetY: 6 }, emphasis: { areaColor: "#8dd7fc", borderWidth: 1.6, shadowBlur: 25 } } }] };配置文件可参考官网，里面的数据需要通过JS动态加载 3.获取地图数据//热力图 //初始化方法，100000为全国地图编码 getMapJson(100000); /** * adcodes: 区域编码数组:各区域存放的省份编码，如华南区域 * isArea: 是否不钻取数据，true:不钻取 false：钻取 **/ function getMapJson(adcodes,cityCode,isArea) { var that = this; city_code = cityCode.toString(); let mapData = []; //不钻取数据，只匹配数据 if (isArea) { //获取本地地图JSON $.get('/echarts/json/china.json',function(ret) { //全国省份数据 var areaJson = []; mapData = ret.features; for (let i = 0; i //不允许用全等于，后端id为字符串 if (adcodes[i] == mapData[j].properties.adcode) { areaJson.push(mapData[j]); } } } that.geoJson.features = areaJson; area_pri_city_type = "PROVINCE"; //获取子集展示数据 that.getMapData(); }); //钻取数据 } else { var type = ""; if(adcodes.length === 1){ let code = adcodes.toString(); $.get('/echarts/json/province/'+code+'.json',function(res) { mapData = res.features; //只钻取数据到市级，如果是直辖市，则不往下钻取，需要钻取区县的可以把这个去掉 if (adcodes[0] != "110000" && adcodes[0] != "120000" && adcodes[0] != "310000" && adcodes[0] != "500000" && mapData.length > 0 && mapData[0].properties.level === "district") { return; } //无地图数据 if (mapData.length === 0) { return; } switch (mapData[0].properties.level) { case "province": area_pri_city_type = "AREA"; type = "AREA"; break; // case "city": default: area_pri_city_type = "CITY"; type = "CITY"; break; // default: // type = "COUNTY" } //判断是否有子集数据 if (mapData.length > 0) { that.geoJson.features = mapData; } else if (mapData.length === 0) { that.geoJson.features = []; if (that.geoJson.features.length === 0) return; } //获取子集展示数据 that.getMapData(); }); } } } //关于地图省份合并参考这位大佬的文章，更改而来 //文章地址：https://blog.csdn.net/weixin_33743661/article/details/93469931?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8.baidujs //获取数据 function getMapData() { //省市区使用getMapData获取数据 //地图、柱状图数据 if (this.parentInfo.length === 1 && is_init) { //后台封装的区域及下级省份的名称，编码数据 //数据格式： //var params = { // names: [//把各个大区的省份用二维数组分开 // ['北京','天津','河北','山西','内蒙古'], // ["黑龙江","吉林","辽宁"], // ['山东','江苏','安徽','江西','浙江','福建','上海','台湾'], // ['河南','湖北','湖南'], // ['广东','广西','海南','香港','澳门'], // ['重庆','四川','云南','西藏','贵州'], // ['陕西','甘肃','青海','宁夏','新疆'] // ], // properties: {//自定义大区的名字，要和上面的大区省份一一对应 // name: ['华北','东北','华东','华中','华南','西南','西北'], // cp: [//经纬度可以自己随意定义 // [116.24,39.54], // [126.32,43.50], // [121.28,31.13], // [114.20,30.32], // [113.15,23.08], // [104.04,30.39], // [103.49,36.03] // ] // } // }; var mapPriAreaDataList = '${mapPriAreaDataList}'; // var jsonData = $.parseJSON(mapPriAreaDataList); data = eval(mapPriAreaDataList); var params = { names:[],//省份名称 adcode:[],//大区编码 properties:{ name:[],//大区名称 cp:[],//经纬度，中文显示的位置 cityCode:[]//省份获取市区编码 } }; data.forEach(function(item,index){ params.names[index] = item.childName; params.adcode[index] = item.value; params.properties.name[index] = item.name; params.properties.cp[index] = item.description; params.properties.cityCode[index] = item.childValue; }); //合并省份图层 mergeProvinces(this.geoJson, params.names, params.properties, params.adcode); is_init = false; } //获取时间 let dateTime = $("#fillDateTime").val(); //获取组织 let orgId = $("#jqCodeId").val(); //查询后台地图数据 $.getJSON("示例路径?code="+city_code+"&type="+area_pri_city_type+"&dateTime="+dateTime+"&orgId="+orgId, function (res) { // console.log(res,1); haltMapData = res; //循环地图数据 //格式化数据，显示新签合同额 var echartsData = formatData(res,indicatorType); //注册初始化地图 initEcharts(echartsData.mapData,echartsData.projectBarData,echartsData.areaBarData); //更新8大指标数据 }); } 4.合并省份图层 //合并大区,主要是根据格式化的地图省份编码，合并边界线 function mergeProvinces(chinaJson, names, properties,adcodes) { //合并大区里省份的coordinates var features = chinaJson.features; var polygons = []; var polygons2 = []; for (var i = 0; i for (var j = 0; j if (features[j].geometry.coordinates[0].constructor === String) { //合并coordinates for (var l = 0; l for (var k = 0; k polygonsCoordinates.push( features[j].geometry.coordinates[k][d] ); } } } console.log(features[j].geometry.encodeOffsets,features[j]); if(features[j].geometry.encodeOffsets[0].constructor == String){//合并encodeOffsets polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets); }else if(features[j].geometry.encodeOffsets[0].constructor == Array){ for(var k=0;k for(var e=0;e polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]); } } } break; } } } polygons.push(polygonsCoordinates); polygons2.push(polygonsEncodeOffsets); } // 构建新的合并区域 var features = []; for (var a = 0; a id: features.length.toString(), type: "FeatureCollection", geometry: { type: "Polygon", coordinates: polygons[a], encodeOffsets: polygons2[a] }, properties: { name: properties.name[a] || "", childNum: polygons[a].length, adcode:adcodes[a] || "" } }; if (properties.cp[a]) { feature.properties.cp = properties.cp[a]; } // 将新的合并区域添加到地图中 features.push(feature); } this.geoJson.features = features; } 5.注册地图 function initEcharts(mapData,projectBarData,areaBarData) { //获取标签 this.myChart = echarts.init(document.getElementById("Map")); //这里是切换地图，china标识全国地图，map标签区域地图（区域、省、市级、区县） if (this.parentInfo.length === 1) { echarts.registerMap('china', this.geoJson); //注册 mapOption.series[0].map = "china"; } else { echarts.registerMap('Map', this.geoJson); //注册 mapOption.series[0].map = "Map"; } //这里是获取后台地图展示的数据，如果只是看地图，这块可注释 var min = mapData.length > 0 ?mapData[mapData.length-1].value:0;; var max = mapData.length > 0 ?mapData[0].value:0; //设置地图刻度颜色方法 setAreaColor(max,min); //判断目前展示的是区域还是全国地图，调整地图中心点和大小 if(area_pri_city_type !== "AREA"){ mapOption.layoutCenter = ["50%","50%"]; mapOption.layoutSize = "100%"; }else{ mapOption.layoutCenter = ["60%","65%"]; mapOption.layoutSize = "70%"; } //设置地图数据和标题 mapOption.visualMap.min = min; mapOption.visualMap.max = Math.ceil(max / 5) * 5; mapOption.visualMap.pieces = piecesArray; mapOption.series[0].data = mapData; mapOption.title.text = currentArea+currentTab; // mapOption.toolbox.feature.saveAsImage.name = currentArea+currentTab; //注册地图 this.myChart.setOption(mapOption,true); // //点击前解绑，防止点击事件触发多次 this.myChart.off('click'); //地图点击实现，点击传入编码和名称，进行钻取 this.myChart.on('click', this.echartsMapClick); } 6.实现地图点击向下钻取 //点击下钻 function echartsMapClick(params) { if (!params.data) { return } //省份CODE数组 let isArea = true; let data = Object.assign({},params.data); //后台获取各个区域对应的省份编码数组 var mapPriAreaDataList = '${mapPriAreaDataList}'; priAreaData = eval(mapPriAreaDataList); let areaData = priAreaData.filter(function(item ) { return item.name === data.name; }); //点击的的区域是名称能匹配上，则编码为这个区域的省份编码，进行匹配显示，否则直接钻取，省-->市-->区县 if(areaData[0] != null){ data.cityCode = areaData[0].childValue; }else{ isArea = false; } parentInfo.push({ cityName: data.name, code: data.cityCode ? data.cityCode : 0 }); //增加导航路径，可进行切换 setBreadcrumb(isArea,data.cityCode,params); //获取子集地域，点击继续获取数据，刷新地图 getGeoJson(isArea ? data.cityCode : [data.cityCode],params.data.cityCode, isArea); } |
【本文地址】
公司简介
联系我们