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

news2024/9/21 0:42:00

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

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

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

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

python脚本:

import json

import json


def 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] = value

                break
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.coloradmin.cn/o/1916473.html

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

相关文章

单端口RAM

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 参考代码 描述 题目描述&#xff1a; 设计一个单端口RAM&#xff0c;它有&#xff1a; 写接口&#xff0c;读接口&#xff0c;地址接口&#xff0c;时钟接口和复位&#xff1b;存储宽度是4位&#xff0c;深度128。…

C语言 | Leetcode C语言题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; char** summaryRanges(int* nums, int numsSize, int* returnSize) {char** ret malloc(sizeof(char*) * numsSize);*returnSize 0;int i 0;while (i < numsSize) {int low i;i;while (i < numsSize && nums[i] nums[i …

【公益案例展】亚运天穹——践行亚运理念,筑牢安全防线

‍ 安恒信息公益案例 本项目案例由安恒信息投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数据智能产业最具社会责任感企业》榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 杭州第19届亚运会是中国第三次举办亚洲最高规格的国际综合…

C++ | Leetcode C++题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<string> summaryRanges(vector<int>& nums) {vector<string> ret;int i 0;int n nums.size();while (i < n) {int low i;i;while (i < n && nums[i] nums[i - 1] …

【线性表,线性表中的顺序表和链表】

目录 1、线性表的定义和基本操作1.1、线性表的定义1.2、线性表的基本操作 2、顺序表和链表的比较2.1、顺序表2.1.1、顺序表的定义和特点2.1.2、顺序表的实现&#xff08;1&#xff09;顺序表的静态分配&#xff1a;&#xff08;2&#xff09;顺序表的动态分配 2.1.3、顺序表的基…

Android 性能优化之内存优化

文章目录 Android 性能优化之内存优化内存问题内存抖动内存泄露内存溢出 检测工具Memory ProfilerMemory AnalyzerLeakCanary 内存管理机制JavaAndroid 解决内存抖动问题模拟问题代码使用Memory Profiler工具检测优化技巧 内存泄露问题模拟问题代码使用LeakCanary工具检测优化技…

【常见开源库的二次开发】基于openssl的加密与解密——openssl认识与配置(一)

一、什么是openssl&#xff1f; OpenSSL 是一个开源的软件库&#xff0c;它提供了一系列加密工具和协议&#xff0c;主要用于实现安全通信&#xff0c;如在网络上的数据传输。它支持多种加密算法&#xff0c;包括对称加密、非对称加密、散列函数、伪随机数生成器、数字签名、密…

论文学习_An Empirical Study of Deep Learning Models for Vulnerability Detection

1. 引言 研究背景:近年来,深度学习漏洞检测工具取得了可喜的成果。最先进的模型报告了 0.9 的 F1 分数,并且优于静态分析器。结果令人兴奋,因为深度学习可能会给软件保障带来革命性的变化。因此,IBM、谷歌和亚马逊等行业公司非常感兴趣,并投入巨资开发此类工具和数据集。…

threadx netxduo stm32f407上实现http server

这次用的是CubeIDE CubeMX 要把NX_APP的mem分配的大一些&#xff0c;在app_azure_rtos.c中&#xff0c;我给的是40*1024&#xff0c;如果给的不够&#xff0c;会导致后面无法分配pool和thread等等 需要用到filex 要在CubeMX里面勾选上&#xff0c;还要用到http_server和dhcp …

苹果手机抹机(马来西亚)操作步骤

苹果手机抹机&#xff08;马来西亚&#xff09;操作步骤 操作环境操作步骤 操作环境 苹果6s&#xff0c;没有插卡&#xff0c;就连接上了一个wifi 操作步骤

YOLOv10改进 | Conv篇 | 利用FasterBlock二次创新C2f提出一种全新的结构(全网独家首发,参数量下降70W)

一、本文介绍 本文给大家带来的改进机制是利用FasterNet的FasterBlock改进特征提取网络&#xff0c;将其用来改进ResNet网络&#xff0c;其旨在提高计算速度而不牺牲准确性&#xff0c;特别是在视觉任务中。它通过一种称为部分卷积&#xff08;PConv&#xff09;的新技术来减少…

小白的OS Copilot 产品测评

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

微软推出全新的学习网站 Microsoft Learn

微软官方宣布推出全新的学习网站 Microsoft Learn&#xff0c;供开发人员学习 Microsoft 技术。 该网站包含所有 Microsoft 产品和服务(从 HoloLens 到 Azure)的技术文档。提供了超过 80 小时的学习内容&#xff0c;涉及 Azure、Dynamics 365、PowerApps、Microsoft Flow 和 Po…

杜比全景声——空间音频技术

什么是杜比&#xff1f;是否是标清、高清、超清之上的更清晰的格式&#xff1f;杜比全景声 和传统多声道立体声的差别&#xff1f;杜比全景声音频的渲染方式&#xff1f;车载平台上杜比技术的应用&#xff1f; 杜比技术的起源 杜比实验室&#xff08;Dolby Laboratories&…

谷歌内置AI部署

感谢阅读 准备工作开启功能查看下载情况安装插件效果截图网页版地址&#xff08;需进行前面的所有步骤&#xff09; 准备工作 点我下载谷歌dev版本 注意这个版本不需要卸载之前版本 开启功能 使用下载的浏览器依次导航到下面两个地方&#xff0c;然后点击enablebypass以及en…

STM32 - PWR 笔记

PWR&#xff08;Power Control&#xff09;电源控制 PWR 负责管理 STM32 内部的电源供电部分&#xff0c;可以实现 可编程电压监测器 和 低功耗模式 的功能 可编程电压监测器&#xff08;PVD&#xff09;可以监控VDD电源电压&#xff0c;当VDD下降到PVD阀值以下或上升到PVD…

arm 、stm32、linux该如何学习?有没有先后顺序,先学什么比较好?

先讲自己&#xff0c;我是从Arduino单片机入门&#xff0c;再到stm32 &#xff0c;再开发瑞萨&#xff0c;TI&#xff0c;然后学校教了51。这是一个奇怪的学习过程&#xff0c;所以当我第一次接触51单片机的时候&#xff0c;刚好我有一些资料&#xff0c;是我根据网友给的问题精…

MacOS如何切换shell类型

切换 shell 类型 如果你想在不同的 shell 之间切换&#xff0c;以探索它们的不同之处&#xff0c;或者因为你知道自己需要其中的一个或另一个&#xff0c;可以使用如下命令&#xff1a; 切换到 bash chsh -s $(which bash)切换到 zsh chsh -s $(which zsh)$()语法的作用是运…

c++ learn fourth day

2.LOL Lovers 我们可以从 1 遍历到 len−1&#xff0c;以第 &#x1d456;i 个位置为分割线&#xff0c;统计 [0,i−1] 与 [i,len−1] 的 l 和 o 的个数&#xff0c;判断是否不相等&#xff0c;如果不相等&#xff0c;输出 i&#xff0c;然后退出即可。 如果到最后一直没有输出…

【Mac】Charles for Mac(HTTP协议抓包工具)及同类型软件介绍

软件介绍 Charles for Mac 是一款功能强大的网络调试工具&#xff0c;主要用于HTTP代理/HTTP监视器。以下是它的一些主要特点和功能&#xff1a; 1.HTTP代理&#xff1a;Charles 可以作为HTTP代理服务器&#xff0c;允许你查看客户端和服务器之间的所有HTTP和SSL/TLS通信。 …