- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Cesium DataSource数据层全景学习文档
Cesium数据层全景学习文档（基于CesiumJS 1.117）系统介绍了Cesium数据体系的核心概念和架构。文档分为七部分：核心概念速览从总容器DataSourceCollection到具体数据源、实体层和渲染层；DataSource家族详细说明5种开放子类的功能特性；DataSourceCollection的管理机制；Entity到Primitive的渲染链路；常见组合示例；易混淆问题解答；以及学习路径建议。重点阐述了数据源的层级关系、使用方法及性能优化策略，为开发者提供了全面的Cesium数据层学
2025-12-18 19:07:40
709
原创 Cesium 自定义流动折线材质开发指南
本文介绍了在Cesium中实现动态流动折线效果的两种材质创建方法。传统方法直接调用内部API（如_materialCache），虽然可行但存在API不稳定、版本兼容性差和维护困难等问题。推荐采用官方API方法，通过创建Material实例并定义fabric对象来实现，包括处理材质属性变化、重写关键方法等。该方法避免了内部API调用风险，提供了更稳定的实现方案，同时支持自定义着色器代码实现流动动画效果。两种方法均能实现动态折线效果，但官方API方法更适合长期维护的项目。
2025-12-18 14:11:54
497
原创 cesium的 disableDepthTestDistance属性
disableDepthTestDistance是Cesium中控制视觉元素深度测试的关键属性，适用于Billboard、Label等对象。它通过设定距离阈值（0为默认深度测试，无限大为完全禁用，正数为指定距离内禁用）确保重要标记始终可见。典型应用包括关键地标、UI元素和导航提示。使用时需注意性能影响和视觉冲突，可配合heightReference等属性调整效果。该特性在复杂3D场景中能有效解决对象遮挡问题。
2025-12-18 11:16:29
200
原创 Cesium Primitive 相关类的详细对比
本文详细对比了Cesium中Primitive相关类的特性与适用场景。Primitive作为基础图元类，适用于复杂几何体渲染和自定义着色器；PointPrimitive适合少量动态点控制；PointPrimitiveCollection可高效管理大量点图元；PrimitiveCollection是通用容器，支持嵌套和层级管理。性能方面，PointPrimitiveCollection最适合大批量点渲染（10,000+），而Primitive灵活性最高。选择建议：少量点用PointPrimitive或Enti
2025-12-18 11:12:54
805
原创 Cesium中的scene.globe.pick、scene.pick、scene.pickPosition的区别
Cesium中三种pick方法的主要区别： scene.pick()用于拾取场景中的实体和图元，返回PickResult对象 scene.pickPosition()获取鼠标位置的三维世界坐标，返回Cartesian3 globe.pick()专门获取地球表面交点，考虑地形高度 使用建议：选择实体用第一种，获取精确3D坐标用第二种，获取地表坐标用第三种。可组合使用，先检测实体点击，若无则获取地表或世界坐标。
2025-12-18 11:10:32
261
原创 Cesium ParticleSystem 学习文档及示例
Cesium的ParticleSystem系统用于创建动态粒子效果，如烟雾、火焰、雨雪等。通过构造函数new Cesium.ParticleSystem(options)配置参数，包括发射器类型（盒状、圆形、锥形、球状）、粒子数量、生命周期、颜色、大小等属性。系统提供丰富的控制选项，如发射速率(emissionRate)、爆发效果(bursts)、循环播放(loop)等，支持粒子从开始到结束的颜色(startColor/endColor)和大小(startScale/endScale)渐变。通过update
2025-12-18 11:05:12
666
原创 Cesium.Math 工具函数完整列表
本文介绍了数学计算相关的常量属性和方法。常量部分包含圆周率、精度常量(EPSILON1-21)、地球引力参数等数学和物理常数。方法部分提供了丰富的数学运算功能，包括三角函数(acosClamped/asinClamped)、数值处理(clamp/mod)、单位转换(toDegrees/toRadians)、随机数生成(randomBetween)、特殊计算(factorial/logBase)等，并支持容差比较(equalsEpsilon)和范围转换(negativePiToPi)。这些工具方法可用于科学计
2025-11-27 15:10:34
768
原创 详解cesium中的Cesium.NearFarScalar类
摘要： Cesium.NearFarScalar 是 CesiumJS 中用于动态调整对象缩放比例的类，基于相机与对象的距离进行线性插值。通过设置近距（near）、远距（far）及对应的标量值（nearValue/farValue），实现距离变化时数值的平滑过渡。典型应用包括标签大小、粒子效果和广告牌的动态缩放。该类提供属性访问、克隆、比较及数据打包/解包等方法，支持灵活配置。例如：new Cesium.NearFarScalar(100, 1.0, 1000, 0.1) 表示100米内保持原大小，1000
2025-11-27 14:58:49
804
原创 Cesium.Color 属性与方法详解
Cesium.Color类提供了丰富的预定义颜色常量，支持多种颜色格式和空间。示例代码展示了常见的颜色常量及其对应的RGBA值，如ALICEBLUE(240,248,255,1)、BLACK(0,0,0,1)、BLUE(0,0,255,1)等。这些预定义颜色方便开发者在Cesium中快速设置颜色属性，适用于地图渲染、3D可视化等场景。
2025-11-27 14:42:46
550
原创 Cesium postRender 事件监听器
Cesium中的viewer.scene.postRender事件在场景渲染完成后触发，适用于帧后操作。提供addEventListener和removeEventListener方法管理监听器：前者通过回调函数和可选上下文添加监听，返回移除函数；后者需匹配参数移除监听。最佳实践建议使用返回值方式管理监听器，通过集合跟踪多个移除函数。完整示例展示了监听器生命周期管理类，包含帧计数、FPS监控等功能，并对比了两种移除方式的便利性和适用场景。
2025-11-21 10:01:13
503
原创 Pinia 详细学习文档及 在Vue 3 中实践示例
Pinia是Vue.js的下一代状态管理库，具有类型安全、DevTools支持和轻量级等优势。安装简单，通过createPinia()即可配置。核心概念包括Store定义，支持Options API和Composition API两种风格。在组件中可通过storeToRefs保持响应式，直接调用actions。高级功能包括数据持久化（如localStorage）和Store间通信。Pinia简化了状态管理，提供直观API，是Vue 3项目的理想选择。
2025-11-21 09:43:33
397
原创 Cesium.Cartesian3 常用的属性、方法
摘要：Cartesian3是Cesium中处理3D空间位置和向量的核心类，包含x、y、z三个坐标分量。提供了多种创建方式（直接创建、从数组/经纬度创建等）和向量运算方法（加/减/点积/叉积等）。支持几何计算（距离/长度/插值）和比较判断（相等/近似相等）。实用示例包括坐标转换、创建几何图形和向量运算应用，如计算城市间距离和方向。该类是Cesium中进行3D空间计算的基础工具。
2025-11-20 17:20:12
380
原创 WGS-84与 GCJ-02坐标互转方法
本文介绍了一个用于坐标转换的TypeScript工具库，实现了WGS-84和GCJ-02坐标系之间的相互转换。主要功能包括：判断坐标是否在中国范围内、基础坐标转换函数(wgs84ToGcj02/gcj02ToWgs84)、高精度迭代转换(gcj02ToWgs84Exact)、坐标距离计算等。代码通过数学公式进行坐标偏移计算，并使用椭球体参数(A=6378245.0)确保转换精度。还提供了批量转换和字符串输入支持功能，适用于地理信息系统开发中的坐标处理需求。
2025-11-19 15:32:31
245
原创 Cesium 中与影像图层相关的这些核心类和组件
Cesium影像图层核心组件摘要：文章详细介绍了Cesium中影像图层相关的核心类和组件。ImageryLayer类用于创建和管理各类地图服务图层，支持透明度、亮度等视觉参数调整。ImageryLayerCollection提供图层的集合管理功能，包括添加、删除和调整层级等操作。ImageryLayerFeatureInfo实现点击获取要素信息的功能，支持自定义信息展示。BaseLayerPicker和BaseLayerPickerViewModel组件构建了可交互的底图选择器，允许用户切换不同地图服务，并
2025-11-19 15:28:37
847
原创 Cesium相机常用属性与方法示例解析
Cesium Camera类提供了丰富的相机控制功能，包含静态属性、实例属性和多种操作方法。静态属性包括默认视图配置，实例属性涵盖位置、方向、视锥体等基础属性，以及世界坐标、变换矩阵等衍生属性，还有事件监听属性。操作方法分为飞行控制（如flyTo、flyHome）、视图设置（如setView、lookAt）、移动/旋转/缩放等交互控制方法，以及坐标转换和计算工具方法。该类支持正交和透视投影切换，可通过事件监听相机状态变化。封装了完整的3D场景相机控制能力，是Cesium核心视图控制组件。
2025-11-19 13:58:12
1418
原创 常用在线地图采用的坐标系
国内主流地图平台使用不同的坐标系：谷歌地图国外版、苹果地图等采用国际通用的WGS84坐标系；百度地图使用特有的BD09坐标系；高德、腾讯等国内平台采用GCJ02坐标系；国家天地图则使用CGCS2000坐标系。这些差异主要源于国内对地理位置信息的加密要求，开发者在集成地图服务时需注意坐标系转换问题，以确保位置信息的准确性。
2025-11-18 16:45:15
559
原创 GeoJson和WKT数据格式解析
GeoJSON和WKT是两种常用的地理空间数据格式。GeoJSON基于JSON格式，支持点、线、面等几何类型及其集合，便于前端地图框架渲染。WKT是文本标记语言，可表示2D至4D坐标数据，常用于后端处理。两者可相互转换：通过terraformer-wkt-parser插件可实现WKT和GeoJSON的互转，满足前后端数据交互需求。GeoJSON的coordinates数组层数决定了其几何类型（如LineString比MultiLineString少一层），需特别注意区分。
2025-11-18 16:43:58
1192
原创 天地图中的常用服务参数
该摘要介绍了六种常用地图图层分类及其对应缩写：矢量底图（vec）、影像底图（img）、中文/英文矢量注记（cva/eva）、中文/英文影像注记（cia/eia）、地形图层（ter）和地形注记（cta）。每种图层均通过缩写形式标注，并配有英文全称说明，为GIS数据管理提供标准化命名参考。文末附有相关图示链接。
2025-11-18 16:33:56
150
原创 Cesium中的CustomDataSource、dataSource、DataSourceCollection
本文介绍了Cesium中三种核心数据管理类的区别与关系。DataSource是数据源的抽象接口，定义了标准方法和属性；CustomDataSource是其具体实现，用于手动管理自定义实体；DataSourceCollection是容器类，用于管理多个DataSource实例。三者的关系可以类比为：DataSource是电视频道规范，CustomDataSource是自制频道，DataSourceCollection是电视机和频道列表。它们共同构成了Cesium灵活的数据管理体系，支持多种数据类型的加载、分组
2025-10-31 16:26:58
599
原创 Cesium中的CustomDataSource与EntityCollection
摘要： CustomDataSource和EntityCollection是Cesium中管理实体的核心组件。CustomDataSource作为高级分组容器（如"Buildings"、"Vehicles"），通过.entities属性内置一个EntityCollection，支持命名分组和统一显示控制。EntityCollection是基础的实体集合，提供增删改查等操作。关键区别：CustomDataSource侧重逻辑分组和全局管理（可命名、批量控制），而Enti
2025-10-31 16:13:54
654
原创 前端常用的表单校验方法
本文介绍了12个常用的表单验证工具函数，包括邮箱、手机号、座机、URL、字母格式、设备检查、中文姓名、数字验证、空值判断和身份证验证等。每个函数都采用正则表达式进行严格校验，如邮箱支持中文域名、手机号包含2025年新号段、身份证验证包含地址码和校验位等。这些函数可直接用于前端表单验证，提高开发效率和数据准确性。
2025-10-31 15:32:06
113
转载 前端常用正则表达式
本文汇总了49种常见数据格式的正则表达式，涵盖各类标识符、网络地址、金融信息、证件号码、时间日期等多个领域。主要包括：交通类（火车车次、车牌号）、网络类（URL、磁力链接）、金融类（银行卡号、股票代码）、证件类（身份证、护照）、时间类（24/12小时制）、地址类（IP、文件路径）以及基础格式校验（Email、中文姓名）等。这些正则表达式提供了从严格到宽松的不同验证级别，适用于各种开发场景中的数据校验需求，为程序员提供了实用的格式验证工具集。
2025-10-31 15:09:03
23
原创 UniApp开发微信小程序，一键运行到微信小程序开发者工具
微信小程序开发环境配置指南：下载HBuilderX和微信开发者工具后，首次使用需配置IDE路径并开启微信工具的服务端口。小程序项目需配置相应appid，然后通过HBuilderX运行到微信开发者工具进行调试。
2025-10-29 13:57:41
216
原创 Cesium 实现鼠标移入显示 Tooltips
本文介绍了在Cesium地图中实现鼠标移入显示Tooltips功能的方法。主要内容包括：创建Cesium场景和基本地图，添加示例点位（北京、上海、广州），监听鼠标移动事件，检测鼠标悬停状态，以及显示/隐藏Tooltips的交互逻辑。代码实现部分展示了完整的HTML结构、CSS样式和JavaScript逻辑，通过ScreenSpaceEventHandler处理鼠标事件，当鼠标悬停在点位上方时显示包含位置信息的Tooltip提示框。该功能可用于增强地图交互体验，为用户提供更直观的位置信息展示。
2025-10-28 16:35:03
269
原创 Cesium 中常用的坐标转换方法
本文介绍了Cesium中常用的坐标转换方法，主要包括： 屏幕坐标与三维世界坐标的相互转换：通过getPickRay()和pickPosition()获取地形交点，使用wgs84ToWindowCoordinates()进行反向转换； Cartesian3与Cartographic坐标系的转换：利用fromDegrees()和fromCartesian()等方法实现直角坐标与地理坐标的互转； 度与弧度的转换：通过toRadians()和toDegrees()方法； 与其他坐标系(如UTM)的转换：需借助pro
2025-10-28 15:57:37
1159
原创 cesium主界面介绍及小控件隐藏方法
本文介绍了Cesium Viewer的主要界面组件及其隐藏方法。Cesium默认包含8个核心控件：动画控制器、时间轴、全屏按钮、地理编码器、主页按钮、场景模式选择器、底图选择器和导航帮助按钮，分别位于界面左下角和右上角区域。针对这些控件的隐藏需求，提供了两种解决方案：1）初始化配置法（推荐），通过在创建Viewer时设置参数直接禁用控件，具有性能最优、代码清晰等优点；2）CSS样式控制法，通过display:none等样式属性隐藏控件，适用于快速原型开发，但需注意全屏按钮需使用position:absolu
2025-10-27 15:31:21
955
原创 vue3中使用Cesium
摘要：本文介绍了如何在TypeScript项目中集成Cesium三维地图库。主要包括安装相关依赖(npm install cesium等)、配置TypeScript(tsconfig.json排除.js文件)、Vite配置(添加cesium插件)、类型声明文件编写(cesium.d.ts等)、Cesium初始化配置(设置访问令牌)以及实现基于TypeScript的Cesium组件(CesiumViewer.vue)。组件中演示了飞行定位、添加点实体等功能的类型化实现，提供了完整的TypeScript类型支持
2025-10-27 14:39:19
270
原创 Cesium 中 Primitive 和 Entity 的区别、适用场景及使用方法
Cesium中的Entity和Primitive是两种不同的可视化API，各有特点。Entity是高级抽象的数据驱动API，封装了位置、形状等属性，易于使用且支持内置动画和数据绑定，适合大多数通用场景。Primitive则是底层图形API，提供精细的渲染控制和极致性能，适合处理大量静态对象或自定义特效。对比来看，Entity更易用但灵活性有限，Primitive则性能更高但编程复杂度大。开发者可根据需求选择：快速开发选Entity，追求性能或自定义效果选Primitive。两者都提供了代码示例，展示了如何创
2025-10-27 14:23:39
969
原创 Vue 3 v-memo 完全指南：解锁高效渲染的黑科技
Vue 3的v-memo指令是优化渲染性能的黑科技，通过记忆模板子树避免不必要的重新渲染。基本语法为在元素上添加v-memo="[依赖项]"数组，当依赖项变化时才重新渲染。文章展示了简单示例、多依赖项场景，以及与v-for结合优化大型列表的用法。v-memo特别适合处理频繁更新但部分数据不变的场景，如商品列表、用户信息等，能显著提升性能。通过对比普通渲染和v-memo优化的渲染时间戳，直观展示了其效果。合理使用v-memo可以减少不必要的DOM操作，提升应用响应速度。
2025-10-16 19:07:41
282
原创 Vue 3 插槽完全指南：构建灵活组件的终极武器
Vue 3插槽指南：构建灵活组件的核心技巧。文章系统介绍了插槽的7大应用场景：1）基础插槽语法；2）默认插槽及多内容处理；3）具名插槽布局控制；4）作用域插槽实现子向父数据传递；5）动态插槽名实现运行时配置；6）高级模式如条件插槽和插槽透传；7）结合<script setup>的类型安全用法。通过大量代码示例展示了如何利用插槽机制构建高度可复用的组件，特别强调了作用域插槽在数据驱动UI中的关键作用，以及TypeScript环境下如何确保插槽类型安全。
2025-10-16 15:59:54
639
原创 Vue3 响应式工具函数：核心功能解析与实战指南
这篇文章深入解析了 Vue3 的 6 个核心响应式工具函数： isRef() - 检测值是否为 ref 对象 unref() - 智能获取 ref 值或原值 toValue() - 标准化处理 ref、getter 和静态值 toRef() - 为 reactive 属性创建保持连接的 ref toRefs() - 将 reactive 对象转换为可解构的 refs 集合 isProxy() - 检测对象是否为 reactive/readonly 代理 文章通过类型定义和实际代码示例，展示了这些工具函数在组
2025-10-16 15:35:08
364
原创 Vue 3 组合式 API 中的 Slots 与 Attrs 实践
Vue 3 组合式 API 中的 Slots 与 Attrs 实践摘要 本文详细介绍了 Vue 3 组合式 API 中 useSlots() 和 useAttrs() 的使用方法。通过代码示例展示了如何访问和处理组件插槽： 使用 useSlots() 检查插槽存在性，实现动态插槽渲染 处理预定义插槽和动态插槽的区别 通过 useAttrs() 获取组件属性 实现属性过滤和特定属性绑定 提供了完整的组件示例，包括样式和父子组件交互 这些技术可帮助开发者更灵活地构建可复用组件，实现动态内容渲染和属性传递。
2025-10-14 16:45:44
340
原创 告别重复代码！Vue 3 组合式函数（Composables ）让你的开发更高效
Vue 3 Composables 是组合式 API 的核心功能，通过封装状态逻辑实现代码复用。与传统工具函数不同，Composables 可以包含响应式状态，相比 Mixins 具有更好的命名空间控制和类型支持。常见用法包括基础计数器、状态管理、生命周期集成、异步操作处理等。开发者可以通过 ref/reactive 创建响应式状态，结合生命周期钩子和 watch/watchEffect 管理副作用。Composables 特别适合处理数据获取、表单管理等复杂逻辑，通过模块化方式显著提升代码组织和复用性。
2025-10-14 16:32:01
878
原创 基于 Vant UI 的List组件封装移动端含上拉加载、下拉刷新、空状态等统一列表组件
本文介绍了一个基于Vant UI封装的移动端列表组件，整合了上拉加载、下拉刷新、空状态提示等常用功能。该组件通过props配置请求API、分页参数等，内置了加载状态管理和错误处理机制。核心功能包括数据初始化、分页加载和刷新操作，支持监听参数变化自动刷新。组件采用Vue3 Composition API编写，暴露了刷新方法和数据访问接口，并提供了多种使用示例。此外，还规范了请求和响应的数据格式，确保与后端API的兼容性，是移动端列表开发的实用解决方案。
2025-10-14 16:02:30
478
原创 在vue3中，基于Element Plus 封装季度选择器组件
本文介绍了一个基于Vue3和Element Plus封装的季度选择器组件。该组件提供直观的季度选择功能，支持年份导航、禁用日期、自定义格式等特性。核心功能包括季度选择、年份导航、当前季度高亮、清空功能等交互特性。组件采用ElPopover作为弹出框容器，内部构建2x2季度表格，通过计算属性和工具函数处理日期格式和选择逻辑。组件支持多种自定义配置，包括显示格式、输出格式、禁用日期函数等，并提供了完善的样式系统和状态管理。使用示例展示了基础用法、自定义格式和禁用日期等常见场景。
2025-10-14 14:11:00
992
原创 掌握 Teleport 组件：轻松实现 DOM 元素跨层级传送
Vue 3.5 Teleport组件摘要：Teleport是Vue内置组件，用于将内容"传送"到DOM结构外的节点（如body末尾），解决模态框等UI组件受父级样式限制的问题。基础用法通过to属性指定目标容器，支持禁用状态和多个Teleport到同一目标。Vue 3.5新增defer属性实现延迟解析，优化性能并支持SSR场景。Teleport保持组件逻辑关系，provide/inject和事件通信正常工作，需注意scoped CSS需使用:deep()穿透选择器。适用于模态框、通知提示等
2025-10-14 13:21:39
1012
原创 前端数值运算精度丢失问题及解决方案
前端数值运算精度丢失问题及解决方案摘要 JavaScript采用IEEE 754双精度浮点数存储机制，导致常见精度问题如0.1+0.2=0.30000000000000004。原生解决方案包括： 使用Number.EPSILON进行浮点数容差比较 将小数转为整数运算后还原 通过toFixed控制小数位数 推荐第三方库处理复杂场景： decimal.js：支持高精度四则运算和比较 big.js：适用于金融计算，可控制舍入规则 math.js：提供矩阵运算等高级功能 Vue3中可封装组合式函数，集成Decima
2025-10-13 15:32:20
389
原创 vue3 中播放.flv视频
Vue3中播放FLV视频的两种方法 使用flv.js 通过flvjs.createPlayer创建播放器实例 支持自动播放、循环播放等配置 包含错误处理、资源销毁等生命周期管理 响应式监听视频路径变化 使用Jessibuca 需要单独引入jessibuca相关文件 提供更丰富的播放控制选项 支持多种解码方式（WebCodecs/WASM） 包含完整的事件监听系统 自动处理分辨率适配问题 两种方法都能有效实现FLV视频播放，flv.js更轻量，Jessibuca功能更全面但需要额外资源。
2025-10-13 15:15:13
419
原创 Vue3 中使用Provide与Inject
Vue3 中 Provide 和 Inject 简化了跨组件数据传递。Provide 在祖先组件定义数据和方法，后代组件通过 Inject 获取，避免了 Props 逐层传递。支持静态数据、响应式变量、方法和类型安全注入。实际应用场景包括主题管理（提供主题状态和切换方法）和用户状态管理（共享用户信息及认证方法）。这种模式特别适合全局状态或深层次组件通信，相比 Vuex/Pinia 更轻量，适合中小规模应用。使用时需注意类型定义和响应式数据管理，确保代码可维护性。
2025-10-13 14:50:19
438
原创 WebSocket 与 SSE 的区别，实际项目中应该怎么使用
WebSocket和SSE是两种实时通信技术，核心区别在于：WebSocket是全双工协议，支持双向通信，适合聊天、游戏等场景；SSE是服务器单向推送，基于HTTP协议，适合通知、行情推送等场景。在Vue3项目中，可以通过封装useSSE组合式API实现SSE连接，构建实时通知系统。SSE的优势在于自动重连、简单易用，而WebSocket则更适合需要双向交互的复杂应用。实际选择应根据项目需求决定：单向推送优先SSE，双向交互选择WebSocket。
2025-10-13 14:42:28
531
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人