echarts合并地图区域去除区域交界线（以合并泰州两个区为例）

需求

客户要求合并泰州海陵区和泰州高港区，综合统计两个区的业务数据

实现

如果有了解过echarts地图json，应该知道地图点是由coordinates这个属性渲染的
那么只需要复制海陵区和高港区的coordinates属性（下方代码图片黄色括号的二维数组区域）
把两个二维数组的值放在一起，全部放在海陵区中，去除高港区，更改海陵区的name，则渲染地图json后，两个区合并且名字更改了，但是会有一个问题，合并后的区域会有原先两个区的交界线

去除交界线

取出两个区的coordinates属性的二维数组，用下方的工具函数处理合并后，返回一个新的去除了重复点的二维数组，删除高港区，替换海陵区的coordinates属性中的二维数组，更改区域name属性，即可显示地图合并后的名字与区域

工具函数

/*** 处理地图区域之间的交界，其实很好理解，重复出现的点说明是交点，去掉这些点则去掉地图交界* 注意这不是去重，而是一个点如果多次出现，则直接去掉这个点*/function dealMapBorder(firstArr, secondArr) {const repeatArr = [] // 生成重复元素数组，重复元素就是地图间的边界const concatArr = firstArr.concat(secondArr)for (let i = 0; i < concatArr.length; i++) {for (let k = 0; k < concatArr.length; k++) {if (i !== k && concatArr[i][0] === concatArr[k][0] && concatArr[i][1] === concatArr[k][1]) {repeatArr.push([concatArr[i][0], concatArr[i][1]])concatArr.splice(k, 1) // 删除数组元素，会影响长度k-- // 因为长度少了一，索引需要减去一}}}// 比较两个二维数组，删除第一个数组中跟第二个数组中相同的元素for (let i = 0; i < concatArr.length; i++) {for (let k = 0; k < repeatArr.length; k++) {if (concatArr[i][0] === repeatArr[k][0] && concatArr[i][1] === repeatArr[k][1]) {concatArr.splice(i, 1)if (i > 1) i--}}}return concatArr
}

echarts合并地图区域去除区域交界线（以合并泰州两个区为例）相关推荐

Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
Echarts河北地图缺少雄安新区（合并、调整地图边缘）的解决办法
前言现有项目采用echarts地图做呈现,可是缺少客户关心的新区的规划(比如贵州省缺少贵安新区.河北省缺少雄安新区等).由于安全问题,现在基本都不提供经纬度json数据,为此自己只有采取其他解决方式 ...
ECharts合并地图上的区域
对于某些特定需求,官方下载的地图数据可能并不能完全满足.例如,要求显示中国地图,但需要将山东江苏和浙江这3个省合并起来,显示"东部区域".其他省份不变. 于是就需要对官方提供的地图 ...
ECharts合并地图上的区域（济南市合并莱芜市）
将两个的coordinates,encodeOffsets合并 "coordinates": ["@@PAROBBLIAGMCGBH@DDE@K@MEE@KCDAJKP@ ...
echarts 百度地图，城市区域场景标识参数意义配置分析
有不足或者错误的请大佬指出,仅仅个人的分析结果. 由于颜色貌似用16进制才能使用或者识别,先来个进制的颜色参照表吧,颜色可以直接在这个网页上ctrl+f查找颜色对照表http://www.fsskq ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
Echarts地图绘制自定义区域 - geojson.io使用方法
Echarts地图绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区.需手动绘制. STEP1:获取市区json ...
Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
百度地图开发乡镇级区域显示_Tableau导入乡镇级地图进行数据展示
Tableau具有强大的数据可视功能包括创建地图并展示相关数据,但是Tableau自带的地图仅有区或地级市这一级别,现在展示导入乡镇级别地图并联接相关数据. 一.付费下载地图全国省市县乡镇街道社区村 ...

echarts合并地图区域去除区域交界线（以合并泰州两个区为例）

需求

实现

去除交界线

echarts合并地图区域去除区域交界线（以合并泰州两个区为例）相关推荐

最新文章

热门文章