- 博客(122)
- 收藏
- 关注
RSS订阅原创 websoket 保姆级使用及封装（重连reconnecting-websocket）
WebSocket是一种双向、全双工的实时通信协议，解决了HTTP协议单向通信和短连接的痛点。它通过长连接实现前后端双向实时通信，适用于即时通讯、实时监控等场景。WebSocket的核心事件包括open（连接成功）、message（接收消息）、error（连接错误）和close（连接断开）。在项目中可通过封装WebSocket工具类，结合自动重连机制和Vue生命周期管理，实现稳定可靠的实时通信功能。相比HTTP，WebSocket显著提升了实时性和通信效率，是实时应用场景的理想选择。
2026-03-04 16:11:54
378
原创 entity几何体轴编辑（沿 Z 轴平移）完整流程拆解
dragPlane 的核心作用：是轴拖拽的 “隐形轨道”，保证多边形只能沿轴移动，不跑偏；ENU 轴向量的意义：贴合地形（山坡上拖 Z 轴沿坡面高低移，不是地球正上方）；点乘的作用：只保留轴方向的偏移（拖 Z 轴只算高度，过滤左右 / 前后偏移）；连续拖拽的关键：每次移动后更新，基于当前位置计算，不是初始位置；鲁棒性保障：参数校验、微小偏移过滤、极端情况处理，避免代码崩溃。简单说：轴编辑的本质是 “给多边形加一个沿指定轴的‘移动轨道’，让鼠标只能在轨道上拖，拖多少就移多少”。if (!
2026-01-31 18:14:03
761
原创 entity几何体旋转圈编辑（绕 Z 轴旋转）完整流程拆解
本文详细讲解了3D多边形绕Z轴旋转的完整实现流程，采用"零基础人话+完整步骤+代码逐行拆解"的方式。核心流程包括：1）初始化渲染旋转圈；2）用户点击触发旋转；3）计算旋转中心、轴和约束平面；4）实时计算旋转角度；5）应用旋转矩阵变换顶点。关键点：旋转约束平面垂直于旋转轴，通过叉乘和点乘精确计算旋转角度，采用"平移-旋转-平移"的三步法变换顶点位置。相比轴拖拽平移，旋转圈编辑的核心是改变多边形朝向而非位置，实现更自然的3D交互体验。
2026-01-31 18:11:24
837
原创 Cesium 轴拖拽 + 旋转圈拖拽 核心数学知识
对两个三维向量 a=(ax,ay,az)、b=(bx,by,bz)：a⋅b=axbx+ayby+azbz。
2026-01-31 18:05:26
1034
原创 Cesium 中沿局部 Z 轴（高度轴）精准拖拽的优化版逻辑
本文介绍了Cesium中沿Z轴精准拖拽功能的优化实现。核心改进包括：1）直接从4x4矩阵索引8/9/10获取Z轴向量，提高性能；2）使用世界坐标系相机向量（directionWC/rightWC）确保计算精度；3）优先采用相机右向量计算法向量，使拖拽交互更直观；4）用magnitudeSquared替代magnitude优化性能；5）增强空值判断的鲁棒性。通过约束平面构建和点乘运算，确保拖拽操作仅沿垂直方向移动，实现高度变化的精准控制。优化后的代码在交互体验、计算精度和运行效率方面均有提升。
2026-01-31 16:57:32
842
原创 【无标题】
本文解析了Cesium地图工具函数getPosition的实现逻辑。该函数接收三维坐标(Cartesian3)，计算对应点的经纬度，并智能获取最高高程值：1) 转换坐标至地理坐标系并转为经纬度；2) 通过场景拾取功能获取模型/地形表面高程；3) 返回原始海拔与实际高程中的较大值。特别适用于需要精确获取地表或3D Tiles模型最高点的场景（如建筑物顶部），有效整合了地形数据和模型高程信息。当点在视野外或未拾取到表面时，默认返回原始海拔值。
2025-11-04 18:57:39
334
原创 关于 Vite 中环境变量（.env 文件）自定义打包的使用
Vite环境变量使用指南：通过.env文件管理不同环境配置，开发环境加载.env.development，生产环境加载.env.production。变量需以VITE_开头，客户端通过import.meta.env访问，vite.config.js使用loadEnv加载。打包时变量会被静态替换，可通过--mode指定自定义环境（如测试环境）。注意敏感信息保护，建议为不同环境创建专属命令（如build:test）。支持动态配置输出目录等进阶用法，实现多环境无缝切换。
2025-11-04 18:51:52
771
原创 在 Cesium 中，实体（Entity）被地形遮挡通常是因为没有正确处理地形高程或实体的高度参考方式
本文介绍了Cesium中disableDepthTestDistance属性的作用与使用方法。该属性用于控制3D场景中实体的深度测试行为，解决物体被地形或其他几何体遮挡的问题。通过设置不同数值（如0、具体数值或Number.POSITIVE_INFINITY），可以灵活控制实体是否始终显示在最上层。文章还提供了使用场景示例和注意事项，建议根据实际需求合理选择数值，在确保重要标记可见的同时保持场景的真实感。
2025-10-09 16:56:53
515
原创 Promise.then() 链式调用 和 async/await 语法
可读性更高：线性代码比嵌套回调更易理解，尤其后续扩展多步骤异步逻辑时（如 “请求 1→处理 1→请求 2→处理 2”）；可控性更强：外部可通过await等待函数内所有异步操作完成，避免 “数据未就绪就执行后续逻辑” 的 bug；错误更易处理：配合try/catch可统一捕获所有异常，便于排查问题（如网络错误、数据格式错误）。async函数会默认返回Promise，调用时需用await或.then()处理，避免直接同步调用导致逻辑错位。函数写法函数返回值函数结束时机外部能否感知内部异步完成？
2025-09-29 11:07:56
814
原创 cesium 关闭右键事件触发浏览器右键菜单事件
这段代码实现了在Cesium地图中禁用右键菜单并自定义右键点击事件处理。主要功能包括：1) 通过ScreenSpaceEventHandler监听RIGHT_CLICK事件；2) 使用preventDefault()阻止默认右键菜单弹出；3) 调用自定义的MapRightClick函数处理右键点击逻辑。代码同时设置了全局的document.oncontextmenu事件来彻底禁用浏览器默认右键菜单。
2025-09-19 16:08:22
176
原创 cesium entities lineEntity折线材质详细解析
重点经验所得：1.折线的贴地 会影响zoomto时候的计算高。，zoomto的时候第三个属性不写则，自动计算合适的展示整条折线的位置。而再折线有高程的时候贴地影响其zoomto的计算。2.当我们给折线材质的时候，如果地图刚刚好是带有地形的，那么折线如果只加material材质，被地形覆盖的部分视觉上将无法展示。这是采用depthFailMaterial材质来回显被掩盖的部分。最初使用的是发光材质就是下面的注释部分。
2025-09-15 14:55:18
386
原创 js获取当前时间
本文介绍了生成格式为YYYYMMDDHHmmss的时间字符串的JavaScript实现方法。代码使用Date对象获取年月日时分秒，并通过padStart(2,'0')方法确保所有时间单位保持两位数（不足补0）。特别说明：1)原代码缺少小时处理，现补充完整；2)建议将变量名改为更规范的驼峰命名（如minute、second）；3)最终字符串格式可根据需求选择是否包含小时。该方法适用于需要时间戳作为唯一标识的场景（如订单号、日志编号等）。
2025-08-09 17:11:01
429
原创 Cesium 中拾取 3DTiles 交点坐标
这段代码实现了在Cesium三维地球场景中处理鼠标左键点击事件的功能。主要逻辑包括： 通过ScreenSpaceEventHandler监听左键点击事件 点击时获取场景中的拾取对象和位置信息 对3DTiles特征进行特殊处理，获取点击位置的世界坐标 将坐标转换为经纬度和高度，并添加标记点实体显示坐标信息 代码提供了三种不同的拾取方法： scene.pick()获取场景中所有可拾取对象 scene.pickPosition()获取交互对象坐标 globe.pick()专门获取地表坐标 同时包含了对坐标的有效性
2025-08-05 18:36:41
403
原创 在 Cesium 中用三个点构建平面并实现鼠标移动拾取平面坐标
本文介绍了如何在Cesium中创建自定义平面并进行鼠标交互。首先通过三个经纬度坐标点定义平面，计算向量和法向量后构建平面对象。然后在鼠标移动事件中，通过射线与平面求交的方式获取鼠标在当前平面上的三维坐标点。该方法实现了将二维屏幕坐标映射到特定三维平面的功能，可用于实现平面上的交互操作。
2025-08-05 10:13:40
172
原创 cesium视锥体
该代码实现了一个Cesium 3D场景中的无人机相机视锥体可视化工具。核心类Vertebral通过接收无人机位置(经纬度、海拔)、姿态(偏航角、俯仰角)和相机参数(焦距)，创建并管理3D视锥体。主要功能包括：1) 根据无人机参数计算视场角；2) 使用Cesium的FrustumGeometry创建视锥体几何体；3) 实时更新视锥体位置和形状；4) 提供销毁功能。视锥体由半透明填充区域和轮廓线组成，直观显示无人机相机的拍摄范围，适用于测绘、巡检等需要精确控制拍摄范围的场景。
2025-07-31 17:30:57
1019
原创 cesium 测量距离
摘要：本文介绍了基于Cesium实现的距离测量功能，在原有高度测量基础上新增了多点连续距离测量能力。通过封装测量逻辑，实现了左键添加测量点、右键结束测量、鼠标移动实时预览的功能。测量过程中显示分段距离和总距离标签，并使用不同图标标识起点终点。代码采用属性隔离设计，避免与高度测量功能冲突，并完善了事件处理和资源清理机制。测量结果精确到小数点后三位（米），支持在三维场景中直观展示空间距离。
2025-07-30 17:09:34
438
原创 cesium 测量高度
摘要 本文介绍了一个基于Cesium的高度测量工具实现方案。该方案通过鼠标交互实现高度差测量功能，主要特点包括： 测量逻辑封装在CesiumMap类中，包含启动测量（startHeightMeasure）、处理点击（handleMeasureLeftClick）和鼠标移动（handleMeasureMouseMove）等方法 测量时先在基准点左键点击，然后在移动鼠标过程中实时显示高度差预览 测量结果显示为黄色线段连接基准点和测量点，并带有高度差标签 实现细节包括坐标转换工具函数、参考圆绘制以及测量状态管理
2025-07-30 16:57:43
380
原创 cesium 通过经纬度查找实体
其实居于查找实体更多的就是鼠标时间点击查找,我前面也是这样,后面因为有一个需要是输入框里面的经纬度 变化要去修改实体的位置,而我原本的代码这个输入框是没有办法锁定该实体的,我就想在之前我点击鼠标事件的时候也可以获取实体,我就将经纬度坐标转化为鼠标点击的屏幕坐标然后再获取实体发现这样得到的结果其实跟鼠标点击时候得到的完全不一样,,so没有办法,就有了上面经纬度找实体的方法.给一下我的来时路代码,废话不多说,传入坐标返回实体.
2025-07-16 18:32:45
270
原创 为什么depthFailMaterial 不生效的原因
摘要：Cesium中depthFailMaterial用于处理线段被地形或3D对象遮挡时的渲染问题。解决方案包括：1)启用depthTestAgainstTerrain确保深度测试写入；2)调整地形渲染优先级和深度测试设置；3)微调线段高度避免深度冲突；4)可改用PolylineOutlineMaterialProperty作为替代方案。这些方法能有效解决线段在遮挡情况下的可视化问题，确保depthFailMaterial正确显示被遮挡部分的特殊材质效果。
2025-07-10 18:23:38
305
原创 cesium的ScreenSpaceCameraController修改cesium自带事件控制，例如拖拽、点击、旋转操作方式
摘要：本文详细介绍了Cesium中ScreenSpaceCameraController的配置方法，涵盖5种基本相机操作（平移、旋转、倾斜、缩放、重置）及其对应的事件类型配置。通过代码示例展示了完整的相机行为配置方案，包括事件类型绑定、缩放范围限制、碰撞检测、惯性效果等核心参数设置。文章还提供了固定视角、触摸屏优化、操作范围限制等常见应用场景的配置建议，并指出事件冲突、性能优化等注意事项。这套配置系统可灵活适应不同交互需求，实现从基础地图浏览到沉浸式3D体验的各种场景。
2025-07-10 18:17:13
1046
原创 Cesium 多边形与自定义轮廓线实现带描边遮挡depthFailMaterial
摘要：该代码实现了在Cesium中创建带自定义轮廓线的3D多边形，主要特点包括：1）使用PolygonHierarchy定义带高度的多边形顶点；2）通过自定义Polyline实现轮廓线宽度可调（2px）和被遮挡时的虚线效果；3）原生轮廓线（1px）与自定义轮廓线配合使用。优化建议包括禁用原生轮廓线以提升性能，调整虚线样式参数（dashLength/gapLength），以及添加深度测试相关设置。该方案适用于需要突出显示3D多边形边界并实现特殊遮挡效果的场景。
2025-07-08 09:58:57
364
原创 解析 JSON.parse
摘要：JSON.parse(CylinderData)用于将JSON格式字符串转换为JavaScript对象，便于处理Cesium圆柱数据。示例展示如何解析包含圆柱属性（名称、高度、半径）的JSON字符串，并通过访问对象属性获取具体数值，如cylinderObject.name输出"圆柱"，cylinderObject.height输出500。该操作在三维地理数据可视化中具有重要作用。（98字）
2025-07-04 17:12:12
234
原创 JavaScript 存储对象 sessionStorage （会话存储） 和 localStorage（本地存储）
localStorage是浏览器提供的客户端存储机制，可存储5-10MB的键值对数据。与cookie不同，它不会随请求发送到服务器，更适合存储本地应用数据。主要特点包括持久性存储、域隔离和数据类型限制（仅字符串）。常用操作包括setItem/getItem存储获取数据、removeItem删除数据以及clear清空存储。典型应用场景包括保存用户偏好、缓存API响应、会话管理和离线应用数据。使用时需注意错误处理、性能影响（同步操作可能阻塞主线程）和数据安全问题（避免存储敏感信息）。
2025-06-24 20:56:24
540
原创 HTTP 状态码是服务器对客户端请求的响应标识，用于表示请求的处理结果
5xx表示服务端问题，避免暴露内部错误信息。4xx表示客户端问题，响应中应包含。403：显示"无权访问"提示。5xx：建议用户稍后重试。404：显示友好错误页。2xx：正常处理数据。401：跳转到登录页。
2025-05-08 09:48:45
1284
原创 cesium（vue）一些面试问题（包含Three.js）
3D Tiles 是 Cesium 提出的一种用于流式传输和渲染大规模三维地理空间数据集的开放规范。在处理大规模三维地理数据（如城市建筑、地形、点云等）时，传统的三维数据格式在数据加载、渲染效率等方面存在诸多挑战，而 3D Tiles 规范通过将数据组织成层次化结构，实现了数据的按需加载和高效渲染，能显著提升大规模三维场景的展示性能。用途。
2025-02-20 00:14:59
4044
原创 ArcGis和Super Map
ArcGIS 是美国环境系统研究所（ESRI）开发的一系列地理信息系统（GIS）软件产品的总称，它提供了一套全面的工具和服务，可用于采集、存储、分析、管理和展示地理数据，在众多领域都有广泛的应用。
2025-02-19 21:27:02
1376
原创 3dtile平移子模型以及修改 3D Tiles 模型的模型矩阵z平移
第一段代码演示了如何平移子模型，通过变换矩阵调整子模型的局部位置。第二段代码演示了如何平移整个 3D Tiles 模型，通过计算偏移量并应用到来调整整个模型的位置。如果你想要同时操作多个子模型并进行全局平移，通常需要结合使用这些方法。你可以先对每个子模型应用局部变换（例如平移），然后再通过对整个模型进行全局变换。
2024-11-29 10:44:05
1580
原创 对载入的3dtiles进行旋转、平移和缩放变换。
这段代码实际上是在计算一个综合的变换矩阵，它包括了平移、旋转和缩放，并将该矩阵应用到模型的根节点上，从而影响整个模型的显示。通过调整params对象中的参数，你可以控制模型的最终位置、方向和尺寸。params.rxparams.ryparams.rz：控制旋转的角度。params.txparams.typarams.tz：控制平移的经度、纬度和高度。：控制模型的缩放因子。最终，通过这种方式，模型将按照指定的变换在 Cesium 中呈现。
2024-11-29 10:33:20
1635
原创 cesium 3dtile ClippingPlanes 多边形挖洞ClippingPlaneCollection
在Cesium3D Tiles（如城市模型）Primitives（如几何体）Models（如 glTF 模型）Terrain（地形）Imagery（影像图层）Skybox（天空盒）（自定义几何体）这些对象可以通过结合多个切割面来实现不同的裁剪效果，从而动态地控制场景中的可见部分。
2024-11-28 20:09:56
1446
原创 局部修改3dtiles子模型的位置。
初始化变量：通过submodel获取当前子模型的初始变换矩阵。设置平移量：定义一个平移向量，在 Z 轴方向上平移指定的高度（height设置动画时间：设置动画的持续时间为 1 秒。动画执行：使用 Cesium 的时钟（）和onTick事件每帧更新动画，计算当前进度并更新变换矩阵，最终实现平移效果。停止动画：通过setTimeout在 2 秒后停止动画。
2024-11-21 16:35:21
719
原创 cesium 监听相机高度变化
Camera.moveStart：相机开始移动时触发。Camera.changed：相机发生变化时触发。Camera.moveEnd：相机停止移动时触发。
2024-11-20 15:50:44
529
原创 img 图片批量压缩画质添加
采用异步函数 用于加载一张图片，并将其压缩到最大尺寸为 800x800，且质量压缩为 10%（即较低质量），然后返回压缩后的图片的 编码字符串。html部分示例：方法：调用时传入 图片路径函数定义： 这是一个异步函数，接受一个图片的 URL 地址作为参数。创建 对象： 这部分代码创建了一个新的 对象，并将其 属性设置为传入的 URL，这将开始加载图片。返回一个 Promise： 函数返回一个 ，用于异步处理图片加载和压缩。 会在图片加载成功后调用 ，或者加载失败时调用
2024-11-20 14:28:23
1026
原创 QGIS 处理图层样式
文件）来管理和共享样式。QGIS 支持多种类型的数据样式设置，包括符号、标签、渲染和渐变等。框选区域都是可编辑的，根据需要调整数字及其颜色，保存即可。中发布和应用样式是非常直观和简便的，通常是通过。如何导出sld样式供 geoserver使用呢。下面我们以tif格式的数据为例，点击另存为QGIS图层样式文件。直接讲tif 数据拖到这儿。也可以选择单波段伪彩色。加减波段修改值及其颜色。
2024-11-18 10:24:12
789
原创 GeoServer 发布样式
样式的来源可以是 QGis处理的。如果不是选择文件上传的，也可以在下面编辑区直接粘贴上全部代码。这俩个地方名字要一致。
2024-11-18 10:11:48
520
原创 geoserver发布遥感影像
样式的设置可以通过 qgis平台来处理，，可以看下一篇qgis设置样式介绍。点击发布，也可以在图层里面 点击发布找到改数据源，来发布。数据要存在改服务器里面。这里选中我们设置好的样式。
2024-11-18 10:08:22
461
Three.JS 使用RGBELoader和CubeTextureLoader 添加环境贴图
2024-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人