使用echarts绘制中国地图根据不同的省份划分到指定区域里面中

需求:我们在开发过程中会遇到使用中国地图来划分不同区域省份下面的数量统计情况,但是有时候使用Echarts里面地图功能和我们实际业务需求不匹配的,这个时候就需要我们手动自定义进行划分不同区域下面的省份数据。例如大区1下面有哪些省份,大区2对应哪些的省份进行划分显示的。

1,实现效果图如下:

在这里插入图片描述
2,关键代码如下:

【1】后端返回数据格式如下:
在这里插入图片描述

在这里插入图片描述

【2】把需要合并的省份的经纬度数据合并起来。

function mergeProvinces(chinaJson, regionMap) {//合并大区里省份的coordinatesvar oldFeatures = chinaJson.featuresvar featuress = regionMap.map((item) => {var polygonsCoordinates: any[] = []for (var z = 0; z < item.provinces.length; z++) {for (var j = 0; j < oldFeatures.length; j++) {if (oldFeatures[j].properties.name.includes(item.provinces[z].slice(0, 2))) {const coordinates = oldFeatures[j].geometry.coordinatesif (coordinates[0].length !== 1) {polygonsCoordinates = polygonsCoordinates.concat(coordinates)} else {polygonsCoordinates = polygonsCoordinates.concat(coordinates.reduce((r, e) => {return r.concat(e)}, []),)}oldFeatures[j].ok = 1break}}}return {id: 'xx',type: 'MultiPolygon',geometry: {type: 'Polygon',coordinates: polygonsCoordinates,},properties: {name: item.regionName || '',childNum: polygonsCoordinates.length,},}})const others = oldFeatures.filter((item: any) => !item.ok)featuress = featuress.concat(others)chinaJson.features = featuressreturn chinaJson}

3- 具体代码组件如下所示:

<template><div class="chinamapContentbox">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/866755.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ UTF-8编解码

icu 编解码数据&#xff1a; extern const UConverterSharedData _MBCSData, _Latin1Data, _UTF8Data, _UTF16BEData, _UTF16LEData, _UTF32BEData, _UTF32LEData, _ISO2022Data, _LMBCSData1,_LMBCSData2, _LMBCSData3, _LMBCSData4, _LMBCSData5, _LMBCSDat…

数千万“四高”中老年患者,如何推动国产营养保健品创新

“三高”指高血压、高血糖&#xff08;糖尿病&#xff09;、高血脂&#xff0c;是中老年群体的常见病。 然而&#xff0c;除了前述三者&#xff0c;高尿酸血症在我国的患病率正逐年提高&#xff0c;已成为仅次于糖尿病的第二大代谢性疾病。痛风是高尿酸血症典型症状之一。 加上…

【数据结构】07.循环队列

一、循环队列的定义 定义&#xff1a;队列主要有顺序队列&#xff0c;循环队列&#xff0c;双端队列&#xff0c;优先队列。而当中循环队列是一种线性数据结构。它也被称为“环形缓冲器”。它只允许在一端进行插入操作&#xff0c;即队尾&#xff08;rear&#xff09;&#xf…

【对顶堆 优先队列】295. 数据流的中位数

本文涉及知识点 对顶堆 优先队列 LeetCode295. 数据流的中位数 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 …

CVE-2019-12272 Openwrt可视页面LuCi命令注入漏洞复现(完结)

声明 本文所使用的一些源代码等内容已经上传至github&#xff0c;具体地址如下 Vulnerability_POC-EXP/OpenWrt/CVE-2019-12272 at main a2148001284/Vulnerability_POC-EXP GitHub 漏洞简介 参考内容&#xff1a; CVE-2019-12272 OpenWrt图形化管理界面LuCI命令注入分析 |…

有哪些有效的策略可以提升独立站的外链数量?

有哪些有效的策略可以提升独立站的外链数量&#xff1f;提升独立站的外链数量并不难&#xff0c;难得是不被谷歌惩罚把你的网站判定为作弊&#xff0c;正因如此&#xff0c;了解并应用GNB自然外链策略是个不错的开始&#xff0c;GNB外链的核心价值在于它提高了网站外链资源的自…

如何学习和提升SQL

资料来源于腾讯技术直播&#xff0c;只作为学习记录&#xff0c;如有侵权&#xff0c;请联系作者进行删除

分享6个自己每天都会打开的网站

分享6个自己每天都会打开的网站&#xff0c;有实用办公网站&#xff0c;也有休闲摸鱼网站&#xff0c;链接直达&#xff0c;速看~ 1、鸠摩搜索 https://www2.jiumodiary.com/ 一个免费的电子书下载网站&#xff0c;页面干净无广告&#xff0c;只有一个搜索框&#xff0c;输入…

应用了网络变压器的PC网卡连接转换器后不好连网,有掉线现象,但外接路由器无问题,可能是什么原因?

Hqst盈盛&#xff08;华强盛&#xff09;电子导读&#xff1a;今天分享的是应用了网络变压器的PC网卡连接转换器后不好连网&#xff0c;有掉线现象&#xff0c;但外接路由器无问题&#xff0c;可能是什么原因呢&#xff1f;如何解决呢&#xff1f; 首先&#xff0c;我们要了解传…

Kotlin/Android中执行网络请求

方式一&#xff1a;使用okhttp3 okhttp官网 okhttp3 github地址 打开build.gradle.kts文件加入依赖 dependencies {implementation("com.squareup.okhttp3:okhttp:4.9.0") }在IDEA的Gradle面板点击reload按钮便会自动下载jar 使用网络请求时需要把网络的权限打开&a…

Nuxt3 的生命周期和钩子函数(十一)

title: Nuxt3 的生命周期和钩子函数&#xff08;十一&#xff09; date: 2024/7/5 updated: 2024/7/5 author: cmdragon excerpt: 摘要&#xff1a;本文详细介绍了Nuxt3中几个关键的生命周期钩子和它们的使用方法&#xff0c;包括webpack:done用于Webpack编译完成后执行操作…

pytorch-时间序列

目录 1. 时间序列2. word embedding2.1 one hot2.2 word2vec2.3 GloVe 1. 时间序列 具有时间相关性的序列叫做时间序列&#xff0c;比如&#xff1a;语音、文本句子 2. word embedding 2.1 one hot 针对句子来说&#xff0c;可以用[seq_len, vector_len] 有多少个单词vecto…

2024第二届电子通信与计算机科学技术国际会议(ICECCST 2024)

2024第二届电子通信与计算机科学技术国际会议(ICECCST 2024) 会议简介 2024第二届电子通信与计算机科学技术国际会议&#xff08;ICECCST 2024&#xff09;是一次重要的学术盛会&#xff0c;将在中国厦门举行。会议的主要目的是为全球的电子通信和计算机科学技术领域的专家、…

数字信号处理实验二(模拟信号采样与重构及频谱分析FFT)

模拟信号采样与重构及频谱分析FFT&#xff08;2学时&#xff09; 要求&#xff1a; 对一模拟信号进行采样&#xff1b;对该采样信号进行重构&#xff1b;分析它们的频谱特征。目的&#xff1a; 熟悉MATLAB命令和编辑、运行、调试环境&#xff1b;掌握采样定理及对信号的频谱分析…

简过网:考教师编制报培训班有用吗?

​ 很多想要备考教师编的朋友都会有一个疑问&#xff0c;那就是备考教师编报培训班有用吗&#xff1f; 其实&#xff0c;主要还是要看你是笔试和面试。 小编觉得如果是笔试的话&#xff0c;其实都是教育理论的东西&#xff0c;线下班其实没有太大的必要&#xff0c;第一是面授…

DFS之搜索顺序——AcWing 1116. 马走日

DFS之搜索顺序 定义 DFS之搜索顺序是指在执行深度优先搜索时&#xff0c;遍历图或树中节点的策略。具体而言&#xff0c;DFS会沿着一条路径深入到底&#xff0c;当无法继续深入时回溯&#xff0c;然后选择另一条未探索的路径继续深入。搜索顺序直接影响到搜索效率和剪枝的可能…

发现CPU占用过高,该如何排查解决?

1.使用top命令 查看cpu占用最多的进程 2.使用 top -H -p pid 发现有两个线程占用比较大 3.将线程id转换为16进制 使用命令 printf 0x%x\n pid 4.使用 jstack pid | grep 线程id(16进制&#xff09; -A 20 &#xff08;显示20行&#xff09; 根据代码显示进行错误排查

电脑为什么会提示丢失msvcp140.dll?怎么修复msvcp140.dll文件会靠谱点

电脑为什么会提示丢失msvcp140.dll&#xff1f;其实只要你的msvcp140.dll文件一损坏&#xff0c;然而你的电脑程序需要运用到这个msvcp140.dll文件的时候&#xff0c;就回提示你丢失了msvcp140.dll文件&#xff01;因为没有这个文件&#xff0c;你的很多程序都用不了的。今天我…

无人机对地面运动目标定位---获取目标的移动方向和速度

目录 一、引子 我们利用单目无人机通过等时间间隔拍照的形式对地面某移动目标进行定位&#xff0c;当前&#xff0c;我们已经获得了每张相片上该目标的三维坐标&#xff0c;并且知道该无人机在飞行过程中拍照的时间间隔&#xff0c;那么我们就可以通过一定的计算&#xff0c;得…

溶酶体靶向嵌合体制备方法和技术

网盘 https://pan.baidu.com/s/1dhCCryatp71j7yXTDdrrTw?pwdynr4 具有聚集诱导发光性质的比率型溶酶体pH探针及应用.pdf 内体-溶酶体转运靶向嵌合体降解剂及其制备方法与应用.pdf 可降解PDGFR-β的蛋白降解靶向嵌合体及其制备方法和应用.pdf 溶酶体膜包覆纳米颗粒的制备方法.…