前端/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; …

【04】微服务通信组件Feign

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

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

在删除打印任务的时候&#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;便于在程序中访…

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…

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

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

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

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

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

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

分层图最短路,CF 1725M - Moving Both Hands

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1725M - Moving Both Hands 二、解题报告 1、思路分析 题意看似很简单&#xff0c;就是问我们两个人分别处于1, p两个点上&#xff0c;二者同时出发&#xff0c;相遇时二者所用路径之和的最小值 不难想到求…

Git协作

文章目录 Git协作冲突冲突的发生情况解决冲突如何处理冲突 1 分支1.1 什么是Git分支1.2 创建分支 2 切换分支2.1 指向分支2.2 暂存分支切换分支与未提交更改的处理使用 Stash 临时保存更改Stash 的工作原理&#xff1a;场景设定使用 Git Stash 3 远程分支3.1 快进合并快进合并的…

Qt/QML学习-定位器

QML学习 定位器例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15Window {width: 640height: 480visible: truetitle: qsTr("positioner")Rectangle {id: rectColumnwidth: parent.width / 2height: parent.height / 2border.width: 1Col…

Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

QStackedWidget 类 QStackedWidget 类是在 QStackedLayout 之上构造的一个便利的部件,其使用方法与步骤和 QStackedLayout 是一样的。QStackedWidget 类的成员函数与 QStackedLayout 类也基本上是一致的,使用该类就和使用 QStackedLayout 一样。 使用该类可以参考QStackedL…

iPhone数据恢复篇:在 iPhone 上恢复找回短信的 5 种方法

方法 1&#xff1a;检查最近删除的文件夹 iOS 允许您在 30 天内恢复已删除的短信。您需要先从“设置”菜单启用“过滤器”。让我们来实际检查一下。 步骤 1&#xff1a;打开“设置” > “信息”。 步骤 2&#xff1a;选择“未知和垃圾邮件”&#xff0c;然后切换到“过滤…

如何将若依vue升级到springboot3.x?

为了确保项目符合要求,Spring Boot 3.x 要求Java版本为17或更高。 1、修改根目录下的pom.xml文件 <!-- java.version版本8更换为17 --> <java.version>17</java.version><!-- 新增节点 --> <mybatis-spring-boot.version>3.0.3<

SpringMVC(3)——SpringMVC注解实战

前言 SpringMVC&#xff08;2&#xff09;——controller方法参数与html表单对应&#xff08;请求参数的绑定&#xff09; 上篇博客我们提到了controller方法的参数与html表单之间的对应关系 但是这种对应关系有很多缺点&#xff1a; 传递参数只能放在request的body当中&am…

极狐Gitlab使用(2)

目录 1. Gitlab命令行修改管理员密码 2. Gitlab服务管理 3. 公司的开发代码提交处理流程 4. Gitlab 备份与恢复 数据备份 测试数据恢复 5. 邮箱配置 1. Gitlab命令行修改管理员密码 [roottty01 ~]# gitlab-rails console -e production # 启动GitLab的Rails控制…

windows USB 设备驱动开发-USB电源管理(一)

符合通用串行总线 (USB) 规范的 USB 设备的电源管理功能具有一组丰富而复杂的电源管理功能。 请务必了解这些功能如何与 Windows 驱动程序模型 (WDM) 交互&#xff0c;特别是 Microsoft Windows 如何调整标准 USB 功能以支持系统唤醒体系结构。 基于内核模式驱动程序框架的 US…