qziovv的博客

原创 渲染大量地理数据

基于GeoJSON-VT动态生成大规模GeoJSON文件的矢量瓦片 | Bonfire

原创 在线编辑矢量瓦片思路

转载 Cesium 设置地球的背景图

就是通过CSS的方式动态设置viewer所在的DOM的背景图片，并将backgroundRepeat设置为'no-repeat'，backgroundSize设置为'cover'，充满整个屏幕即可。5、前端增加pick-color组件，将组件获取到的颜色数据赋值给场景scene的backgroundColor即可，这样就实现了纯色背景设置。4、本篇文章采用vue-pick-colors作为颜色选取组件，MIT协议，协议比较友好而且使用比较简单方便。执行npm安装组件。2、设置场景scene的背景色为透明。

原创 element plus 国际化

响应式监听❌ 无法监听外部变化✅ 完美监听（跨标签页、跨页面）易用性复杂（需解析字符串）简单（setItemgetItem跨页面同步❌ 不能自动同步✅ 自动同步（所有标签页都生效）是否推荐❌ 不推荐✅ ✅ ✅ 强烈推荐。

原创 RSA 签名 + 机器指纹 方案

1. 将 `PUBLIC_KEY_PEM` 中的内容替换为你生成的 `license_public.pem` 的全部内容（包括 `-----BEGIN...` 和 `-----END...`）3. 你运行：`python issue_license.py <客户机器指纹> 2026-12-31`- `license_manager.py` 和 `cryptography` 需要打包进去。- `license_private.pem` 绝对不要打包；- 用户无法伪造 license（没有你的私钥）；

原创 全球数据生成等值线时，产生毛刺的情况

如图，是典型的。

原创 vim操作

所有的 Unix Like 系统都会内建 vi 文书编辑器，其他的文书编辑器则不一定会存在。但是目前我们使用比较多的是 vim 编辑器。vim 具有程序编辑的能力，可以主动的以字体颜色辨别语法的正确性，方便程序设计。下面主要分享vim的一些常用操作，在我们的日常系统维护中是必要的。下面是vim的一张键盘图。

原创 PostGIS 动态投影栅格数据

在web地图加载过程中，常有多源数据需要入库加载，不同来源的数据难免会有着，坐标系不同的问题。现在我们也可以通过PG的坐标转换函数，对数据进行重投影（生产环境不建议使用）ST_Transform(rast, 4326) //转换函数。一般解决办法是，在数据入库之前就进行数据的处理，与转换。可以使用node，建立后端连接。使用maplibre加载。

原创 深度选择器（Deep Selector）覆盖样式——el滑块样式修改

精细地自定义（比如改变 thumb 形状、添加图标、渐变轨道等），可以使用。是 Vue 3 推荐的深度选择器语法（替代。示例：自定义滑块样式。

原创 element plus 样式覆盖

【代码】element plus 样式覆盖。

原创 风场可视化 - 双分量数据

格网数据>格网的json数据>修复转换后数据的非法值。

原创 Mapliber加载geoserver服务，请求瓦片超出范围

请求范围每个瓦片的小范围相同的大范围请求次数多次（视图需要的瓦片数）多次（每个瓦片一次）单次请求数据量小大总数据传输量小大性能优差标准符合性符合 WMS 最佳实践不推荐适用场景生产环境不推荐使用建议始终使用占位符，这样可以让 MapLibre 自动为每个瓦片计算合适的边界框，实现最佳的性能和用户体验。

原创 控制Vue对话框显示隐藏

el-dialog title="报文详情" :visible.sync="dialogVisible"><el-dialog title="报文详情" v-model="dialogVisible"><el-dialog title="报文详情" v-show="dialogVisible">，因为 Element Plus 的。Element Plus 会自动把。

原创 Cesium三维球的旋转

这段代码实现了一个场景相机自动旋转效果。通过scene.postRender事件监听器，每帧对相机绕Z轴旋转0.1弧度（约5.7度），创建平滑的旋转动画。核心是利用Cesium的相机旋转API和事件系统，适合用于3D场景展示时的自动视角旋转功能。代码简洁，仅需3行即可实现持续性旋转效果。

原创 为什么是直接在**原型（prototype）上**添加函数

JavaScript 是一种基于 **原型继承（Prototype-based Inheritance）** 的语言，而不是像 Java/C++ 那样使用类继承。| 在构造函数里加方法 `this.xxx = function(){}` | ❌ 不推荐 | 每次新建实例都创建新方法，浪费内存 || 在原型上加方法 `.prototype.xxx` | ✅ 推荐 | 方法共享、节省内存、支持继承 |> 为什么是直接在**原型（prototype）上**添加函数，而不是在类/构造函数内部直接添加？

原创 Pnpm的使用

是一个快速、节省磁盘空间的 Node.js 包管理工具，相比。是一个快速、节省磁盘空间的 Node.js 包管理工具，相比。技术优化了依赖安装效率。技术优化了依赖安装效率。

原创 将shadertoy代码移植至cesium

【代码】将shadertoy代码移植至cesium。

原创 WebGL 3着色器和GLSL

我们之前提到过着色器和GLSL，但是没有涉及细节，你可能已经对此有所了解， 但以防万一，这里将详细讲解着色器和GLSL。在中我们提到，WebGL每次绘制需要两个着色器， 一个和一个，每一个着色器都是一个。一个顶点着色器和一个片段着色器链接在一起放入一个着色程序中（或者只叫程序）。一个典型的WebGL应用会有多个着色程序。

原创 Maplibgre-gl 学习1 初识

因为Mapbox现在闭源了，Maplibre就随之诞生。相容，可以直接换 (在二月的時候有出一个。MapLibre GL 目前与本来。

原创 Git 恢复误删除的文件

由于一些操作，把项目中的大量文件删除了，还以为之前敲得代码都付之东流了，突然想起，我的项目使用git进行的版本管理，且一些更改都暂存在本地的仓库的，因此可以使用git来恢复存入仓库的文件。如果恢复成功，你应该不会再看到这些文件出现在“Changes not staged for commit”部分。这将显示哪些文件被修改、删除或未跟踪。会显示下面三种类型的文件。

原创 WebGL 2工作原理

WebGL在GPU上的工作基本上分为两部分假设你正在画三角形，顶点着色器每完成三次顶点处理，WebGL就会用这三个顶点画一个三角形对于每一个像素，它会调用你的片段着色器询问你使用什么颜色。你通过给片段着色器的一个特殊变量设置一个颜色值，实现自定义像素颜色。处理每个像素时片段着色器可用信息很少，幸运的是我们可以给它传递更多信息想要从传值到，我们可以定义“

原创 WebGL名词解释——裁剪空间

裁剪空间是一个标准化的三维空间，用于表示顶点在进入光栅化阶段之前的位置。

原创 Git ——提交至github，Vercel拉取，更新不了项目的问题解决

发现好像是vercel拉取不了项目，vercel登录的邮箱与我此次提交更改的邮箱不匹配，查看Git的user确实如此（之前的项目是在自己电脑上提交的，这次是在另一台电脑提交的且git账户不同）运行后会在终端显示一个使用vim编辑的文件，如有更改自行更改，我是直接 :wq 保存退出。首先因为github上有个错误。

原创 Canvas学习1 绘制图形

学习绘制矩形，三角形，直线，圆弧和曲线绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。

原创 canvas初步了解

是一个可以使用脚本 (通常为) 来绘制图形的元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。Canvas 的默认大小为 300 像素 ×150 像素（宽 × 高，像素的单位是 px）。但是，可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个 JavaScript 上下文对象，它能动态创建图像元素创造了一个固定大小的画布，它公开了一个或多个，其可以用来绘制和处理要展示的内容。canvas 起初是空白的。

原创 WebGL 1初步学习

简单来说，就是网页使用 WebGL 这个API对绘画的程序进行控制，使用glsl着色器代码，在GPU中进行运算，输出运算结果在网页的canvas进行展示参考：​​​WebGL浅入浅出，不深入了解一下吗？- 知乎WebGL：web 中的 2D 的 3D 图形 - Web API | MDNWebGL 概念和基础入门-优快云博客GLSL基础概念（绝对看得懂）-优快云博客GLSL 着色器 - 游戏开发 | MDNWebGL 着色器和GLSL。

原创 Github搭建个人网站

GitHub Pages documentation - GitHub Docs如何在 GitHub 上搭建个人网站（github.io） - 南枫Von - 博客园

原创 VUE配置反向代理

注意 配置更改完反向代理的配置文件Vue.config.js的文件的时候，需要重启一下项目。

原创 GIT 撤销上次推送

如果其他开发者已经基于您错误推送的提交进行了工作，直接撤销推送可能会导致他们的工作丢失。如果您的推送操作刚刚完成，并且没有其他开发者在此期间提交新的更改，可以使用以下方法撤销推送。使用以下命令查看提交历史，找到推送前的最后一次提交的哈希值（例如。如果您已经知道推送前的最后一次提交的哈希值（例如。

原创 CSS 父类元素的伪类 选择器

如果嵌套层级更深，也可以通过类似的方式控制更深层次的子元素。状态时，可以通过 CSS 的选择器为子元素设置样式。当鼠标悬停在菜单项上时，显示子菜单或改变子菜单的样式。状态可以影响子元素的样式。当鼠标悬停在卡片上时，改变卡片内容的样式。

原创 vue3父子组件传值

父传子：使用。子传父：使用和emit。双向绑定：使用v-model和。跨层级传值：使用provide和inject。提供了更灵活和强大的方式来组织组件逻辑，特别是在复杂场景下。如果还有其他问题或需要更详细的示例，请随时补充说明！

原创 Ubuntu通过局域网共享文件夹实现文件夹的连接

2 修改该文件的属性，设置共享，添加everyone的读取/写入权限。4 注意别敲错了，-o之后的都是一些配置选项，可以自行AI查看具体含义。1 选择一个文件夹或创建一个文件夹，作为共享文件夹。2 下载依赖包（若连接不上网络可离线安装）1 关闭Ubuntu的防火墙。3 打开电脑的网络共享。

原创 Cesium加载离线底图

前期准备：1 切片的影像数据（有很多种方法在此就不在赘述了）2 Nginx简单来说就是，用Nginx管理影像的切片服务，将本机作为服务器来访问静态资源。弊端是切片层级越高占用的空间越大。

原创 将本地已有的项目上传至仓库

上传的仓库为Gitee。

原创 Python的虚拟环境

在激活的虚拟环境中，你可以直接运行你的Python脚本，它将使用虚拟环境中的Python解释器和库。选择一个目录作为你的项目目录，然后在该目录中创建虚拟环境。来安装项目所需的库和依赖项。这些库将只安装在当前的虚拟环境中。激活后，你应该会在命令行提示符前看到虚拟环境的名称（如。是虚拟环境的目录名，你可以根据需要更改它。如果你不再需要虚拟环境，可以删除其目录。（直接退出终端也可以）

原创 使用Vite模块化开发

4 设置好项目名称后，选择需要模块化开发的模式。6 设置完成后，运行下列3行代码即可运行项目。1 打开命令提示行，cd至项目所需的位置。3 将会询问你项目的名称。5 选择使用的开发语言。

原创 浏览器报错 1

这个错误通常是由于安全策略限制导致的。我们需要在 index.html 中添加一些必要的配置来解决这个问题。这些修改应该能解决沙箱限制的问题。

原创 Cesium学习记录 1

CesiumJS 需要在您的服务器上托管一些静态文件，例如 Web Worker 和 SVG 图标。在导入 CesiumJS 之前必须设置 window.CESIUM_BASE_URL 全局变量。它必须指向提供这四个目录的 URL。1 在Cesium官网上注册登录，申请token。2 使用CDN导入API。3 将API下载到本地。使用Vite构建项目后。

原创 Arcgis for javascript——更改天地图样式

深度解析fetchTile函数。

原创 Arcgis for javascript ——路径分析

【代码】Arcgis api ——路径分析。