- 博客(127)
- 收藏
- 关注
RSS订阅
原创 WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了【建议收藏】
《WebGIS之Vue零基础教程》（1）Vue简介《WebGIS之Vue零基础教程》（2）Vue快速上手WebGIS开发系列教程（1）：GIS开发基础WebGIS开发系列教程（2）：Openlayers概述WebGIS开发系列教程（3）：Openlayers快速入门WebGIS开发系列教程（4）：Openlayers之多源数据展示WebGIS开发系列教程（5）：Openlayers高级功能WebGIS开发系列教程（6）：Openlayers之项目实战Three.js三维开发0基础教程：(1)搭建开发环境Th
2025-04-25 13:57:10
1379
原创 Three.js搭建小米SU7三维汽车实战（6）颜色切换
这篇文章介绍了如何实现懂车帝APP中的汽车颜色切换功能。主要内容包括：1) 创建颜色选择器UI界面，包含5种预设颜色；2) 通过点击事件触发颜色切换，默认选中第一种颜色；3) 修改汽车材质颜色时使用Tween.js实现平滑过渡动画；4) 轨道控制器优化，限制只能左右旋转查看汽车。实现核心是通过修改名为"Car_body"的材质颜色，并配合动画效果完成颜色切换，最终效果如图所示。
2025-05-28 14:38:01
368
原创 Three.js搭建小米SU7三维汽车实战（5）su7登场
介绍了在Three.js中加载和优化汽车3D模型的全过程。首先使用GLTFLoader加载GLB格式的汽车模型，发现模型呈现黑色后添加了环境光和方向光源。接着通过RGBELoader加载HDR全景图设置环境反射，使车漆呈现真实反光效果。然后详细讲解了阴影的实现步骤：1）启用渲染器阴影贴图；2）遍历模型设置投射阴影；3）创建接收阴影的地面；4）调整光源阴影参数。最后通过提高阴影贴图分辨率、添加AO贴图加深阴影颜色、设置阴影边缘柔化等技巧，使模型呈现更真实的视觉效果。整个流程涵盖了3D模型加载、光照设置、环境反
2025-05-26 09:00:10
827
原创 Three.js搭建小米SU7三维汽车实战（4）场景搭建
本文介绍了如何使用Three.js创建一个3D展厅，并逐步添加地板和背景。首先，通过Three.js创建场景、相机和渲染器，并添加一个立方体作为初始对象。接着，使用OrbitControls实现场景的交互控制。随后，将立方体替换为圆形地板，并通过旋转和材质调整使其水平放置。最后，通过SVG渐变图设置展厅背景，模拟真实展厅效果。整个过程展示了如何通过代码构建一个简单的3D展厅，并为其添加基本元素和视觉效果。
2025-05-26 08:59:12
1172
原创 Three.js搭建小米SU7三维汽车实战（3）轨道控制器
轨道控制器是一种用于调整相机在3D空间中的位置和视角的工具，使用户能够从不同角度观察物体。它通过响应鼠标事件（如左键旋转、滚轮缩放、右键平移）来改变相机的位置，并实时重新渲染场景。轨道控制器涉及两套坐标系统：3D世界的坐标系和相机的观察坐标系。通过导入OrbitControls组件并创建控制器，开发者可以轻松实现相机的动态控制。此外，为了适应浏览器窗口的变化，轨道控制器还支持自适应画布功能，确保相机宽高比和渲染器尺寸随窗口调整而更新。
2025-05-23 09:24:18
352
原创 Three.js搭建小米SU7三维汽车实战（2）场景搭建
本文介绍了如何使用Three.js搭建三维场景的基本步骤。首先，需要创建一个三维场景（Scene），接着创建相机（Camera），最后创建渲染器（Renderer）进行渲染。渲染过程可以理解为用相机在场景中拍照，并将照片显示在画布上。文章还详细展示了如何添加物体（如立方体）到场景中，并通过动画旋转物体来观察三维效果。此外，还介绍了如何通过开启抗锯齿和设置DPI来优化渲染效果。最后，提供了一个完整的示例代码，展示了如何结合场景、相机、渲染器和动画功能，实现一个简单的三维场景。
2025-05-23 09:08:32
812
原创 Three.js搭建小米SU7三维汽车实战（1）搭建开发环境
首先，场景被定义为一个三维空间或容器，相机则是观察三维空间的工具，通过不同角度的观察和图像拼接，模拟三维效果。物体是被观察的对象，具有不同的形状、大小、材质和纹理。光源则用于产生明暗效果。在开发环境搭建部分，建议使用代码自动补全和模块化开发，推荐使用vite作为打包工具。文章详细说明了如何初始化项目、安装three.js、配置vite以及创建入口文件和启动开发服务。通过这些步骤，开发者可以快速搭建一个基于three.js的三维开发环境。
2025-05-22 16:03:46
600
原创 三维GIS开发cesium智慧地铁教程（8）动态光线
介绍了如何在网页中引入Cesium库并创建动态地图视图。首先，通过HTML引入Cesium的JavaScript和CSS文件，并设置视口以适配不同屏幕尺寸。接着，在页面中创建Cesium的容器并初始化Viewer对象。
2025-05-09 09:11:51
218
原创 三维GIS开发cesium智慧地铁教程（7）路径漫游
介绍了如何在网页中引入Cesium库并创建动态地图视图。首先，通过HTML引入Cesium的JavaScript和CSS文件，并设置视口以适配不同屏幕尺寸。接着，在页面中创建Cesium的容器并初始化Viewer对象。
2025-05-09 09:11:39
530
原创 三维GIS开发cesium智慧地铁教程（6）添加模型
本文介绍了Cesium项目的初始化与模型加载过程。首先，创建基础场景并在HTML中设置容器，随后引入Cesium库并配置安全认证。接着，详细说明了空间坐标转换和模型姿态控制的实现方法，包括WGS84坐标系的组成和坐标转换的数学原理。最后，通过代码示例展示了实体创建与参数配置、镜头飞行控制以及智慧城市应用的动态路径规划、数据驱动可视化和交互事件处理等功能。
2025-05-09 09:10:50
400
原创 三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建关键配置点路径验证：确保相对路径存在Cesium SDK版本锁定：代码对应Cesium 1.99版API为核心引擎，控制界面元素样式二、视窗布局空间坐标系解析单位确保容器始终占据全视口禁用滚动条，防止场景溢出三维坐标系原点：代码中设置的经度110°E/纬度20°N（WGS84坐标系）场景初始化相机控制模块1. 空间定位三维坐标转换将WGS84地理坐标转换为笛卡尔空间坐标参数说明：110: 东经度数20: 北纬度数20000: 相机高度（米），相当于20公里高空。
2025-05-09 09:04:58
152
原创 三维GIS开发cesium智慧地铁教程（4）城市白模加载与样式控制
一、添加3D瓦片二、3D Tiles技术栈1. 3D Tiles规范数据分块：LOD层级划分的瓦片结构格式特点：支持glTF、b3dm等三维格式空间索引：四叉树空间索引机制模型加载流程：三、核心代码1. 模型加载模块与的区别：Primitives用于高性能渲染，Entities用于交互式实体模型坐标系：自动匹配WGS84坐标系2. 异步加载控制3. 条件着色系统：模型自带的元数据属性：类型转换函数：颜色构造函数，参数格式为4. 场景定位控制镜头运动参数：默认飞行时间：3秒。
2025-05-08 10:04:32
284
原创 三维GIS开发cesium智慧地铁教程（3）entity实体
坐标系转换：所有地理坐标需通过转换为笛卡尔坐标单位规范：长度参数默认使用米制单位性能优化：单个实体顶点数不宜超过10000个令牌安全：正式环境应将Ion令牌存储在服务器端。
2025-05-08 10:01:59
181
原创 三维GIS开发cesium智慧地铁教程（2）隐藏地图控件
本篇教程主要基于上一篇的cesium地图添加了一些常用控件隐藏功能，便于展示智慧地铁可视化项目。
2025-05-08 09:46:09
408
原创 三维GIS开发cesium智慧地铁教程（1）地球初始化
一、HTML骨架搭建</</</标签确保中文正常显示和移动端适配引入Cesium的JS文件和CSS样式表相当于搬来了建筑工具和装修材料二、全屏地图容器margin;padding;width;/* 视窗宽度 */height;/* 视窗高度 */overflow;</选择器清除默认边距，避免出现滚动条让地图容器占满整个浏览器窗口隐藏溢出内容，保持界面整洁三、创建地图画布</</这个就像一块空白画布：我们通过id给它贴标签后续所有三维内容都会渲染在这个容器里四、Cesium身份验证。
2025-05-08 09:45:18
484
原创 MCP实践-搭建基础的MCP服务
MCP协议：大模型的「万能插头」系统正如一个优质插座能兼容多种彩色插头，MCP协议就是大模型的通用接口标准 让各类服务像「即插即用」的插头一样，轻松扩展大模型能力MCP (Model Context Protocol) 是 Anthropic 为 Claude 开发并开源的一个协议允许 AI 模型与外部服务进行通信，扩展其能力范围目前只有Claude AI模型提供MCP支持, MCP的相关服务构成了Claude的生态.1Claude AI：使用 MCP 协议与外部服务通信。
2025-05-07 13:43:44
1090
原创 2025Mapbox零基础入门教程（13）常用控件
1.控件的定义：控件是地图上用于控制地图行为或显示信息的元素。2.常用控件：包括归因控件、全屏控件、定位控件、导航控件、比例尺控件等。归因控件Attribution control1.归因控件的定义：用于显示地图数据的归因信息，通常包含地图提供商的logo或文本。2.配置选项：包括compact（是否显示紧凑归因信息）和customAttribution（自定义归因文本）。3.添加方法：使用map对象的attributionControl方法添加归因控件。});
2025-05-07 09:53:51
327
原创 2025Mapbox零基础入门教程（12）地图标记和弹窗
通过设置draggable属性，可实现标记的拖拽功能，并利用dragend事件获取拖拽后的最新位置。Mapbox的高度封装简化了操作，但了解如何在未封装的情况下实现同样功能对于提升技术能力同样重要。在Mapbox中添加地图标记（marker）的流程包括使用Mapbox GL库中的marker类创建标记，并通过setLngLat方法设置标记的位置。markers类具有丰富的配置选项，包括图标位置、颜色、大小等。Marker默认样式为蓝色，但可通过配置选项进行自定义，如改变颜色、位置、尺寸等。
2025-05-07 09:52:40
265
原创 2025Mapbox零基础入门教程（11）geojson绘制面
点击事件监听器，通过点击地图，实现将前面绘制的半透明多边形变为不透明。设置多边形的填充透明度为 0.5（半透明）。，表示这个图层用于填充多边形区域。设置多边形的填充颜色为粉红色。，即之前添加的数据源。
2025-05-06 11:42:45
402
原创 2025Mapbox零基础入门教程（10）geojson绘制线
3.添加图层：使用mapbox.addLayer方法添加图层，并设置图层的名称、类型和数据源。在Mapbox中加载GeoJSON数据绘制线的过程包括：首先准备线数据，然后在Mapbox中添加数据源和图层，设置图层类型为线，并指定数据源和样式。这个过程需要遵循地图的style加载完毕的规则，确保在正确的时间进行数据源和图层的添加。2.添加数据源：使用mapbox.addSource方法添加数据源，并设置数据源的名称和类型为GEOJSON。1.准备线数据：使用工具快速准备线数据，下载线数据并创建线数据文件。
2025-05-06 11:18:39
141
原创 2025Mapbox零基础入门教程（9）geojson添加文本
Mapbox中加载GeoJSON并添加文本的核心在于利用图层的layout属性设置样式，包括读取GeoJSON中properties的title字段以显示文本。在layout中设置text-field属性时，需正确引用字段名，如"get(‘title’)"。此外，还需在Mapbox样式中加载字体资源，并通过paint设置文本的字体颜色、透明度等属性，最后调整text-offset确保文本位置正确。1.layout属性用于设置图层的样式，包括文本标注等。
2025-05-06 11:18:09
410
原创 2025Mapbox零基础入门教程（8）geojson加载点要素
2. 通常通过加载GeoJSON数据来绘制点、线和面，因为GeoJSON对象中包含type属性，可以表达点线面的关系。使用map.loadImage方法加载图标，并在图片加载完成后使用map.addImage将图标添加到地图实例中。在OpenLayers中，通过创建点Feature并设置style来添加标记，如icon、image或text。1. 在OpenLayers中，可以通过创建Feature对象来绘制点、线和面。添加数据源和图层，将点数据和图标显示在地图上。在当前位置标记一个点，并添加位置标记。
2025-05-06 11:17:35
195
原创 2025mapbox零基础入门教程（6）跳转平移和旋转
包括上一期教程，我们一共提到几个概念：fly to飞行动画ease to过渡动画fly to和ease to的动画轨迹稍有区别，其中地球自转效果是使用ease to实现jump to跳转：直接跳转，无动画效果pan to平移动画rotate to旋转动画几种效果的使用方法很相似，也是mapbox中最常用的几种视图切换效果。
2025-04-30 08:59:05
574
原创 2025Mapbox零基础入门教程（5）地球自转
例如，假设有这样一个场景，我想看某一个区域的一些具体的内容，通过鼠标拖动地球，你会发现拖动后它还在转。我要往它往左边拖，但是它要往右边转。这时大家可能发现，自转一顿一顿的，不连贯，那么我们可以通过调整动画曲线参数使自转效果更加平滑和连贯。我们需要在这里设置让拖拽的时候自转停止，引入。我们发现，地球转一下就停了，是什么原因呢？我们可以通过地球拖动功能进一步优化。如果要持续自转应该怎么做呢？，这时经度变化只变化一点。这个问题应该怎么解决？如何再让它继续转起来？因为我们只执行了一次。
2025-04-30 08:58:33
282
原创 CursorPro脚本-帮助文档
env配置文件和CursorPro脚本需要放在同一目录下. .env文件要根据你自己申请的参数配置. 配置完成后, 再运行脚本. 如果没有.env文件或者直接运行脚本也可能会闪退。目标位置, 填写自己常用的邮箱, 来接收邮件. 所有域名下的邮件都会被转发到这个邮箱。编辑Catch-All规则, 所有发往域名的邮件都会被转发到你设置的邮箱中。其他的云平台是一样的, 选择一个自己熟悉的平台就可以, 价格差不多。如果执行脚本遇到网络问题请重点检查这个界面!注册一个阿里云的账号, 购买一个最便宜的域名。
2025-04-29 10:43:50
257
原创 WebGIS开发智慧机场项目实战（1）
L7是由蚂蚁金服`AntV数据`可视化团队推出的基于`WebGL`的开源大规模`地理空间数据`可化视分析开发框架。L7中的L代表Location7代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。L7能够满足常见的地图图表，BI系统的可视化分析、以及GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
2025-04-28 09:26:08
748
原创 《WebGIS之Vue进阶教程》（13）ref的实现
所谓自动脱ref, 就是不写`.value`对于ref类型数据, 每次在访问时, 需要加.value才能触发响应式.但是这样做无疑增加了心智负担, 尤其是在写模板时, 不够优雅为此, Vue3提供一个API:proxyRefs对传入的ref类型对象进行代理, 返回proxy对象个人理解: 有点类似toRefs的逆操作??
2025-04-28 09:21:32
1027
原创 《WebGIS之Vue进阶教程》（12）watch的实现
watch叫侦听器, 侦听某个响应式数据, 当数据改变时, 重新执行对应的回调所以, watch可以建立数据->函数的对应关系。
2025-04-28 09:21:07
613
原创 《WebGIS之Vue进阶教程》（11）computed的实现
::info**📝****计算属性**基于现有的状态再次加工得到一个新状态当现有状态改变时, 新状态会重新计算:::使用演示})分析上面的示例不难看出computed()函数的参数是一个副作用函数, 依赖firstname和lastnamecomputed()函数跟注册副作用函数effect()类似. 接收一个副作用函数做为参数对计算属性而言, 默认不会执行计算方法(副作用函数). 只有访问其`value`属性时, 才会执行计算方法使用示例。
2025-04-28 09:20:08
1186
原创 《WebGIS之Vue进阶教程》（10） 深入完善响应式系统
我们重写`trigger`函数, 多加一个判断: 只有当遍历执行的函数跟当前副作用函数不同时, 才会调用`run`去执行。因此, 我在重置版录视频时, 砍掉了这部分. 希望优先保证大家对主线的理解和更自然更好理解的调试。在track收集属性依赖的副作用函数的同时, 记录当前副作用函数依赖的属性。为了实现单例, 我们需要建立`源对象`->`代理对象`的映射关系。由于我们需要在副作用函数上扩展一些属性, 重新收集新的依赖。// 在副作用函数中, 设置依赖的值, 会出现死循环。新增一个清理函数`cleanup`
2025-04-28 09:19:44
817
原创 2025Mapbox零基础入门教程（4）地图点击事件
飞线动画本篇主要讲解地图点击事件与样式修改及三维效果实现，主要介绍在mapbox中如何绑定地图点击事件，并获取及修改图层样式。通过set paint property方法，可以修改图层的绘制属性，如填充颜色。此外，还介绍如何通过设置pitch和bearing实现地图的三维效果，包括仰角、俯角及旋转。通过按钮绑定事件，可以动态调整这些参数，增强地图的交互性和视觉效果。
2025-04-27 09:21:54
343
原创 2025Mapbox零基础入门教程（3）加载第三方底图
本章主要介绍，在mapbox中加载第三方底图如高德地图，需自定义style，包括数据源与图层配置。主要流程未创建地图实例后，通过定义source加载第三方瓦片服务，如高德地图。将source添加到图层并配置属性，如type、size及resource名称。最后设置projection为globe及缩放级别、中心点。
2025-04-27 09:20:16
175
原创 2025Mapbox零基础入门教程（2）更改底图样式
本篇主要介绍Mapbox服务加载地图的方法及概念，重点讲解了projection和style两个概念。3D地图VS平面地图卫星地图样式户外地图样式导航地图样式。
2025-04-27 09:16:57
202
原创 2025Mapbox零基础入门教程（1）地图初始化
mapbox是一个地图框架，不仅提供前端渲染能力，还具备后端服务接口能力。相较于openlayers，它可构建二维和三维地图，并支持优化导航路线和位置查询等功能。开发中使用mapbox需引入库文件并设置token，创建地图实例时，需指定容器、加载底图、设置中心位置及缩放级别等。通过示例代码，可成功在网页上展示地图，并支持3D视图和交互操作。Mapbox官网首页介绍，包括查询文档地址。访问文档可能需要代理工具，取决于网络访问速度。
2025-04-27 09:16:10
553
基于webGIS的大气监测系统
2024-09-12
openlayers项目广西水利信息在线分析服务系统
2024-09-11
webgis之openlayers
2024-09-10
webgis温州台风网项目
2024-09-10
WebGIS之Cesium三维软件开发-配套资料
2024-09-10
Gitee上的开源webgis项目 cesium demo集成了几乎所有可用的cesium功能
2024-09-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人