【前端笔记】记录一个能优化Echarts Geo JSON大小的网站

前端在使用Echarts等可视化图表库会不可避免遇到的问题,渲染地图的数据太大。 而有那么一个网站能给予这个问题一个解决方案:链接在此

使用方法很简单,首先先进入网站,如果进入了会是这个页面:

在这里插入图片描述

接着,选择一个Geo JSON文件(或者页面上提示的所支持的文件都可)。选择完文件后成功的话会是这样:

在这里插入图片描述

我这个是拿的已经优化过的中国地图的Geo JSON数据,这里可以看到整整齐齐排列的34个方块,具体含义不需要知道太详细,只需要知道是代表着检测出来的区域数量(这里代表着这份地图数据有34个区域)

最后,点击右上角的导出按钮,就可以按照自己的需要导出数据:

在这里插入图片描述
如图,如果我们需要在Echarts中使用,可以选择最后2个导出并使用。
关于优化的大小,我拿已经优化过的数据举例,优化前:96KB —> 优化后:6KB(仅供参考)

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

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

相关文章

HCIP的学习(25)

VLAN间通讯技术 使用多臂路由的方式 ​ 路由器的物理接口默认是不识别802.1Q标签的,所以,交换机连接路由器的接口在发送数据帧时,应该将标签剥离。----一般常使用Access接口配置。 单臂路由 ​ 所谓的单臂路由,实际上试讲路由器…

【主流分布式算法总结】

文章目录 分布式常见的问题常见的分布式算法Raft算法概念Raft的实现 ZAB算法Paxos算法 分布式常见的问题 分布式场景下困扰我们的3个核心问题(CAP):一致性、可用性、分区容错性。 1、一致性(Consistency):…

Docker是什么?使用场景作用及Docker的安装和启动详解

目录 Docker是什么? Docker的发展 Docker的安装 Docker使用 Docker的运行机制 第一个Docker容器 进入Docker容器 客户机访问容器 Docker是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker …

记录深度学习GPU配置,下载CUDA与cuDnn

目标下载: cuda 11.0.1_451.22 win10.exe cudnn-11.0-windows-x64-v8.0.2.39.zip cuda历史版本网址 CUDA Toolkit Archive | NVIDIA Developer 自己下载过11.0.1版本 点击下载local版本,本地安装,有2个多GB,很大,我不喜欢network版本,容易掉线 cuDnn https://developer.nvi…

设置AXI主寄存器切片和AXI数据FIFO

设置AXI主寄存器切片和AXI数据FIFO 打开MHS文件&#xff0c;并为每个AXI主机设置启用寄存器切片/启用数据FIFO。到 确定正确的设置&#xff0c;使用下表中的信息搜索MHS。 进行搜索时&#xff0c;将<intf_name>替换为相关的BUS_INTERFACE名称。 例如&#xff0c;BUS_INTE…

Docker部署SpringBoot项目(jar包+Mysql)

部署Java项目 项目准备准备Java项目镜像准备配置网络 部署项目细节展示 项目准备 准备Java项目 hmall项目是一个maven聚合项目&#xff0c;使用IDEA打开hmall项目&#xff0c;查看项目结构如图&#xff1a; 我们要部署的就是其中的hm-service&#xff0c;其中的配置文件采用…

还在使用Swagger吗?ApifoxHelper插件隆重登场

目录 前言 安装Apifox Idea插件安装 插件令牌配置 获取令牌 Idea配置令牌 快速上手 同步文档 查看文档 结语&#xff1a; 前言 最近发现一款特别好用的插件&#xff0c;帮助开发者快速生成接口文档。ApifoxHelper插件实现代码零侵入&#xff0c;只需要写上相应注释即可…

K8s种的service配置

什么是service 官方的解释是:   k8s中最小的管理单元是pod&#xff1b;而service是 将运行在一个或一组 Pod 上的网络应用程序公开为网络服务的方法;   Kubernetes 中 Service 的一个关键目标是让你无需修改现有应用以使用某种服务发现机制。 你可以在 Pod 集合中运行代码…

K-独立钻石(dfs),G-邪恶铭刻(贪心)

这两题&#xff0c;都是应该赛场上A出来的。 K.独立钻石 当时一直关注点在 I. Path Planning&#xff0c;没关注榜单&#xff0c;K,也能写&#xff0c;也就是dfs,从数据范围可以看出&#xff0c;直接暴力搜索。 代码 #include<bits/stdc.h> #define int long long #d…

读书短视频脚本:四川京之华锦信息技术公司

读书短视频脚本&#xff1a;打造引人入胜的文学世界 随着短视频平台的兴起&#xff0c;各类内容以更加直观、生动的方式呈现在观众面前。在这个信息爆炸的时代&#xff0c;如何将书籍的精华和魅力通过短视频这一新兴媒介传递给更多人&#xff0c;成为了一个值得探讨的话题。四…

C# 正则表达式使用小计

此文档用于记录平时使用正则表达式的心得&#xff0c;不定期更新 基础 实例 替换实例一 //这里匹配以 “( 开头,以 )” 结尾的字符串 private static Regex REGEX_ARG_CONTENT new Regex("""(.*?)""");//此方法用于在匹配到的结果前添加字符…

【教程】利用API接口添加本站同款【每日新闻早早报】-每天自动更新,不占用文章数量

本次分享的是给网站添加一个每日早报的文章&#xff0c;可以看到本站置顶上面还有一个日更的日报&#xff0c;这是利用ALAPI的接口完成的&#xff01;利用接口有利也有弊&#xff0c;因为每次用户访问网站的时候就会增加一次API接口请求&#xff0c;导致文章的请求会因为请求量…

【python】删除一个列表中的所有的1

删除所有的1 x [1, 1, 6, 3, 9, 4, 5, 1, 1, 2, 1, 9, 6, 4] 使用lambda函数和filter来过滤掉x中的1 filtered_x list(filter(lambda n: n ! 1, x)) 不是1的数字&#xff0c;存进x列表&#xff0c;filter用于插入元素到第二个位置 print(filtered_x) # 输出: [6, 3, 9, …

Discourse 编辑没有办法显示更多的 JS 错误

Priority/Severity: High Platform: 3.3.0.beta3-dev UI bugs Description: 昨天升级的时到最新版本的时候就发现有这个错误&#xff0c;是 JS 的错误。 发了一个帖子到官方的网站上&#xff0c;官方说可能是插件的问题。 但是我们实在是没有安装什么插件呀&#xff1f; 官方…

“一带一路”六国国际拳王冠军赛特克斯站新闻发布会顺利举行

实习记者&#xff1a;喀兰姆罕 5月24日&#xff0c;“一带一路”六国国际拳王冠军赛特克斯站新闻发布会在特克斯县阿克塔斯姑娘峰景区举行。这次拳王冠军赛事由新疆广播电视台、特克斯镇人民政府&#xff0c;特克斯县文化体育广播电视和旅游局主办&#xff0c;将于6月15日在特…

宿舍管理系统代码详解(操作界面)

目录 一、前端代码 1.样式展示 2.代码详解 <1>主页面列表部分 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <2>新增页面 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 <3>修改页面…

NXP i.MX8系列平台开发讲解 - 3.13 Linux 之Audio子系统(二)

专栏文章目录传送门&#xff1a;返回专栏目录 目录 1. Linux ALSA 内核框架 2. Linux ALSA 代码分析 2.1 声卡驱动初始化 2.2 声卡创建注册 2.3 PCM设备创建 3. ALSA ASoC 3.1 Machine 3.2 Platform 3.3 Codec 上一章节&#xff0c;对于Linux Audio子系统有了大概的了解…

LabVIEW通过以太网控制PLC程序开发

在使用LabVIEW通过以太网控制PLC程序开发时&#xff0c;需要综合考虑硬件、软件和通信协议的协调工作。以下是详细步骤、注意事项、重点和难点分析&#xff0c;以及几种实现方式及其特点的概述。 实现步骤 确定硬件和软件环境&#xff1a; 确定PLC型号和品牌&#xff08;如西门…

WebGL技术在工程控制中的应用

WebGL技术在工程控制中的应用非常广泛&#xff0c;它利用了浏览器内的强大图形处理能力&#xff0c;可以为工程领域提供实时的三维可视化和交互功能。以下是WebGL在工程控制中的几个主要应用领域及其具体应用。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…

【Qt 学习笔记】Qt窗口 | Qt窗口介绍 | QMainwindow类及各组件介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt窗口 | Qt窗口介绍 | QMainwindow类及各组件介绍 文章编号&#xff…