Professional Portfolio

WebGIS / 3D Visualization Engineer

用于项目展示、方案汇报与面试表达的 WebGIS / 三维可视化个人站。

不做传统博客首页,而是围绕精选项目、精选 Demo 与工程化能力来搭建一个长期可扩展的展示系统。

Cesium
Three.js
WebGIS
Digital Twin
TypeScript
Nuxt 4
Selected Works

精选项目

优先展示更适合讲清项目背景、职责边界、技术方案与成果价值的正式案例。

CASE STUDY智慧城市运营总览平台

通过“总览大屏 + 三维场景 + 业务联动”的方式,把城市级事件、设施状态和轨迹分析整合到一套统一交互中。

Nuxt 4TypeScriptCesium3D Tiles
  • 负责前端架构与三维场景模块组织
  • 负责业务面板与地图联动机制设计
查看案例详情
CASE STUDY园区数字孪生可视化交付

通过园区级三维场景、楼宇层级结构和运营指标卡片,把“空间对象 + 数据状态 + 展示逻辑”统一到一套可持续扩展的交付模型里。

VueThree.jsWebGISDashboard
  • 负责展示结构设计与页面组件方案
  • 负责 Demo 抽象与项目内容沉淀方式
查看案例详情
Selected Demos

精选 Demo

把 Cesium、Three.js 和可视化实验分开组织,首页只展示入口,不提前加载重型 3D 依赖。

CesiumCesium 城市场景扫描示例

首版先用客户端占位结构验证路由、加载边界与展示节奏,后续再替换成真实 Cesium viewer。

CesiumClient Onlyplaceholder
Nuxt 4TypeScriptClientOnlyDynamic Import
打开 Demo 详情
Three.jsThree.js 粒子场实验

先通过客户端动态组件承载粒子场占位效果,后续可替换为真实 shader、相机和交互逻辑。

Three.jsClient Onlyprototype
Nuxt 4Three.jsClientOnlyMotion Study
打开 Demo 详情
Visualization可视化驾驶舱结构概念

该 Demo 强调信息架构和布局节奏,适合作为专题页和后续业务联动模块的骨架。

VisualizationLightweightplaceholder
Nuxt 4Card SystemContent Driven
打开 Demo 详情
Capability

技能栈概览

围绕引擎能力、空间数据、前端工程化与展示系统搭建进行分组。

3D Engine

  • Cesium
  • Three.js
  • GLSL
  • Scene Performance

GIS / Data

  • GeoJSON
  • 3D Tiles
  • Spatial Analysis
  • Trajectory Visualization

Frontend

  • Nuxt 4
  • Vue 3
  • TypeScript
  • SSR Strategy

Engineering

  • Component Architecture
  • Content Modeling
  • Lazy Loading
  • Visual Systems
Contact

把这个站点同时作为对外展示、项目汇报和技术表达的主入口。

这里会持续补充更多项目案例、Cesium / Three.js Demo,以及少量技术总结,让后续维护和内容新增都可预测、可扩展。