自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

苦逼前端分享苦逼经验

耿直宝子埋头苦干

  • 博客(54)
  • 收藏
  • 关注

原创 Vue3 常见问题深度解析:从基础到进阶

本文系统梳理了Vue3常见的核心知识点,重点对比了Vue3与Vue2的差异:1)响应式原理改用Proxy实现;2)引入Composition API优化逻辑组织;3)性能提升55%以上;4)新增Teleport、Suspense等组件。详细解析了ref/reactive区别、组件通信方式、Pinia状态管理等核心概念,并提供了TypeScript集成、性能优化和项目迁移等实战方案。全文涵盖从基础到高级的Vue3知识体系,是前端开发者面试准备和技能提升的实用指南。

2025-08-08 11:02:12 873

原创 实践案例: Vue3 + Element Plus 实现表格自动滚动效果

本文详细介绍了基于Vue3和ElementPlus实现表格自动滚动功能的完整方案。该方案通过定时器控制scrollTop实现平滑滚动,支持鼠标悬停暂停、循环滚动等交互效果。文章包含核心代码实现、样式穿透技巧及优化建议,适用于数据监控大屏、信息发布系统等场景。关键点包括:获取表格滚动容器、边界检测处理、requestAnimationFrame优化滚动性能,以及通过scoped样式定制表格外观。该方案具有代码简洁、交互友好、视觉效果优良等特点,开发者可根据实际需求进行扩展和优化。

2025-08-08 09:36:30 912

原创 Vue 3 入门教程 9 - 表单处理

Vue3 表单输入绑定与验证指南 本文介绍了 Vue3 中表单输入绑定的核心知识。通过 v-model 指令可以实现表单元素与数据的双向绑定,支持文本输入框、复选框、单选按钮、下拉选择框等多种表单元素。文章详细讲解了 .lazy、.number 和 .trim 等 v-model 修饰符的使用场景,并提供了表单验证的两种实现方式:通过计算属性实现基础验证和使用 VeeValidate 第三方库。最后,文章还展示了如何创建支持 v-model 的自定义表单控件,包括开关组件的实现示例。根据项目需求,开发者可以

2025-08-07 15:40:03 539

原创 深拷贝之 structuredClone ()

JavaScript中的structuredClone()方法提供了一种高效的原生深拷贝解决方案,支持复杂数据类型(如对象、数组、Map、Set等)和循环引用处理。相比JSON.parse(JSON.stringify()),它能正确克隆Date、RegExp等特殊对象,且性能更优。主要应用场景包括Web Workers通信、IndexedDB数据存储和React状态管理。但存在不能克隆函数、Symbol、DOM节点等局限性,克隆对象会丢失原型链。该方法是处理结构化数据深拷贝的推荐方案,尤其适合需要保持数据

2025-08-07 15:15:57 706

原创 Vue 3 入门教程 8 - 路由管理 Vue Router

VueRouter是Vue.js官方路由管理器,用于构建单页面应用(SPA)。文章详细介绍了VueRouter的安装配置、基本使用方法和核心功能:1)通过createRouter创建路由实例,支持HTML5history和hash模式;2)路由跳转的两种方式:声明式导航(<router-link>)和编程式导航(router.push);3)参数传递的两种形式:params动态路由和query查询字符串;4)嵌套路由配置方法;5)路由守卫的使用场景和实现方式。文章还推荐使用懒加载优化性能,并提供

2025-08-01 16:10:41 502

原创 Vue 3 入门教程7 - 状态管理工具 Pinia

Pinia是Vue3官方推荐的状态管理工具,作为Vuex的继任者,它提供了更简洁的API和完整的TypeScript支持。文章详细介绍了Pinia的安装配置、Store创建与使用方式,包括状态(state)、计算属性(getters)和方法(actions)的定义。同时讲解了状态的修改与重置、跨Store访问,以及与组合式API的配合使用。相较于Vuex,Pinia具有更低的复杂度,支持扁平化组织状态,能与Vue DevTools深度集成,适合大型Vue应用开发。最后提到将结合Vue Router继续讲解V

2025-07-31 16:02:38 925

原创 Vue 3 入门教程6 - 组件通信进阶

本文介绍了Vue组件通信的几种方式:1.子传父通过emit触发自定义事件,父组件监听事件接收数据;2.兄弟组件通过父组件中转实现通信;3.跨级组件使用provide/inject直接传递数据。文章详细说明了每种方式的实现方法,包括代码示例,并比较了不同通信方式的优缺点,建议根据组件关系和项目规模选择合适的方式,如父子组件用props/emit,跨级组件用provide/inject,大型应用使用状态管理工具。

2025-07-31 10:55:56 1058

原创 Vue 3 入门教程5 - 生命周期钩子

Vue3组件生命周期分为创建、挂载、更新和卸载四个阶段,通过生命周期钩子函数可在不同阶段执行特定操作。选项式API中直接定义钩子函数(如created、mounted),组合式API需导入onXxx形式钩子(如onMounted)。核心钩子包括:beforeCreate/created(初始化数据)、mounted(操作DOM)、beforeUpdate/updated(数据更新)、beforeUnmount/unmounted(清理资源)。两种API功能相同但使用方式不同,选项式API更直观,组合式API

2025-07-31 09:12:46 931

原创 Vue 3 入门教程4 - 计算属性与侦听器

本文介绍了Vue3中的计算属性(Computed)和侦听器(Watch)的使用方法及区别。计算属性通过computed函数创建,具有缓存机制,能自动更新依赖数据,可分为只读和可写两种形式。侦听器通过watch函数实现,可监听单个或多个响应式数据变化,支持深度监听和立即执行选项。两者主要区别在于:计算属性适用于数据衍生计算,强调缓存;侦听器适用于数据变化后的副作用处理,适合异步操作。实际开发中应结合需求选择合适方式。

2025-07-30 16:06:03 873

原创 Vue 3 入门教程 3- 响应式系统

Vue3响应式系统基于Proxy实现,相比Vue2的Object.defineProperty具有全面拦截优势。主要通过ref和reactive创建响应式数据:ref适用于基本类型(需通过.value访问)和对象类型;reactive专用于对象/数组类型,可直接访问属性。实际开发中,基本类型数据优先使用ref,对象/数组类型根据需求选择reactive或ref。系统自动追踪数据变化并更新视图,实现数据与UI的同步。

2025-07-30 15:56:21 447

原创 Vue 3 入门教程 2- Vue 组件基础与模板语法

Vue组件基础与模板语法摘要 Vue组件是构建用户界面的核心单元,包含模板、脚本和样式三部分。单文件组件(.vue)结构清晰,支持全局/局部注册。组件通信主要通过props实现父传子数据传递。 模板语法提供数据绑定(v-bind)、事件监听(v-on)、双向绑定(v-model)等功能。条件渲染(v-if/v-show)和列表渲染(v-for)支持动态内容展示,需注意v-for必须指定key属性。事件修饰符(.stop/.prevent等)可控制事件行为。这些特性使Vue能高效构建响应式应用。

2025-07-30 15:31:31 927

原创 Vue 3 入门教程 - 1、基础概念与环境搭建

Vue3入门教程摘要:Vue3作为最新版本前端框架,通过Proxy重构响应式系统,引入Composition API提升代码复用性,优化类型支持。环境搭建需安装Node.js,推荐使用create-vue脚手架(基于Vite)创建项目,支持TS/JSX/VueRouter等特性选择。项目结构包含src源码目录(components组件、main.js入口)、public静态资源及配置文件。相比Vue2,Vue3在性能、API设计和TypeScript支持方面有显著改进,适合构建现代化Web应用。

2025-07-30 14:52:52 642

原创 常见问题三

本文深入解析前端开发的5大核心知识点:1. Vue2与Vue3响应式原理对比:Vue2使用Object.defineProperty劫持属性,Vue3采用Proxy代理对象,后者支持更全面的监听场景且性能更优。2. Vue2数据监听机制:通过Observer、Dep、Watcher实现递归劫持和依赖收集,数组需特殊处理。3. watch与computed区别:computed适合衍生数据计算(有缓存),watch适合处理异步副作用(无缓存)。4. script标签的defer与async:async脚本立即

2025-07-25 16:51:46 926

原创 vue +Cesium 实现动态水波纹效果:从原理到完整代码实现

本文详细介绍了在Cesium中实现动态水波纹效果的方法。通过使用CircleGeometry创建圆形几何体,结合材质透明度控制和requestAnimationFrame动画循环,实现波纹从中心向外扩散并逐渐消失的视觉效果。文章重点讲解了波纹动画原理(3秒周期变化和相位差设计)、性能优化策略(按需更新、降低复杂度等)以及兼容性处理。提供了完整的Vue组件代码示例,展示了如何在北京坐标创建多个红色波纹,并给出了扩展定制的建议(修改颜色、调整速度等)。该方案具有良好的兼容性和性能表现,适用于Cesium各版本。

2025-07-25 16:29:49 848

原创 vue + Cesium 实现静态波纹点效果

本文详细介绍了使用Cesium.js实现静态波纹点效果的完整方案。该效果通过多个同心圆的周期性扩散动画标记重要地理点,适用于POI标记、监测点显示等场景。文章从实现原理、核心代码到优化建议系统解析了以下内容:1. 波纹动画通过相位差和三角函数计算实现平滑扩散;2. 使用CallbackProperty动态更新半径和透明度;3. 包含完整的Vue组件代码和参数配置方法;4. 提出性能优化和交互扩展建议。这种效果不仅能提升数据可视化表现力,其实现思路也可拓展到其他动态地理标记的开发中。

2025-07-23 16:02:28 819

原创 基于 Vue+Cesium 实现 3D 地图流动迁徙线效果(附完整代码)

本文介绍了基于Vue和Cesium实现3D迁徙线可视化的方法。通过自定义材质和纹理动画技术,实现了具有流动效果的3D弧线迁徙线,每条线路可独立设置颜色和流动速度。核心方案采用纹理动画替代传统GLSL着色器,提高了兼容性和性能。文章详细讲解了环境配置、材质定义、弧线生成等关键步骤,并提供了完整代码实现。该方案适用于人口流动、物流监控等场景,可直观展示地理空间数据流动趋势,具有良好的视觉效果和交互性。

2025-07-23 11:14:43 950

原创 常见问题二

2025年前端面试核心要点解析:从底层原理到实战优化 本文针对2025年前端面试11个高频考点进行深度剖析,重点聚焦:1)浏览器渲染流程优化,结合WebGPU和Houdini API等新技术;2)HTTPS加密机制升级,详解TLS1.3的核心改进;3)SPA首屏全链路优化策略,整合HTTP/3+Vite5+ServiceWorker技术栈;4)Vue3.5响应式系统演进,对比Proxy与defineProperty实现差异;5)现代前端缓存体系,包括HTTP/3强缓存与ServiceWorker动态缓存。特

2025-07-22 15:04:17 590

原创 Promise 详解与实现:从原理到实践

Promise是JavaScript处理异步操作的核心机制,通过状态管理(pending/fulfilled/rejected)实现更优雅的异步流程控制。其核心特性包括链式调用、错误捕获和状态不可逆。文章详细解析了Promise的实现原理,包括构造函数、then方法和状态转换机制,并提供了简易版Promise实现代码。同时介绍了常用静态方法(all/race等)和实际应用场景,如串行/并行异步操作。最后对比了Promise与async/await的关系,指出Promise作为异步编程基础的重要性,即使在新语

2025-07-21 17:46:56 419

原创 常见问题一

本文系统梳理了前端开发核心知识点,涵盖CSS布局、JavaScript原理、框架应用和性能优化等方面。CSS部分详解盒模型、BFC、Flex/Grid布局对比及响应式设计实现;JavaScript重点解析事件循环、闭包、继承方式和this绑定规则;框架章节对比React/Vue特性,分析SSR/CSR差异;性能优化涉及资源懒加载、Webpack分包及安全防护策略;最后探讨WebAssembly、PWA等前沿技术。文章通过技术点对比和实现原理剖析,为前端开发者提供全面的知识体系参考和技术选型指导。

2025-07-21 17:38:20 797

原创 Vue2 集成 Cesium 实现地理热力图可视化(附完整案例)

本文详细介绍了在Vue2项目中集成Cesium地理信息库并实现热力图可视化的完整方案。主要内容包括:1)Vue2项目环境搭建与Cesium配置方法;2)地图初始化与热力图插件的集成;3)核心代码实现步骤,包括数据处理、热力图参数配置(半径、模糊度)等关键环节;4)常见问题解决方案及性能优化建议。该方案提供了完整的可复用代码,通过组件化开发方式将Cesium的强大地理可视化能力与Vue2的框架优势相结合,适合WebGIS开发需求。文章还探讨了功能扩展方向,如动态参数调整、多图层管理等实用技巧。

2025-07-18 16:22:58 865

原创 基于vue + Cesium 的蜂巢地图可视化实现

本文介绍了基于CesiumJS实现交互式蜂巢地图可视化的方法。通过Vue组件构建应用,利用六边形网格规则划分地理空间,实现热力图和密度分析功能。核心功能包括:生成规则六边形网格(基于数学计算顶点位置)、颜色动态生成、点击高亮交互和视图重置。文章详细解析了代码实现,包括地图初始化、蜂巢图生成算法、颜色计算和交互处理等关键技术点,同时提供了扩展建议,如数据绑定和性能优化。该方案为地理信息可视化提供了灵活的开发框架。

2025-07-17 18:13:16 896

原创 vue + Cesium 实现 3D 地图水面效果详解

本文介绍了使用Cesium库实现3D地图水面效果的方法。通过创建PolygonGeometry定义水面区域,应用内置Water材质实现反射和波浪效果,并详细解析了核心代码实现过程。重点讲解了水面材质参数的配置(法线贴图、频率、振幅等)及性能优化建议,包括参数调优、地形交互处理等注意事项。该方案可模拟从平静湖泊到汹涌海洋的不同水体效果,为3D地理信息系统开发提供实用参考。

2025-07-17 15:37:45 821

原创 基于 vue+Cesium 实现军事标绘之钳击箭头绘制实战

摘要:本文基于Cesium引擎实现军事GIS中的交互式钳击箭头标绘功能。通过ScreenSpaceEventHandler处理鼠标事件,利用CallbackProperty实现动态图形更新,支持5个关键点采集(前3点固定,后2点跟随鼠标)。核心功能包括:笛卡尔坐标与经纬度转换、标记点管理、自动清理临时实体及标绘数据提取。技术要点涉及Cesium事件管理、分层实体控制及军事标绘算法集成,为战术标绘系统开发提供了可复用的解决方案框架。(149字)

2025-07-15 17:59:43 1248

原创 基于vue+Cesium实现交互式攻击箭头绘制

本文介绍了基于Cesium.js和Vue框架实现的交互式攻击箭头绘制功能。核心功能包括:通过鼠标左键采集关键点、实时更新箭头形状、右键结束绘制等交互操作。技术实现上重点解析了Cesium的CallbackProperty动态更新机制、ScreenSpaceEventHandler事件管理、坐标系统转换等关键技术点,并提供了完整的代码实现方案。该组件具有良好的用户体验和内存管理机制,为军事模拟和GIS应用开发提供了实用参考。未来可扩展箭头样式自定义、编辑修改等功能。

2025-07-15 10:04:51 722

原创 CSS3实现超逼真雨天积水与涟漪动画效果

这篇文章详细介绍了如何使用纯CSS3和少量JavaScript实现逼真的雨天动画效果,包含雨滴下落、积水动态反光、涟漪扩散和水花溅起等特性。通过多层次动画系统、物理特性模拟和性能优化策略,文章展示了创建自然视觉效果的关键技术。完整代码提供了HTML结构、CSS样式和JavaScript逻辑,并解析了核心技术,如雨滴随机化、CSS动画技巧和积水效果实现。文章还提供了自定义参数和功能扩展建议,如添加雨声效果和交互元素。这种技术适用于网页背景和互动体验设计,未来可结合WebGL进一步提升效果。

2025-07-11 17:57:13 701

原创 Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)

本文介绍了在Vue框架下基于Cesium实现交互式多边形绘制与编辑功能的完整方案。主要内容包括:1. 核心功能实现:通过鼠标事件监听实现多边形绘制(左键添加顶点、右键结束),支持顶点拖拽编辑;2. 样式自定义:提供颜色选择器和透明度滑块,动态调整多边形外观;3. 实用功能:使用Turf.js进行实时面积计算,并在多边形中心显示结果;4. 问题解决:针对颜色异常、标签不可见、交互恢复等常见问题提供了具体解决方案;5. 代码结构:采用模块化设计,包含完整的Vue组件代码和CSS样式。该方案适用于GIS应用、智慧

2025-07-11 14:38:20 1230

原创 1、Cesium地图初始化完全指南:从基础配置到自定义瓦片服务

《Cesium地图初始化完全指南》摘要:本文详细讲解Cesium开源3D地理平台的初始化方法,涵盖两种环境配置方式(CDN和npm)。核心内容包括Viewer实例创建、控件管理、瓦片服务集成和3D/2D模式切换,重点解析了地图初始化函数及其配置参数。文章还提供完整HTML示例、常见瓦片服务URL模板,以及高级功能如视角调整、标记点添加和地形数据加载。最后强调版权合规性,并列出常见问题解决方案。适合开发者快速掌握Cesium地图开发技能,实现高性能3D地理可视化应用。

2025-07-10 18:01:33 866

原创 5、Vue中使用Cesium实现交互式折线绘制详解

摘要:本文详细介绍如何在Vue项目中集成Cesium实现交互式折线绘制功能。通过初始化Cesium Viewer和屏幕空间事件处理器,实现点击添加顶点、鼠标移动更新临时折线、双击完成绘制、右键取消等核心功能。重点解析了坐标转换、顶点去重、临时折线绘制、长度计算等关键技术实现,并提供了性能优化方案(节流处理)和资源管理建议。文章包含完整代码示例,适合需要开发3D地理信息可视化应用的前端开发者参考。

2025-07-10 17:59:54 1152

原创 2、基于vue + Cesium 的自定义地图初始化方案:从代码到实战

摘要:本文解析了Cesium地图初始化的核心代码,通过initMap函数实现三大功能:创建可配置2D/3D视图、集成自定义瓦片底图、设置初始视角。代码采用参数化设计,隐藏默认控件优化界面,支持TMS规范瓦片服务接入,并提供坐标转换方法。特别说明3D模式优化技巧和商业项目中去除版权信息的实现方式,为WebGIS开发者提供了一套可扩展的地图初始化模板方案。(149字)

2025-07-09 16:56:41 282

原创 3、Vue 中使用 Cesium 实现可拖拽点标记及坐标实时显示功能

本文介绍了在Vue框架下使用Cesium实现可拖拽点标记及坐标实时显示的方法。通过Cesium的Primitive方式创建点标记,利用事件监听实现拖拽功能,包括点选、移动定位和释放确认。关键技术点包括:使用PointPrimitiveCollection创建点标记,监听鼠标事件实现拖拽交互,坐标转换显示实时经纬度信息,以及控制地图交互提升用户体验。文章提供了完整的Vue组件代码,涵盖点标记创建、拖拽逻辑、坐标提示框跟随和地图交互控制等功能,适用于需要在地图上进行点位调整的场景。

2025-07-09 16:31:56 484

原创 4、vue Cesium 实现交互式线段绘制功能

本文详细介绍了在Cesium中实现交互式线段绘制功能的方法。通过监听鼠标事件(左键按下、移动和释放),将屏幕坐标转换为地理坐标,并利用Cesium的Primitive API绘制临时(红色)和永久(蓝色)线段。实现过程中通过禁用地图交互防止误操作,支持线段实时更新和历史记录保存。该方法适用于需要在地图上进行交互式绘制的GIS应用场景,代码结构清晰,包含完整的初始化、绘制逻辑和资源清理流程。

2025-07-09 16:31:23 326

原创 11、Cesium+Vue 实现 3D 模型动态轨迹可视化方案

本文介绍了如何利用Vue框架整合Cesium 3D地球引擎实现动态轨迹可视化。主要内容包括: 技术架构:使用Vue2.x+Cesium1.100+,支持glTF2.0模型格式和高德地图服务 核心实现: 高性能Cesium Viewer配置优化 高德地图底图集成方案 3D模型加载与姿态控制(Heading-Pitch-Roll系统) 基于时间轴的动态轨迹生成 智能相机跟踪系统 关键优化: scene3DOnly模式提升30%性能 纹理渐进加载避免卡顿 完整的资源释放机制 移动端交互优化 应用场景:适用于物流监

2025-07-05 18:05:05 1320

原创 深入理解Flex布局:从基础到实战的全面指南

Flex布局是现代前端开发的革命性布局方案,通过弹性容器和项目的概念简化复杂布局。摘要重点涵盖:1)Flex核心术语(主轴/交叉轴);2)6大容器属性(flex-direction/justify-content等)控制整体布局;3)5大项目属性(flex-grow/align-self等)调节个体表现;4)4个典型应用场景(导航栏/卡片列表/登录表单/仪表盘)。文章还提供兼容性解决方案和性能优化建议,并推荐Flexbox Froggy等学习资源,帮助开发者快速掌握这一布局利器。

2025-07-05 18:03:56 913

原创 CSS 垂直水平居中布局全攻略:从基础到进阶的 10 种实现方式

CSS垂直水平居中布局方案大全 本文系统梳理了10种常见的CSS垂直水平居中实现方法,涵盖从传统定位到现代布局技术。主要内容包括: 经典定位方法:绝对定位+margin:auto(兼容IE8+)、绝对定位+Transform(现代浏览器) 现代布局方案:Flexbox单行/多行居中(推荐首选)、Grid二维居中(语法极简) 特殊场景方案:表格布局(兼容旧版)、line-height(单行文本)、CSS变量动态适配 实战案例:登录框居中布局的最佳实践 选择指南:根据兼容性需求推荐Flexbox/Grid作为首

2025-07-02 15:54:47 1427

原创 10、基于 Cesium 的 3D 模型加载与地图可视化实战教程

本文介绍了在Vue项目中集成Cesium加载3D模型的技术方案。主要内容包括:1) Cesium与GLTF格式的基础知识;2) Vue环境搭建与Cesium配置;3) 实现高德地图底图加载和GLTF模型显示的完整代码;4) 关键技术点解析,包括模型位置控制、相机视角调整和错误处理;5) 常见问题解决方案。该方案采用模块化设计,提供良好的用户体验,支持模型交互和视图复位功能,适用于Web端的3D地理可视化应用开发。

2025-07-02 15:15:15 420

原创 9、WebGIS地图数据聚合优化技巧

本文针对WebGIS开发中频繁添加/移除要素导致浏览器崩溃的问题,提出两种优化方案。核心方案是通过数据聚合减少渲染量:在缩放操作时将邻近坐标点合并,通过网格化处理计算平均位置,并按单元格二次聚合。文中提供了完整的TSXYZ坐标类实现和merge聚合方法,包含坐标转换、网格划分、单元格合并等关键步骤。该方法适用于Leaflet、OpenLayers等主流地图框架,可有效降低内存占用。实际应用时需先过滤无效坐标数据,再调用聚合方法生成简化数据集进行渲染。

2025-07-01 16:12:07 367

原创 8、Cesium加载矢量数据

本文介绍了矢量数据的概念及其在GIS中的应用,重点阐述了Cesium支持的三种矢量数据格式:KML、CZML和GeoJSON。KML是一种基于XML的标记语言,用于描述3D地理信息;CZML是基于JSON的格式,用于3D场景渲染;GeoJSON则是常见的地理数据交换格式。文章详细说明了每种格式在Cesium中的加载方法,包括使用对应的DataSource类(KmlDataSource、CzmlDataSource、GeoJsonDataSource)及其常用属性和方法。这些格式都能在Cesium中有效呈现地

2025-07-01 16:08:28 851

原创 介绍一个可以下载cesium地图数据的好地方

阿里云和OpenStreetMap提供优质地图数据下载服务。阿里云数据可视化平台(datav.aliyun.com)支持GeoJSON、JSON、SVG等格式的区域数据下载。OpenStreetMap(www.openstreetmap.org)作为国际开源地图项目,也是获取地理数据的可靠来源。这两个平台能为Cesium、Leaflet、Mapbox等主流地图框架提供丰富的图层数据支持。

2025-06-20 16:05:27 171 1

原创 Cesium 坐标系转换

本文总结了Cesium中常用的坐标转换方法:1.经纬度转空间直角坐标;2.经纬度与弧度互转;3.空间直角坐标转回经纬度;4.屏幕坐标与经纬度/空间直角坐标互转;5.世界坐标与屏幕坐标转换。这些方法涵盖了二维屏幕坐标、三维空间直角坐标(WGS84)、地理坐标(经纬度和弧度)之间的相互转换,是开发三维GIS应用的基础操作。每种转换都通过Cesium提供的API实现,如Cartesian3.fromDegrees、Math.toRadians/toDegrees等。

2025-06-20 14:26:25 148

原创 vue + cesium 加载高德地图

摘要:本文展示了使用Cesium.js创建2D地图视图的代码实现。通过配置Viewer对象关闭了动画、图层选择器等UI组件,移除了默认影像图层并替换为高德地图矢量服务。代码包含地图初始化、图层配置、版权信息隐藏和相机定位等功能,最终实现了一个全屏显示的2D地图容器,默认定位到指定经纬度坐标(118.03577,24.57216)的高空视角。

2025-06-19 16:13:05 211

Cesium加vue实现钳击箭头等效果

攻击箭头,钳击箭头等Cesium效果

2025-07-23

cesium地图案例会持续跟新

内容概要:vue+cesium地图demo。 适用人群:初步接触cesium的开发人员。 使用场景:军工类项目或其他项目中需要用到cesium地图的地方; 文件中已经实现cesium 点 线 多边形 广告牌 模型加载以及交互等功能。每个功能都是一个vue组件,在app.vue中切换查看。项目可以直接运行,运行命令:npm run serve.

2025-07-15

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除