当前位置: 首页 > news >正文

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

相关文章:

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

前端在使用Echarts等可视化图表库会不可避免遇到的问题,渲染地图的数据太大。 而有那么一个网站能给予这个问题一个解决方案:链接在此 使用方法很简单,首先先进入网站,如果进入了会是这个页面: 接着,选择一…...

车与网络之间(V2N)简介

车与网络之间(V2N)简介 一、定义与概述 V2N,全称为Vehicle-to-Network,是指车辆与网络之间的通信和连接技术。这种技术使得车辆能够与互联网进行无缝连接,进而实现导航、娱乐、防盗等多种应用功能。在智能交通系统领…...

.Net Core WebAPI参数的传递方式

Controller继承自ControllerBase,只不过增加了视图相关的方法,一般mvc项目选用Controller而Web API项目选择ControllerBase即可。 给服务器传递参数的时候,有URL、QueryString、请求报文体3种方式 请求路径/Student/GetAll/school/MIT/class…...

10款免费黑科技软件,强烈推荐!

1.AI视频生成——巨日禄 网页版https://aitools.jurilu.com/ "巨日禄 "是一款功能强大的文本视频生成器,可以快速将文本内容转换成极具吸引力的视频。操作简单,用户只需输入文字,选择喜欢的样式和模板, “巨日禄”就会…...

DFS:解决二叉树问题

文章目录 了解DFS1.计算布尔二叉树的值思路代码展示 2.求根节点到叶节点数字之和思路代码展示 3.二叉树剪枝思路代码展示 4.验证二叉搜索树思路分析代码展示 5.二叉搜索树中第k小元素思路:代码展示 6.二叉树的所有路径思路分析代码展示 总结 了解DFS 所谓DFS就是就…...

【相机开发问题总结】曝光补偿ExposureCompensation未生效异常分析及解决

问题描述 做一款相机应用时,用户反馈相机预览界面太暗了,由于我们是嵌入式设备,没有手机那么高大上得闪光灯补光,因此只能考虑从软件层面提高界面亮度,还好找到了曝光补偿,但是开发过程中发现曝光补偿未生…...

Flutter 中的 DateRangePickerDialog 小部件:全面指南

Flutter 中的 DateRangePickerDialog 小部件:全面指南 在 Flutter 应用开发中,日期和时间的选择是一项常见的用户交互需求。DateRangePickerDialog 是一个方便的小部件,它提供了一个对话框界面,允许用户选择日期范围。这个小部件…...

MCS-51伪指令

上篇我们讲了汇编指令格式,寻址方式和指令系统分类,这篇我们讲一下单片机伪指令。 伪指令是汇编程序中用于指示汇编程序如何对源程序进行汇编的指令。伪指令不同于指令,在汇编时并不翻译成机器代码,只是会汇编过程进行相应的控制…...

vue3 vant4实现抖音短视频功能

文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点&#xff08;本文章不写&#xff0c;只写核心代码&#xff09; 1. 实现效果 2. 精简版核心代码 使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现 <template><div :style"{width: width px,overflo…...

C#结合JS实现HtmlTable动态添加行并保存到数据库

目录 需求 效果视频演示 范例运行环境 准备数据源 数据表设计 UI及表结构Json配置 Json数据包提交配置 设计实现 前端UI Javascript 脚本 Jquery引用 C# 服务端操作 小结 需求 在 Web 应用项目中&#xff0c;实现一对多录入的数据管理功能是一项常见的应用。因此…...

Unity Render Streaming 云渲染 外网访问

初版&#xff1a; 日期&#xff1a;2024.5.20 前言&#xff1a;临时思路整理&#xff0c;后期会详细补充 环境&#xff1a; 1. 阿里云服务器 需要安装好nodejs 、npm 2. windows电脑&#xff0c;需安装好 nodejs 、npm 3.Unity 2021.3.15f1 4.Unity Render Streaming …...

美易官方:Copilot全面升级!

Copilot的全面升级&#xff0c;无疑在科技界掀起了一场革命性的浪潮&#xff01;微软在一夜之间推出的这50余项AI更新&#xff0c;不仅彰显了其在人工智能领域的深厚底蕴&#xff0c;更是让全球用户见证了计算机理解人类能力的一次飞跃。 在微软2024年Build开发者大会的主题演…...

深入了解FreeRTOS:实时操作系统的核心概念和应用

前言&#xff1a; 在当今数字化世界中&#xff0c;嵌入式系统扮演着至关重要的角色&#xff0c;从工业自动化到智能设备&#xff0c;无所不在。而实时操作系统&#xff08;RTOS&#xff09;则是这些系统的核心引擎&#xff0c;它们负责管理任务、资源和时间&#xff0c;确保系统…...

Spring框架学习笔记(五):JdbcTemplate 和 声明式事务

基本介绍&#xff1a;通过 Spring 框架可以配置数据源&#xff0c;从而完成对数据表的操作。JdbcTemplate 是 Spring 提供的访问数据库的技术。将 JDBC 的常用操作封装为模板方法 1 JdbcTemplate 使用前需进行如下配置 1.1 在maven项目的pom文件加入以下依赖 <dependencies…...

考研计组chap1计算机系统概述

目录 一、计算机发展历程(不考了) 二、计算机硬件的基本组成 3 1.五个部分 &#xff08;1&#xff09;输入设备 &#xff08;2&#xff09;控制器 &#xff08;3&#xff09;运算器 &#xff08;4&#xff09;&#xff08;主&#xff09;存储器 &#xff08;5&#xff0…...

如何使用Python中的生成器

如何使用Python中的生成器 在Python中&#xff0c;生成器是一种特殊的迭代器&#xff0c;它允许你逐个地生成值&#xff0c;而不是一次性地计算并存储所有的值。这对于处理大量数据或者无限序列特别有用&#xff0c;因为它能够节省内存并提高效率。 生成器通常是通过以下两种…...

C语言 读取 MIDI文件头部

在C语言中直接读取MIDI文件并不简单&#xff0c;因为MIDI文件是一种包含音乐事件&#xff08;如音符的开始和结束、控制信号等&#xff09;的二进制格式&#xff0c;而不是像文本文件那样容易解析。不过&#xff0c;你可以通过以下步骤来实现&#xff1a; 了解MIDI文件格式&am…...

C# Winform实现五子棋游戏(代完善)

实现了基本的玩法。 BoardController.cs using System;namespace GomokuGame {public class BoardController{private static BoardController instance;private readonly int[,] board;private const int boardSize 15;private BoardController(){board new int[boardSize…...

文档档案管理系统整体建设方案书(实际项目原件word2024)

1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 数据备份技术 3.系统功能设计 3.1.功能清单列表 3.2.基础数据管理 3.3.位置管理 3.4.文档使用 3.5.文档管理 软件全套资料包获取方式①&#xff1a;软件项…...

React与Vue的区别?

一、区别: 1. 语法 Vue采用自己特有的模板语法&#xff1b; React是单向的&#xff0c;采用jsx语法创建react元素。 2.监听数据变化的实现原理不同 Vue2.0 通过Object.defineproperty()方法的getter/setter属性, 实现数据劫持, 每次修改完数据会触发diff算法(双端对比) …...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...