前端/python脚本/转换-使用天地图下载的geojson(echarts4+如果直接使用会导致坐标和其他信息不全)

解决echarts4+如果直接使用天地图下载的geojson会导致坐标和其他信息不全

解决方法是使用python脚本来补全其他信息:center,level,adcode等内容

前提是必须有一个之前使用的json文件(需要全一点的数据供echarts使用)

公司是因为可能用之前的旧版本的地图数据可能会导致侵权或者是没显示重要内容,天地图里面的地图绝对是很正确的(国内地图)
天地图下载网址:https://cloudcenter.tianditu.gov.cn/administrativeDivision/

python脚本:

import jsonimport jsondef load_json(file_path):with open(file_path, 'r', encoding='utf-8') as f:return json.load(f)def save_json(data, file_path):with open(file_path, 'w', encoding='utf-8') as f:json.dump(data, f, ensure_ascii=False, indent=4)def merge_properties(geojson, json_data):# 建立name到feature的索引,json_data中的名称较短name_to_feature = {feature['properties']['name']: feature for feature in json_data['features']}for geo_feature in geojson['features']:geo_name = geo_feature['properties']['name']for name, json_feature in name_to_feature.items():if name in geo_name:# 更新geojson中的properties,排除geometry字段geo_properties = geo_feature['properties']json_properties = json_feature['properties']# 打印调试信息print(f"Updating properties for {geo_name}")# 仅更新properties字段for key, value in json_properties.items():geo_properties[key] = valuebreak
def main(geojson_path, json_path, output_path):geojson_data = load_json(geojson_path)json_data = load_json(json_path)merge_properties(geojson_data, json_data)save_json(geojson_data, output_path)# 输入文件路径
geojson_path = 'china5.geojson'
#json_path = 'China4.json'
json_path = 'chinabak.json'output_path = 'xczxMap.json'main(geojson_path, json_path, output_path)

实现方案

china5.geojson(下载的天地图)中的北京是
{"geometry": {"type": "MultiPolygon","coordinates": [地图中的坐标]},"type": "Feature","properties": { "name": "北京市", "gb": "156410000" }   }
China4.json(原来使用的echarts的地图)中的北京是	
{
"type": "FeatureCollection","features": [{"type": "Feature","properties": {"adcode": 110000,"name": "北京","center": [116.405285, 39.904989],"centroid": [116.41995, 40.18994],"childrenNum": 16,"level": "province","parent": { "adcode": 100000 },"subFeatureIndex": 0,"acroutes": [100000]},"geometry": {"type": "MultiPolygon","coordinates": []  
}
  • 读取China4.json和china5.geojson文件。
  • 遍历China4.json中的每个feature,并检查china5.geojson中是否存在对应的name。
  • 如果存在,则将China4.json中feature的properties补充到china5.geojson的对应feature中。
  • 保存修改后的china5.geojson文件。
  • 过滤掉coordinates中的信息,不替换天地图中的坐标
  • name会保存为之前的echarts的名称(缩写)
    python目录
    在这里插入图片描述

前端调用地图代码

地图调用
function loadChinaMap() {
$.getJSON(//china5.geojson'@/../static/plugins/chinese-map/static/map/updated_china5.geojson',function(geoJson) {//获取当前地图数据值api.接口().then((res) => {let data = res.data ? res.data.data : [];let unitName = res.data ? res.data.unitName : ''; //单位let date = res.data ? res.data.date : ''; //日期_this.maps.bigNum = 0;for (let i = 0; i < d.length; i++) {d[i].value > _this.maps.bigNum? (_this.maps.bigNum = d[i].value): ''; //获取最大值}console.log(d);mapdata = data ;//注册地图echarts.registerMap('china', geoJson);//绘制地图renderMap('china', data, unitName, date);});}
);
}
地图渲染
<div class="m1_echarts1" id="m1_echarts1"></div>设置地图
import echarts from '@/../static/plugins/echarts/echarts.js';function renderMap(map, data, unitName, date) {
let chart = echarts.init(document.getElementById('m1_echarts1'));option.visualMap.max = _this.maps.bigNum + 5;option.title.subtext = map;option.tooltip.formatter = date(这个是日期) + ': {c}' + unitName(这个是单位);option.series = [{name: map,type: 'map',mapType: map,roam: true,zoom: 2.7,center: [104.46, 35.92],nameMap: {china: '中国',},label: {normal: {show: true,textStyle: {// color:'#EFF7FF',color: '#000',fontSize: 13,},},emphasis: {show: true,textStyle: {color: '#640000',fontSize: 13,},},},itemStyle: {normal: {// borderColor: 'rgba(147, 235, 248, 1)',borderColor: '#9c978b',borderWidth: 1,areaColor: {type: 'radial',x: 0.2,y: 0.2,r: 0.9,colorStops: [{offset: 0,color: 'rgba(255, 255, 255, 0)', // 0% 处的颜色},{offset: 1,color: 'rgba(255, 255, 255, .1)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},emphasis: {areaColor: '#ffdf33',borderWidth: 0,},},data: data,},];//初始化绘制全国地图配置
var option = {title: {show: false,text: '',subtext: '',left: 'center',textStyle: {color: '#121212',fontSize: 16,fontWeight: 'normal',fontFamily: 'Source Han Sans CN',},subtextStyle: {color: '#121212',fontSize: 13,fontWeight: 'normal',fontFamily: 'Source Han Sans CN',},},grid: {//设置canvas内部表格的内距x: 50,y: 50,x2: 50,y2: 0,borderWidth: 10,},tooltip: {show: true,trigger: 'item',formatter: '{b}: {c}家',},toolbox: {show: false,orient: 'vertical',left: 'right',top: 'top',iconStyle: {normal: {color: '#fff',},},feature: {mark: {// '辅助线开关'show: true,},saveAsImage: {//保存为图片。show: true, //是否显示该工具。type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。name: 'pic1', //保存的文件名称,默认使用 title.text 作为名称backgroundColor: '#ffffff', //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色title: '中国地图',pixelRatio: 1, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2},// dataView: {readOnly: false},},},animationDuration: 1000,animationEasing: 'cubicOut',animationDurationUpdate: 1000,visualMap: {min: 0,max: 150,right: '0',bottom: '2px',text: ['高', '低'],calculable: true,inRange: {color: ['#ebdecb', '#8aa87d', '#7d97a8'],},show: true,textStyle: {color: ['#DCE5F5'],},},
};//渲染地图chart.setOption(option, true);//地图点击事件chart.off('click');chart.on('click', function(params) {});}

数据格式:
在这里插入图片描述
最终样式:
在这里插入图片描述

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

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

相关文章

Linux文件编程应用

目录 一、实现cp命令 二、修改程序的配置文件 三、写一个整数/结构体到文件 1.写一个整数到文件 2.写一个结构体到文件 四、写结构体数组到文件 我们学习了文件编程的常用指令以及了解文件编程的基本步骤后&#xff0c;试着来写一些程序实现某些功能。&#xff08;没有学…

记录一次微信小程序申诉定位权限过程

1 小程序接到通知&#xff0c;检测到违规&#xff0c;需要及时处理&#xff0c;给一周的缓冲时间&#xff0c;如果到期未处理&#xff0c;会封禁能力&#xff08;2023-11-17&#xff09; 2 到期后&#xff0c;仍未处理&#xff0c;封禁能力&#xff08;2023-11-24&#xff09; …

刷题——包含min的队列

包含min函数的栈_牛客题霸_牛客网 使用了两个队列&#xff0c;其中s2里放最小元素&#xff0c;而且多少与s1对齐&#xff0c;如果发现s1的顶小于当前s2的顶&#xff0c;就加入s2中&#xff0c;如果不小于也将s2的顶再放一次&#xff0c;最顶上的元素&#xff0c;绝对是最小的元…

【04】微服务通信组件Feign

1、项目中接口的调用方式 1.1 HttpClient HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 Http 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新版本和建议。HttpClient 相比传统 JDK 自带的 URLConnectio…

标签页(Tabs)

标签页(Tabs) 标签页(Tabs)是一种常见的用户界面元素,广泛应用于网页设计、移动应用和桌面软件中。它们提供了一种简洁有效的方式来组织内容,允许用户在不同的视图或数据集之间轻松切换。本文将探讨标签页的设计原理、使用场景、最佳实践以及如何在现代网页和应用程序中…

打印任务无法删除怎么办?

在删除打印任务的时候&#xff0c;你可能会遇到这样的情况&#xff0c;当我们想把打印任务取消的时候&#xff0c;却一直显示正在删除&#xff0c;而过了很久还没有取消掉&#xff0c;下面就分享一下处理这个问题的方法。 1、停止打印服务&#xff0c;按WinR键打开运行对话框&a…

Unity WebGL 嵌入前端网页并通信

1. 前言 最近在做项目时遇到需要将 UnityWebGL 嵌入到网页中去&#xff0c;且需要点击网页中的按钮 UnityWebGL 可以做出响应。新建项目部分直接略过 2. 最终效果 3. 基础设置 设置导出平台为WebGL 在Player Settings -> Publishing Settings 中勾选 Data Caching 和Deco…

《Windows API每日一练》9.1.5 自定义资源

自定义资源&#xff08;Custom Resources&#xff09;是在 Windows 程序中使用的一种资源类型&#xff0c;用于存储应用程序特定的数据、图像、音频、二进制文件等。通过自定义资源&#xff0c;开发者可以将应用程序所需的各种资源文件集中管理和存储&#xff0c;便于在程序中访…

SpringBoot3+Redis实现分布式锁

SpringBoot3RedisLua脚本实现分布式锁 相关依赖包 <spring-boot.version>3.0.2</spring-boot.version> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </depende…

训练营第九天 | 151.翻转字符串里的单词、55.右旋转字符串、总结回顾

一、题目 151.翻转字符串里的单词 做题思路 代码细节 卡码网&#xff1a;55.右旋转字符串 做题思路 代码细节 二、总结回顾 &#xff08;一&#xff09;字符串总结 代码随想录 &#xff08;二&#xff09;双指针回顾 代码随想录

python多进程刻画进度

问题 python多进程启动4个任务&#xff0c;当前共20个任务&#xff0c;如何刻画当前进度&#xff1f; 解决方案 在 Python 中使用多进程处理多个任务并刻画当前进度&#xff0c;你可以使用 multiprocessing 模块和一个共享变量&#xff08;如 multiprocessing.Value 或 multi…

imx6ull/linux应用编程学习(17)利用mqtt上传开发板数据,和控制开发板led(基于正点)

1.关于如何创建自己的服务器&#xff0c;可看上篇文章 imx6ull/linux应用编程学习&#xff08;16&#xff09;emqx &#xff0c;mqtt创建连接mqtt.fx-CSDN博客 2.实现任务&#xff1a;&#xff08;正点原子教程源码改&#xff09; (1)用户可通过手机或电脑远程控制开发板上的…

小白的OS Copilot 产品测评

背景 通过群友介绍才知OS Copilot 。不想错过任何优秀的AI产品。随着互联网的发展和时代的进步&#xff0c;要紧跟时代&#xff0c;了解市面上的优秀的AI科技产品。 OS Copilot 产品体验评测 1&#xff09;您的角色是什么&#xff1f;开发、运维、学生&#xff1f;如果使用O…

Unity中短路法在背包系统的应用

一、计数法 int counter 0;foreach(GameObject slot in slotList) {if(slot.transform.childCount > 0){counter 1;} }return counter 21;计数法的复杂度为 O(n)&#xff0c;其中n 是插槽的数量。无论插槽是否已满&#xff0c;都会遍历所有插槽。 二、短路法 foreach (…

服务器怎么进PE系统?

服务器进PE是指将服务器的操作系统切换到预安装环境&#xff08;Pre-Installation Environment&#xff09;的状态。在PE环境下&#xff0c;可以进行一些系统管理和故障排除的操作。在进入PE&#xff08;Preinstall Environment&#xff09;之前&#xff0c;首先需要确保你的服…

类和对象——【const成员】【static成员】【友元】【内部类】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件iostream的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …

WPF 框架 Prism IActiveAware接口使用

目的 在Prism框架中&#xff0c;IActiveAware接口是一个重要的接口&#xff0c;它允许开发者实现组件或视图的激活和失活逻辑。这通常在需要响应用户界面的可见性或激活状态变化时非常有用&#xff0c;比如在选项卡式界面中切换标签页时。 如何使用IActiveAware IActiveAwar…

css文字自适应宽度动态出现省略号...

前言 在列表排行榜中通常会出现的一个需求&#xff1a;从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标&#xff0c;徽标长度是动态的&#xff0c;昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示&#xff08;花里胡哨的底色是…

SpringSecurity中文文档(Servlet OAuth 2.0 Login)

OAuth 2.0 Login OAuth 2.0 Login 功能允许应用程序让用户通过使用 OAuth 2.0 Provider (如 GitHub)或 OpenID Connect 1.0 Provider (如 Google)的现有帐户登录到应用程序。OAuth 2.0 Login 实现了两个用例: “ Login with Google”或“ Login with GitHub”。 OAuth 2.0 Lo…

若依vue集成electron实现打包exe应用程序

一、修改package.json文件,加入相关依赖和配置 {"name": "ruoyi","version": "3.8.6","description": "若依管理系统","author": "若依","license":