- 博客(33)
- 收藏
- 关注
RSS订阅原创 npm脚本无法运行的问题
【摘要】npm运行项目时报错"无法加载npm.ps1文件"，这是由于PowerShell执行策略限制导致的权限问题。解决方法：以管理员身份运行PowerShell，执行命令Set-ExecutionPolicy -Scope CurrentUser RemoteSigned并输入y确认，即可修改当前用户的执行策略，允许运行本地脚本。该操作解决了系统默认禁止运行脚本的安全限制，使npm命令能够正常执行。
2026-08-20 17:59:42
271
原创 vue3 实战系列之实现设置系统不同主题
本文介绍了在Vue3中实现系统主题切换功能的方法。通过动态修改HTML元素的class（light/dark）来控制主题样式，定义全局CSS变量来管理不同主题下的颜色、字体等样式属性。具体实现步骤包括：1）使用JavaScript切换HTML的class；2）在全局样式文件中定义light/dark主题的CSS变量；3）在组件中通过var()引用这些变量。这种方法实现了亮色/暗色主题的无缝切换，且易于维护和扩展样式体系。
2026-08-20 10:12:08
610
原创 vue3 @代指src路径设置
本文介绍了在Vite+Vue项目中配置路径别名的完整步骤：首先通过npm安装path模块，然后在vite.config.ts中设置resolve.alias将@映射到src目录；同时需要在tsconfig.app.json中配置baseUrl和paths，确保TypeScript能正确解析路径别名。完成这些配置后，即可在项目中使用@/路径引用src目录下的文件。该配置同时包含了一些TypeScript编译选项和lint规则设置。
2026-08-19 13:40:03
158
原创 vue3 $refs使用方法
Vue3 的 <script setup> 中推荐使用 ref 代替 this.$refs 来获取子组件实例。虽然可以通过 getCurrentInstance().ctx.$refs 访问，但这种方法不稳定，尤其在 <script setup> 中不推荐使用。更可靠的方式是：在模板中用 ref 绑定子组件，通过 ref.value 调用子组件方法，例如 trendChart.value?.initChart()，这种方式更符合 Vue3 的响应式规范且稳定性更高。
2026-08-19 13:38:33
387
原创 vue3 实战系列之无法识别vue组件
【摘要】当正确引用.vue组件仍报错时，可在src目录下创建类型声明文件解决。关键步骤：1.添加///<reference types="vite/client"/>三斜线指令；2.声明*.vue模块类型，使用DefineComponent定义组件类型并导出。该方法通过显式声明Vue单文件组件类型，配合Vite环境支持，可消除TypeScript的类型检查报错问题。（98字）
2026-08-18 17:27:58
26
原创 vue3 实战系列之类型保护
本文介绍了TypeScript中的类型保护机制，通过类型判断来处理不同类型的数据。作者指出typeof操作符存在局限性（如无法区分null和数组），推荐使用Object.prototype.toString.call方法进行更精确的类型判断。文中提供了完整的类型判断工具函数代码，包括字符串、数字、布尔值、日期、对象、正则表达式、数组、null等多种类型的判断方法，以及判断变量是否为空值的工具函数。这些工具函数可以封装为独立模块，便于在项目中复用。
2026-08-18 11:24:02
349
原创 cesium 实战系列之地图导航控件
本文介绍了在Cesium三维地图中实现导航控件的代码实现方法。通过调用initMapControl()函数并配置options参数，可自定义导航控件功能，包括：设置默认视图范围、启用/禁用罗盘、缩放控件、距离图例和指南针外环。控件位置和样式可通过CSS进行修改，示例中展示了如何调整罗盘控件的位置和尺寸。该实现方式简洁高效，只需在初始化地图后直接调用即可快速集成导航功能。
2026-08-17 09:14:37
23
原创 cesium 实战系列之地形
本文介绍了Cesium三维地形加载的关键配置方法。首先需在初始化Viewer时开启WebGL支持，包括设置contextOptions参数和确保运行环境支持WebGL。其次详细说明了地形加载的实现：通过CesiumTerrainProvider指定地形服务URL（如DEM数据），并配置水面波纹、地形光照等特效，最后设置viewer.terrainProvider完成加载。文中还提供了移除地形的EllipsoidTerrainProvider方案，以及通过terrainExaggeration参数实现地形夸张
2026-08-17 09:12:51
275
原创 cesium 实战系列之测距、测面
本文介绍了在Cesium中实现测距和测面功能的方法，通过屏幕空间事件处理和实体绘制完成交互式测量。代码封装了测量工具类，支持绘制线段（测距）和多边形（测面），实时计算并显示距离/面积结果，包含清除测量标记的功能。关键实现包括：鼠标事件监听、动态实体绘制（点/线/面）、Turf.js面积计算、坐标转换及中心点计算，最终以标签形式呈现测量结果，支持米/公里单位自动转换。
2026-08-16 09:14:25
126
原创 cesium 实战系列之独栋建筑选中特效
本文介绍了在三维场景中实现建筑物选中高亮效果的完整解决方案。通过鼠标拾取获取建筑物唯一标识码，调用后端接口获取建筑物GeoJSON数据，利用坐标数据生成三维轮廓并拉伸高度，同时使用Canvas创建渐变色材质作为高亮效果。关键代码包括：1）初始化地图点击监听；2）生成渐变色材质函数；3）根据GeoJSON数据创建建筑物轮廓实体。该方法通过精确控制建筑物轮廓和渐变高亮效果，实现了清晰直观的选中状态展示，解决了常见方案中效果不理想的问题。
2026-08-16 09:10:35
270
原创 cesium 实战系列之三维建筑白模
本文介绍了如何在Cesium中加载3DTiles数据并实现基于建筑高度的白模着色效果。主要内容包括：1）初始化Cesium地图并加载深色ArcGIS底图；2）加载3DTiles数据并使用条件表达式根据建筑高度（jzgd属性）设置不同颜色；3）处理坐标系偏移问题，通过矩阵变换进行人工纠偏；4）禁用动态光照效果，避免时间变化对白模着色的影响。文章提供了完整的代码实现，展示了如何通过Cesium3DTileStyle实现建筑高度可视化效果，为三维GIS应用开发提供了实用参考。
2026-08-15 21:31:28
410
原创 cesium 实战系列之矢量数据转3dtiles
本文介绍了将shp矢量数据转换为3Dtiles格式的步骤，这是三维项目中的常见需求。首先需要注册免费的CesiumLab账号，然后通过该平台处理shp文件：选择文件、指定坐标系和高度字段，选取不超过10个建筑模型字段并设置输出路径。处理完成后会生成3Dtiles文件夹，可直接用于Cesium加载。文章预告下一篇将讲解如何在Cesium中加载这些3Dtiles数据以实现三维可视化效果。
2026-08-15 21:30:55
479
原创 cesium 实战系列之风场进阶版
本文介绍了一个动态风场可视化案例，基于区域风场数据实现可交互调整功能。通过HTML和JavaScript代码构建了包含粒子数量、线宽、移动速度、存活时间和颜色选择等参数的界面控件，使用Canvas技术实时渲染风场效果。文章详细展示了如何通过滑块控件动态调整各项参数，包括使用防抖技术优化性能，以及颜色选择器的实现方法。该案例在Cesium三维地球平台上运行，支持响应式布局和参数即时更新，为风场数据的可视化提供了灵活的交互方式。
2026-08-14 09:23:04
118
原创 cesium 实战系列之图标
本文介绍了在Cesium中实现多种动态图标的创新方法：1. 使用Canvas绘制复合标识牌，动态生成包含设备状态、ID等信息的自定义图片；2. 通过椭圆实体属性实现光圈扩散效果；3. 结合HTML/CSS动画创建动态光圈标记，利用postRender实时更新位置；4. 扩展实现HTML仿标识牌、ECharts图表、视频播放和雷达扫描等复杂图标效果。这些技术突破了传统静态图标的限制，为地理信息系统提供了更丰富的数据可视化手段。文章包含完整的代码示例和效果演示，展示了如何通过Cesium与前端技术的结合实现高度
2026-08-14 09:22:26
936
原创 cesium 实战系列之鼠标拾取、点击、双击、悬浮、信息查询
本文介绍了Cesium中鼠标事件的初始化与使用方法。通过Cesium.ScreenSpaceEventHandler可以注册多种鼠标事件（左键、右键、双击、移动等），并提供了获取点击位置经纬度、模型信息和图层数据的实用代码示例。文章还强调了使用完毕后要通过removeInputAction和destroy方法销毁事件处理器，避免内存泄漏。这些功能在地图交互、图斑查询等场景中非常实用。
2026-08-13 09:04:39
347
原创 cesium 实战系列之鹰眼地图
本文介绍了如何实现鹰眼地图跟随主地图同步移动和缩放的功能。与之前飞机视角跟随的案例不同，这次方案更具通用性。通过创建主地图和鹰眼地图容器并初始化后，首先将两个地图定位到相同位置，然后监听主地图的视角变化事件，实时计算主地图当前视窗的中心点和范围，按比例调整鹰眼地图的显示区域。关键代码展示了如何获取主地图的视图范围矩形，计算中心坐标，并按缩放比例设置鹰眼地图的显示范围，从而实现两个地图的同步联动效果。这种方法适用于各类需要展示全局位置关系的GIS应用场景。
2026-08-13 09:04:01
343
原创 cesium实战系列之卫星轨道
本文介绍了基于Cesium平台实现卫星轨迹可视化及过境预测功能的方法。系统通过CZML格式文件加载卫星轨道数据，利用CzmlDataSource API展示卫星实时轨迹，并添加圆锥实体增强可视化效果。过境预测功能通过以下步骤实现：1) 获取预测区域的经纬度边界，构建外接矩形进行初步筛选；2) 结合卫星轨道数据和幅宽信息，计算卫星与目标区域的相交情况；3) 使用Turf.js进行空间分析，判断卫星轨迹是否覆盖目标区域。系统还实现了轨迹插值优化和计算结果去重处理，最终将预测结果以可视化形式展示在地图上并生成过境
2026-08-12 09:39:50
804
原创 cesium 实战系列之雷达通信、实时模拟真实飞行场景、鹰眼地图实时跟随
本文介绍了基于Cesium框架实现飞机飞行模拟的两种方法：虚拟数据模拟和雷达通信真实数据实时模拟。在虚拟数据方案中，通过添加飞机模型、设置初始/结束时间和位置、均匀分布路径点来实现飞行轨迹，并配套实现鹰眼地图跟随功能。真实数据方案则通过WebSocket接收雷达通信设备传回的实时位置数据，动态更新飞机轨迹，优化了采样频率和内存管理。两种方法均实现了时间轴同步、飞行路径可视化及鹰眼地图实时跟随功能，其中真实数据方案还包含数据节流处理和轨迹平滑优化。
2026-08-12 09:39:14
396
原创 cesium 实战系列之全局图层管控
本文介绍了一种基于Cesium的图层控制方法，通过layerControl.js文件实现地图开发中的高效图层管理。该方法将图层分为底图(baseLayers)、中层(middleLayers)和顶层(topLayers)三类，提供添加、删除、移动、切换、重命名等操作接口。文章详细说明了各类图层的加载方式（如天地图底图、WMS/WMTS业务图层），并给出了具体调用示例，包括图层切换、层级调整等常见场景操作。这种分层管理方案有效解决了地图开发中图层叠加顺序混乱的问题，适用于需要处理多种图层类型的复杂地图应用场景
2026-08-11 08:52:53
186
原创 Leaflet flyTo/setView/fitBounds 实际运用及区别
常规的定位无非就是三种，flyTo/setView/fitBounds，直观上讲flyTo就是有一个飞的过程，setView 是视角直接定位过去，没有飞的过程，而fitBounds则是根据四至经纬度定位同时将地图缩放到四至范围大小。这样干说可能没有什么感觉，云里雾里的，什么什么啊，下面我附上具体的实例Gif更加直观。
2026-08-11 08:52:26
164
原创 cesium 实战系列之cesium风场
本文介绍了在Cesium平台上实现风场可视化的技术方案。主要步骤包括：1) 创建风场渲染容器Canvas；2) 引入并配置windy.js库，设置风速比例、粒子参数等关键参数；3) 通过initWindy.js初始化风场，处理地图相机移动事件实现动态重绘；4) 调用后台接口获取风场JSON数据进行渲染。文中详细展示了风场粒子的颜色映射、运动轨迹计算等核心算法，以及如何与Cesium地图视图进行交互。该方案实现了流畅的风场动态效果，支持视图变化时的自动重绘，并提供了风场显示/隐藏的控制接口。
2026-08-10 09:12:53
43
原创 cesium 实战系列之卷帘、图像对比功能
卷帘的原理很简单，无非就是左边加载一个影像，右边加载一个影像，切换的时候各自替换各自的影像。在页面初始化的时候调用下面的方法，图层替换成你自己的图层。1、创建地图容器的时候同时创建卷帘的容器。
2026-08-10 09:12:10
36
原创 关于Leaflet绘制
本文介绍了Leaflet地图开发中的鼠标事件处理和图形绘制功能。主要内容包括：1）六种常用鼠标事件（单击、双击、移动、移入、移出、右键）的应用场景，重点展示点击事件实现地理信息查询的代码示例；2）Leaflet绘制点、线、多边形、圆等基础图形的方法；3）实现任意多边形绘制功能的完整代码方案，包含点线面组合绘制和各类鼠标事件处理逻辑。文章提供了可直接调用的封装类，帮助开发者快速实现地图交互和图形绘制功能。
2026-08-09 20:06:33
169
原创 Leaflet 放大、缩小、测距、测面
创建measure.js文件，然后在页面中直接引用即可，调用startDrawLine（测距）、startDrawPolygon（测面）前面的文章已经讲过如何创建地图实体和如何添加图层，今天就直接在此基础上继续开发，对此不过多赘述。
2026-08-08 08:58:52
34
原创 Leaflet热力图
本文介绍了使用leaflet.heat插件创建热力图的方法。首先通过npm安装leaflet.heat，然后在初始化地图后调用initHeatMap函数。函数中演示了两种数据构造方式：一种是硬编码的示例数据（包含经纬度和强度值），另一种是注释掉的动态生成方式。热力图通过L.heatLayer创建，可配置半径(30)、透明度(0.3)和自定义颜色渐变（从蓝色到红色的8个色阶）。最终通过addTo方法将热力图层添加到地图中，并附有效果图展示。
2026-08-08 08:57:25
22
原创 继上篇之后，讲一下leaflet分屏功能
本文介绍了Leaflet地图库中分屏和多屏功能的实现方法。分屏功能通过leaflet-side-by-side插件实现，左侧为空图层，右侧为动态加载的图层，并禁用地图拖拽以避免混乱。多屏功能则通过动态创建多个地图实例，使用el-checkbox-group管理时间选择，支持最多4个地图同时显示，并能实现多图联动操作（缩放、平移同步）。文章详细说明了两种功能的实现步骤、关键代码及效果展示，包括分屏的创建/清除方法，以及多屏的视图切换、地图实例管理等技术细节。源码部分展示了完整的Vue组件实现。
2026-08-07 11:32:07
212
原创 关于Leaflet基础知识
本文介绍了Leaflet二维地图库的基本使用方法，主要包括地图实例创建、图层控制和实体创建三部分内容。首先需要引入Leaflet的JS和CSS文件，通过L.map()创建地图实例并设置初始参数。其次，通过图层组管理不同层级的地图图层，支持瓦片、WMS、WFS等多种服务类型，并详细说明了图层的添加、删除和切换操作。最后，演示了如何创建文字注记和图片注记，包括设置样式、绑定点击事件和弹窗交互等功能。文章还提及了多种地图定位方式（flyTo、setView、fitBounds）和通过WFS服务获取地理要素的方法，
2026-08-07 10:22:23
217
原创 Canvas创建虚拟三维地图
本文演示了如何仅用原生Canvas实现基础地图功能：1. 创建固定尺寸的canvas容器；2. 通过drawImage方法加载地图图片并实现坐标变换；3. 添加标记点绘制功能；4. 手动实现核心交互功能，包括：通过wheel事件监听实现缩放（限制0.5-3倍范围）、通过mouse事件实现拖拽平移（记录起始坐标和偏移量）、点击事件等。相比主流地图库，这种原生实现需要自主处理所有交互逻辑，但揭示了地图库底层原理，适合需要深度定制或学习Canvas绘图的场景。
2026-08-06 08:53:57
33
原创 浙政钉扫码登录
本文介绍了浙政钉扫码登录组件的接入流程。首先需在IRS工作台获取已申请应用的AK/SK，后端需通过这些凭证返回用户信息。登录页面需嵌入iframe组件，其关键参数包括client_id（应用ID）、redirect_uri（回调地址）等，这些信息在应用申请通过后由浙政钉工作台提供。前端通过监听message事件获取扫码返回的code，并调用指定接口完成登录验证。整体流程涉及应用凭证获取、登录组件嵌入及扫码回调处理三个主要环节，需确保各环节参数配置正确才能实现扫码登录功能。
2026-08-06 08:53:21
188
原创 关于Leaflet如何将icon通过经纬度映射添加到canvas地图上
本文介绍了如何在地图上添加图标并实现交互功能。首先通过L.layerGroup()创建图标图层，然后建立经纬度与地图坐标系（0-1000范围）的映射关系进行坐标转换。接着使用L.icon()创建图标，并通过L.marker()将图标添加到映射后的位置。最后为图标绑定click和dblclick事件，实现单击显示大图、双击触发事件等功能。文章提供了完整的Vue组件代码，包含地图初始化、坐标转换、图标添加和事件处理等核心功能，可直接复制使用。关键点包括坐标映射公式和图层管理，适用于需要在自定义地图上添加交互式图
2026-08-05 16:21:58
228
原创 Leaflet 通过二维图片生成canvas三维地图
本文介绍了如何使用Leaflet的imageOverlay API实现三维地图图片叠加功能。主要步骤包括：1）创建地图容器；2）初始化地图配置（使用简单坐标系、设置缩放范围等）；3）添加影像图层；4）定义图片边界坐标；5）通过imageOverlay加载本地图片并绑定边界；6）调整地图视图适配图片范围。文章提供了完整的Vue组件代码示例，包含模板结构、地图初始化方法和样式设置，开发者只需替换图片路径即可直接使用。该方法通过取消地图默认背景，实现了自定义地图图片的无缝叠加展示。
2026-08-05 16:00:08
354
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人