智慧城市GIS设备可视化监控平台产品系统

通过大屏可视化形式，对全市范围内的数万个IoT设备（如传感器、监控杆、配电箱等）进行实时监控与空间分布展示。
深度融合 MapboxGL 地图引擎与 ECharts 数据可视化库，实现了海量设备的高性能渲染、多维数据钻取以及大屏的跨分辨率自适应展示。

作为前端核心开发人员，主导了智慧城市GIS设备可视化监控平台的架构设计与功能实现。该项目旨在通过大屏可视化形式，对全市范围内的数万个IoT设备（如传感器、监控杆、配电箱等）进行实时监控与空间分布展示。项目基于 Vue2 + TypeScript + Webpack 技术栈，深度融合 MapboxGL 地图引擎与 ECharts 数据可视化库，实现了海量设备的高性能渲染、多维数据钻取以及大屏的跨分辨率自适应展示。

· 基于 MapboxGL 实现了城市底图的加载与矢量切片渲染，通过 GeoJSON 动态加载与样式动态配置，实现了设备点、线（管网）、面（行政区划）的多图层叠加展示与空间查询功能。
· 针对地图上数万个设备点位渲染卡顿的痛点，摒弃了传统的 DOM Marker 方案，转而采用 MapboxGL 的 SymbolLayer 结合 Cluster（聚合） 策略。利用 WebGL 的 GPU 加速能力，实现了设备点的毫秒级渲染与流畅的缩放聚合交互，确保在大数据量下地图操作依然保持 60FPS 的流畅度。
· 在 Vue2 项目中全面引入 TypeScript，通过 .d.ts 文件对 MapboxGL 实例、GeoJSON 数据 结构以及 ECharts 配置项进行严格的类型定义，大幅降低了在复杂地图交互逻辑中的运行时错误。采用 Webpack 进行模块化打包，通过配置 externals 和 SplitChunks 对 ECharts、MapboxGL 等大型第三方库进行抽离与 CDN 加速，将首屏加载体积缩减了 40%。
· 针对指挥中心多尺寸大屏的展示需求，设计了基于 scale 缩放与 rem 布局相结合的自适应方案。封装了全局的 Resize 监听与防抖处理机制，确保 ECharts 图表与地图容器在窗口变化时能够自动重绘与精准对齐，完美兼容 1920*1080 到 8K 超宽屏等多种分辨率。
· 结合 Vuex 与 WebSocket 实现设备告警数据的实时推送与地图动态更新。设计了高效的状态管理机制，通过差异比对（Diff）仅更新发生变化的设备图层数据，避免了全量重绘带来的性能损耗。