一、项目概述1.1 项目背景智慧公路管理是交通数字化转型的核心场景。传统公路管理系统往往功能分散、可视化手段单一难以满足一图统揽、全域感知的管理需求。本项目旨在构建一个集二维/三维地图、数据大屏、业务管理于一体的综合GIS平台为公路管理者提供全方位的决策支持。1.2 项目预览系统包含以下核心页面模块 技术栈 核心能力综合态势 ECharts OpenLayers KPI统计、路网监控、趋势分析二维地图 OpenLayers 矢量/卫星双模式、7图层管理、实时路况三维地图 Three.js 俯视视角、卫星影像底图、事件标注智慧大屏 ECharts 全屏可视化、实时预警、路网态势资产管理 OpenLayers 路线/桥梁/隧道可视化应急指挥 OpenLayers 应急事件、资源调度二、技术栈选型2.1 核心技术栈{框架: Vue 3.5 TypeScript 5.4,构建工具: Vite 5.4,UI组件库: Element Plus 2.14,状态管理: Pinia 3.0,路由: Vue Router 4.4 (Hash模式),2D地图: OpenLayers 10.9,3D地图: Three.js 0.185,图表库: ECharts 5.5,HTTP: Axios 1.18}2.2 选型理由为什么选Vue3 TypeScriptVue3的Composition API让逻辑复用更加灵活TypeScript提供类型安全特别适合大型GIS项目中海量数据结构的管理。比如地图要素的属性定义TypeScript// 交通事件数据结构interface TrafficEvent {id: stringtype: accident | congestion | construction | breakdownname: stringlon: numberlat: numberlevel: danger | warning | info}// 道路数据结构interface Road {id: stringname: stringstatus: smooth | slow | congested | blockedcoords: [number, number][]}为什么同时用OpenLayers和Three.js两者各有优势OpenLayers专业2D地图库瓦片加载、投影转换、矢量要素渲染成熟稳定Three.jsWebGL 3D引擎适合三维场景渲染、动画特效双引擎互补2D地图走OpenLayers3D可视化走Three.jsVite构建优化TypeScript// vite.config.ts 分包策略build: {rollupOptions: {output: {manualChunks: {vue: [vue, vue-router],echarts: [echarts],ol: [ol],}}}}三、系统架构设计3.1 目录结构src/├── components/ # 通用组件│ └── MapContainer.vue # 地图容器├── composables/ # 组合式函数│ └── useMap3D.ts # 3D地图逻辑封装├── config/ # 配置文件│ └── map.ts # 地图配置(高德瓦片URL等)├── data/ # 模拟数据│ └── mockData.ts # 路线/桥梁/隧道等业务数据├── layout/ # 布局组件│ └── MainLayout.vue # 主布局(侧边栏顶栏)├── router/ # 路由配置│ └── index.ts # 路由表登录守卫├── stores/ # Pinia状态│ └── user.ts # 用户登录态├── utils/ # 工具函数│ └── mapUtils.ts # 坐标转换/瓦片URL生成├── views/ # 14个页面组件│ ├── Login.vue # 登录│ ├── Dashboard.vue # 综合态势│ ├── Map2D.vue # 二维地图│ ├── Map3D.vue # 三维地图│ ├── BigScreen.vue # 智慧大屏│ ├── Emergency.vue # 应急指挥│ └── ... # 其他业务页面├── App.vue├── main.ts└── style.css # 全局主题3.2 路由设计路由采用Hash模式分为三组TypeScriptconst routes [// 1. 独立页面无需登录{ path: /login, component: Login },{ path: /bigscreen, component: BigScreen, meta: { public: true } },// 2. 主布局子路由需登录{path: /,component: MainLayout,redirect: /dashboard,children: [{ path: dashboard, component: () import(../views/Dashboard.vue) },{ path: map-2d, component: () import(../views/Map2D.vue) },{ path: map-3d, component: () import(../views/Map3D.vue) },// ... 12个业务子页面全部懒加载]}]// 3. 全局登录守卫router.beforeEach((to, from, next) {const userStore useUserStore()if (to.meta.public || userStore.isLogin) {next()} else {next(/login)}})3.3 主题设计采用科技感深色主题通过CSS变量统一管理CSS:root {/* 主色调 */--primary-color: #00d4ff; /* 青色 */--secondary-color: #7b68ee; /* 紫色 *//* 状态色 */--success-color: #00ff88;--warning-color: #ffaa00;--danger-color: #ff5566;/* 背景 */--bg-dark: #0a0e1a;--bg-card: rgba(10, 20, 40, 0.95);/* 边框 */--border-color: rgba(0, 212, 255, 0.2);/* 发光阴影 */--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);}配合毛玻璃效果backdrop-filter: blur(16px)和发光动画打造大屏科技感。四、核心功能实现4.1 二维地图 —— OpenLayers二维地图是系统的核心页面基于OpenLayers实现支持矢量/卫星双模式切换、7种图层管理、实时路况、事件标注等。瓦片底图加载TypeScriptconst createTrafficLayer () {const source new VectorSource()const trafficColor: Recordstring, string {smooth: #00ff88,slow: #ffaa00,congested: #ff5566,blocked: #990000}trafficRoads.forEach(road {const feature new Feature()feature.setGeometry(new LineString(road.coords.map(c fromLonLat(c))))feature.setProperties({featureType: road,name: road.name,status: road.status,speed: getSpeedByStatus(road.status),congestionIndex: getIndexByStatus(road.status)})feature.setStyle(new Style({stroke: new Stroke({color: trafficColor[road.status],width: road.status blocked ? 8 : 5}),text: new Text({text: road.name,fill: new Fill({ color: #fff }),stroke: new Stroke({ color: #000, width: 3 }),font: 12px Microsoft YaHei,placement: line})}))source.addFeature(feature)})return new VectorLayer({ source, zIndex: 10 })}图层切换控制TypeScript123456789const handleLayerChange () {if (trafficLayer) trafficLayer.setVisible(layerChecked.value.includes(traffic))if (signalLayer) signalLayer.setVisible(layerChecked.value.includes(signal))if (cameraLayer) cameraLayer.setVisible(layerChecked.value.includes(camera))if (eventLayer) eventLayer.setVisible(layerChecked.value.includes(event))if (vehicleLayer) vehicleLayer.setVisible(layerChecked.value.includes(vehicle))if (hotspotLayer) hotspotLayer.setVisible(layerChecked.value.includes(hotspot))if (labelLayer) labelLayer.setVisible(layerChecked.value.includes(label))}点击交互详情面板TypeScriptmap.on(singleclick, (evt) {const feature map.forEachFeatureAtPixel(evt.pixel, (f) f)if (feature) {const type feature.get(featureType) || unknowndetailType.value typedetailData.value feature.getProperties()showDetailPanel.value true}})4.2 三维地图 —— Three.js三维地图基于Three.js实现采用俯视视角展示支持矢量/卫星图模式切换事件直接标注在地图上。场景初始化TypeScriptconst initScene () {if (!mapRef.value || !labelRef.value) returnscene new THREE.Scene()scene.background new THREE.Color(0x030508)scene.fog new THREE.FogExp2(0x030508, 0.003)// 俯视相机const width mapRef.value.clientWidthconst height mapRef.value.clientHeightcamera new THREE.PerspectiveCamera(50, width / height, 0.1, 1000)camera.position.set(0, 250, 0.1) // 正上方俯视camera.lookAt(0, 0, 0)// WebGL渲染器renderer new THREE.WebGLRenderer({ antialias: true })renderer.setSize(width, height)renderer.shadowMap.enabled truerenderer.toneMapping THREE.ACESFilmicToneMappingmapRef.value.appendChild(renderer.domElement)// CSS2D标签渲染器labelRenderer new CSS2DRenderer()labelRenderer.setSize(width, height)labelRenderer.domElement.style.position absolutelabelRenderer.domElement.style.pointerEvents nonelabelRef.value.appendChild(labelRenderer.domElement)// 轨道控制器controls new OrbitControls(camera, renderer.domElement)controls.enableDamping truecontrols.maxPolarAngle Math.PI / 2 // 限制俯视角度controls.target.set(0, 0, 0)}高德瓦片加载到Three.js三维模式下加载高德卫星瓦片拼贴为纹理贴到地面TypeScriptimport { MAP_CONFIG, AMAP_TILE_URLS } from ../config/mapimport { getTileXY, getTileUrl } from ../utils/mapUtilsconst loadAmapTiles async () {if (!realGround) returnconst zoom 12const centerTile getTileXY(MAP_CONFIG.CENTER_LON, MAP_CONFIG.CENTER_LAT, zoom)const tileCount 2const tileSize 256// 创建拼贴画布const tileCanvas document.createElement(canvas)tileCanvas.width tileSize * tileCounttileCanvas.height tileSize * tileCountconst tileCtx tileCanvas.getContext(2d)!// 逐个加载瓦片for (let dy 0; dy tileCount; dy) {for (let dx 0; dx tileCount; dx) {const tileX centerTile.x dx - 1const tileY centerTile.y dy - 1const url getTileUrl(AMAP_TILE_URLS.satellite, tileX, tileY, zoom)await new Promisevoid((resolve) {const img new Image()img.crossOrigin anonymousimg.onload () {tileCtx.drawImage(img, dx * tileSize, dy * tileSize, tileSize, tileSize)resolve()}img.onerror () resolve()img.src url})}}// 转为Three.js纹理const realTex new THREE.CanvasTexture(tileCanvas)realTex.wrapS THREE.ClampToEdgeWrappingrealTex.wrapT THREE.ClampToEdgeWrapping;(realGround.material as THREE.MeshStandardMaterial).map realTex;(realGround.material as THREE.MeshStandardMaterial).needsUpdate true}坐标转换工具TypeScript// src/utils/mapUtils.ts// 经纬度转瓦片坐标export function getTileXY(lon: number, lat: number, zoom: number) {const n Math.pow(2, zoom)const x Math.floor(((lon 180) / 360) * n)const y Math.floor(((1 - Math.log(Math.tan((lat * Math.PI) / 180) 1 / Math.cos((lat * Math.PI) / 180)) / Math.PI) / 2) * n)return { x, y }}// 生成瓦片URL支持子域名轮询export function getTileUrl(url: string, x: number, y: number, z: number): string {const subdomain [1, 2, 3, 4][Math.abs(x y) % 4]return url.replace({x}, x.toString()).replace({y}, y.toString()).replace({z}, z.toString()).replace({s}, subdomain)}事件平面标注事件标注采用平面圆形图标适合俯视视角TypeScriptconst createEvents () {const group new THREE.Group()const colorMap: Recordstring, number {danger: 0xff3333,warning: 0xffaa00,info: 0x00d4ff,}events.forEach(evt {// 内核圆const innerGeo new THREE.CircleGeometry(4, 32)const innerMat new THREE.MeshBasicMaterial({color: colorMap[evt.level],transparent: true,opacity: 0.9})const inner new THREE.Mesh(innerGeo, innerMat)inner.rotation.x -Math.PI / 2inner.position.set(evt.x, 0.1, evt.z)// 外圈脉冲环const outerGeo new THREE.RingGeometry(4, 6, 32)const outerMat new THREE.MeshBasicMaterial({color: colorMap[evt.level],transparent: true,opacity: 0.5,side: THREE.DoubleSide})const outer new THREE.Mesh(outerGeo, outerMat)outer.rotation.x -Math.PI / 2outer.position.set(evt.x, 0.15, evt.z)pulseRings.push(outer)// 中心白点const dotGeo new THREE.CircleGeometry(1.5, 16)const dotMat new THREE.MeshBasicMaterial({ color: 0xffffff })const dot new THREE.Mesh(dotGeo, dotMat)dot.rotation.x -Math.PI / 2dot.position.set(evt.x, 0.2, evt.z)// CSS2D标签const labelDiv document.createElement(div)labelDiv.textContent evt.namelabelDiv.style.cssText color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;padding: 4px 12px; background: rgba(0, 0, 0, 0.7);border: 1px solid ${evt.level danger ? #ff3333 : #ffaa00};border-radius: 6px;const label new CSS2DObject(labelDiv)label.position.set(evt.x, 0, evt.z)group.add(inner, outer, dot, label)})return group}动画循环TypeScriptconst animate () {animationId requestAnimationFrame(animate)time 0.016controls?.update()// 事件标注脉冲动画pulseRings.forEach((ring, i) {const scale 1 Math.sin(time * 3 i) * 0.15ring.scale.set(scale, scale, 1)const mat ring.material as THREE.MeshBasicMaterialmat.opacity 0.4 Math.sin(time * 3 i) * 0.2})renderer?.render(scene!, camera!)labelRenderer?.render(scene!, camera!)}4.3 智慧大屏 —— ECharts大屏页面整合ECharts图表和OpenLayers地图支持全屏展示TypeScript// 路网运行态势 - 多系列柱状图const trendChart echarts.init(trendRef.value)trendChart.setOption({tooltip: { trigger: axis },legend: {data: [今日车流量, 昨日车流量, 上周同期],textStyle: { color: rgba(255,255,255,0.8) }},xAxis: {type: category,data: [00时, 04时, 08时, 12时, 16时, 20时, 24时],axisLabel: { color: rgba(255,255,255,0.6) }},yAxis: { type: value, axisLabel: { color: rgba(255,255,255,0.6) } },series: [{ name: 今日车流量, type: bar, data: [320, 180, 850, 920, 780, 650, 420] },{ name: 昨日车流量, type: bar, data: [350, 200, 800, 880, 750, 680, 450] },{ name: 上周同期, type: line, data: [380, 220, 820, 900, 760, 700, 480] }]})4.4 全局主题深度定制对Element Plus组件进行深度样式覆盖使整体UI风格统一CSS/* 深色科技主题覆盖Element Plus */.el-menu {background: transparent;border-right: none;}.el-menu-item {color: rgba(255, 255, 255, 0.65);border-left: 2px solid transparent;transition: all 0.3s;}.el-menu-item.is-active {color: #00d4ff;background: linear-gradient(90deg, rgba(0, 212, 255, 0.15), transparent);border-left: 2px solid #00d4ff;}.el-button--primary {background: linear-gradient(135deg, #00d4ff, #0099cc);border: none;}/* 毛玻璃面板 */.el-card {background: rgba(10, 20, 40, 0.95);backdrop-filter: blur(16px);border: 1px solid rgba(0, 212, 255, 0.2);border-radius: 12px;}五、性能优化实践5.1 构建分包策略TypeScript// vite.config.tsexport default defineConfig({build: {rollupOptions: {output: {manualChunks: {vue: [vue, vue-router],echarts: [echarts],ol: [ol],}}}}})分包效果Chunk 大小 gzip后vue 106 KB 41 KBecharts 1036 KB 343 KBol 273 KB 79 KBMap3D 555 KB 141 KBindex 1086 KB 344 KB5.2 路由懒加载所有业务页面均采用动态import实现按需加载TypeScript{path: map-2d,name: Map2D,component: () import(../views/Map2D.vue)}5.3 3D地图性能优化按需加载瓦片仅在切换到卫星模式时才加载高德瓦片纹理尺寸控制瓦片拼贴画布使用合理尺寸避免内存溢出动画精简仅保留必要的脉冲动画移除冗余特效资源清理组件卸载时释放WebGL资源TypeScriptonUnmounted(() {window.removeEventListener(resize, handleResize)if (animationId) cancelAnimationFrame(animationId)controls?.dispose()renderer?.dispose()scene?.clear()})5.4 Element Plus按需导入TypeScript// vite.config.tsimport AutoImport from unplugin-auto-import/viteimport Components from unplugin-vue-components/viteimport { ElementPlusResolver } from unplugin-vue-components/resolversexport default defineConfig({plugins: [AutoImport({ resolvers: [ElementPlusResolver()] }),Components({ resolvers: [ElementPlusResolver()] }),vue()]})六、关键问题与解决方案6.1 内存溢出问题问题3D地图构建时出现 JavaScript heap out of memory原因纹理尺寸过大4096x4096、3D建筑模型过多导致文件体积过大解决方案Bash# 1. 增加Node内存限制set NODE_OPTIONS--max-old-space-size4096TypeScript// 2. 减小纹理尺寸const tileCanvas document.createElement(canvas)tileCanvas.width 512 // 原4096tileCanvas.height 512// 3. 按需加载仅切换到真实模式时才加载if (mode real !amapTilesLoaded) {loadAmapTiles()}// 4. 代码分割提取到composable// src/composables/useMap3D.tsexport function useMap3D(containerRef, labelRef) {// 封装3D地图初始化逻辑}6.2 瓦片跨域问题问题高德瓦片加载时canvas被污染无法导出纹理解决方案设置 crossOrigin anonymousTypeScriptconst img new Image()img.crossOrigin anonymous // 关键img.onload () {tileCtx.drawImage(img, dx * tileSize, dy * tileSize, tileSize, tileSize)resolve()}img.src url6.3 TypeScript类型错误问题img.onerror resolve 类型不匹配解决方案TypeScript// 错误写法img.onerror resolve// 正确写法img.onerror () resolve()七、项目亮点总结7.1 三引擎协同系统同时集成三种可视化引擎各司其职Plain Text┌─────────────────────────────────────────┐│ 智慧公路GIS平台 │├──────────┬──────────┬───────────────────┤│ OpenLayers│ Three.js │ ECharts ││ 2D地图 │ 3D地图 │ 数据大屏 ││ │ │ ││·瓦片底图 │·俯视渲染 │·统计图表 ││·矢量要素 │·事件标注 │·趋势分析 ││·交互选点 │·脉冲动画 │·预警展示 │└──────────┴──────────┴───────────────────┘7.2 双地图模式2D和3D地图均支持矢量/卫星双模式切换矢量模式自绘路网底图深色科技风格卫星模式高德卫星影像瓦片真实地理场景7.3 完整业务闭环覆盖公路管理全流程Plain Text综合态势 → 路网监测 → 资产管理 → 养护管理↓ ↓应急指挥 ← 交通规划 ← 运维管理 ← 数据管理7.4 科技感UI设计深色背景 青色主色调契合大屏场景毛玻璃面板 发光边框科技感十足CSS变量统一管理主题切换便捷响应式动画效果交互流畅自然八、总结本项目通过Vue3 TypeScript OpenLayers Three.js ECharts的技术组合实现了一个功能完整、可视化丰富的智慧公路GIS综合管理平台。核心经验技术选型要匹配场景2D地图用OpenLayers3D用Three.js图表用ECharts各取所长性能优化要前置分包策略、懒加载、按需渲染从一开始就要规划好主题设计要统一CSS变量 深度覆盖保证UI一致性类型安全很重要TypeScript在大型项目中能有效减少运行时错误写作声明本文为原创技术文章基于实际项目开发经验撰写。如需转载请注明出处。
Vue3 + Three.js + OpenLayers 智慧公路GIS综合管理平台实战
一、项目概述1.1 项目背景智慧公路管理是交通数字化转型的核心场景。传统公路管理系统往往功能分散、可视化手段单一难以满足一图统揽、全域感知的管理需求。本项目旨在构建一个集二维/三维地图、数据大屏、业务管理于一体的综合GIS平台为公路管理者提供全方位的决策支持。1.2 项目预览系统包含以下核心页面模块 技术栈 核心能力综合态势 ECharts OpenLayers KPI统计、路网监控、趋势分析二维地图 OpenLayers 矢量/卫星双模式、7图层管理、实时路况三维地图 Three.js 俯视视角、卫星影像底图、事件标注智慧大屏 ECharts 全屏可视化、实时预警、路网态势资产管理 OpenLayers 路线/桥梁/隧道可视化应急指挥 OpenLayers 应急事件、资源调度二、技术栈选型2.1 核心技术栈{框架: Vue 3.5 TypeScript 5.4,构建工具: Vite 5.4,UI组件库: Element Plus 2.14,状态管理: Pinia 3.0,路由: Vue Router 4.4 (Hash模式),2D地图: OpenLayers 10.9,3D地图: Three.js 0.185,图表库: ECharts 5.5,HTTP: Axios 1.18}2.2 选型理由为什么选Vue3 TypeScriptVue3的Composition API让逻辑复用更加灵活TypeScript提供类型安全特别适合大型GIS项目中海量数据结构的管理。比如地图要素的属性定义TypeScript// 交通事件数据结构interface TrafficEvent {id: stringtype: accident | congestion | construction | breakdownname: stringlon: numberlat: numberlevel: danger | warning | info}// 道路数据结构interface Road {id: stringname: stringstatus: smooth | slow | congested | blockedcoords: [number, number][]}为什么同时用OpenLayers和Three.js两者各有优势OpenLayers专业2D地图库瓦片加载、投影转换、矢量要素渲染成熟稳定Three.jsWebGL 3D引擎适合三维场景渲染、动画特效双引擎互补2D地图走OpenLayers3D可视化走Three.jsVite构建优化TypeScript// vite.config.ts 分包策略build: {rollupOptions: {output: {manualChunks: {vue: [vue, vue-router],echarts: [echarts],ol: [ol],}}}}三、系统架构设计3.1 目录结构src/├── components/ # 通用组件│ └── MapContainer.vue # 地图容器├── composables/ # 组合式函数│ └── useMap3D.ts # 3D地图逻辑封装├── config/ # 配置文件│ └── map.ts # 地图配置(高德瓦片URL等)├── data/ # 模拟数据│ └── mockData.ts # 路线/桥梁/隧道等业务数据├── layout/ # 布局组件│ └── MainLayout.vue # 主布局(侧边栏顶栏)├── router/ # 路由配置│ └── index.ts # 路由表登录守卫├── stores/ # Pinia状态│ └── user.ts # 用户登录态├── utils/ # 工具函数│ └── mapUtils.ts # 坐标转换/瓦片URL生成├── views/ # 14个页面组件│ ├── Login.vue # 登录│ ├── Dashboard.vue # 综合态势│ ├── Map2D.vue # 二维地图│ ├── Map3D.vue # 三维地图│ ├── BigScreen.vue # 智慧大屏│ ├── Emergency.vue # 应急指挥│ └── ... # 其他业务页面├── App.vue├── main.ts└── style.css # 全局主题3.2 路由设计路由采用Hash模式分为三组TypeScriptconst routes [// 1. 独立页面无需登录{ path: /login, component: Login },{ path: /bigscreen, component: BigScreen, meta: { public: true } },// 2. 主布局子路由需登录{path: /,component: MainLayout,redirect: /dashboard,children: [{ path: dashboard, component: () import(../views/Dashboard.vue) },{ path: map-2d, component: () import(../views/Map2D.vue) },{ path: map-3d, component: () import(../views/Map3D.vue) },// ... 12个业务子页面全部懒加载]}]// 3. 全局登录守卫router.beforeEach((to, from, next) {const userStore useUserStore()if (to.meta.public || userStore.isLogin) {next()} else {next(/login)}})3.3 主题设计采用科技感深色主题通过CSS变量统一管理CSS:root {/* 主色调 */--primary-color: #00d4ff; /* 青色 */--secondary-color: #7b68ee; /* 紫色 *//* 状态色 */--success-color: #00ff88;--warning-color: #ffaa00;--danger-color: #ff5566;/* 背景 */--bg-dark: #0a0e1a;--bg-card: rgba(10, 20, 40, 0.95);/* 边框 */--border-color: rgba(0, 212, 255, 0.2);/* 发光阴影 */--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);}配合毛玻璃效果backdrop-filter: blur(16px)和发光动画打造大屏科技感。四、核心功能实现4.1 二维地图 —— OpenLayers二维地图是系统的核心页面基于OpenLayers实现支持矢量/卫星双模式切换、7种图层管理、实时路况、事件标注等。瓦片底图加载TypeScriptconst createTrafficLayer () {const source new VectorSource()const trafficColor: Recordstring, string {smooth: #00ff88,slow: #ffaa00,congested: #ff5566,blocked: #990000}trafficRoads.forEach(road {const feature new Feature()feature.setGeometry(new LineString(road.coords.map(c fromLonLat(c))))feature.setProperties({featureType: road,name: road.name,status: road.status,speed: getSpeedByStatus(road.status),congestionIndex: getIndexByStatus(road.status)})feature.setStyle(new Style({stroke: new Stroke({color: trafficColor[road.status],width: road.status blocked ? 8 : 5}),text: new Text({text: road.name,fill: new Fill({ color: #fff }),stroke: new Stroke({ color: #000, width: 3 }),font: 12px Microsoft YaHei,placement: line})}))source.addFeature(feature)})return new VectorLayer({ source, zIndex: 10 })}图层切换控制TypeScript123456789const handleLayerChange () {if (trafficLayer) trafficLayer.setVisible(layerChecked.value.includes(traffic))if (signalLayer) signalLayer.setVisible(layerChecked.value.includes(signal))if (cameraLayer) cameraLayer.setVisible(layerChecked.value.includes(camera))if (eventLayer) eventLayer.setVisible(layerChecked.value.includes(event))if (vehicleLayer) vehicleLayer.setVisible(layerChecked.value.includes(vehicle))if (hotspotLayer) hotspotLayer.setVisible(layerChecked.value.includes(hotspot))if (labelLayer) labelLayer.setVisible(layerChecked.value.includes(label))}点击交互详情面板TypeScriptmap.on(singleclick, (evt) {const feature map.forEachFeatureAtPixel(evt.pixel, (f) f)if (feature) {const type feature.get(featureType) || unknowndetailType.value typedetailData.value feature.getProperties()showDetailPanel.value true}})4.2 三维地图 —— Three.js三维地图基于Three.js实现采用俯视视角展示支持矢量/卫星图模式切换事件直接标注在地图上。场景初始化TypeScriptconst initScene () {if (!mapRef.value || !labelRef.value) returnscene new THREE.Scene()scene.background new THREE.Color(0x030508)scene.fog new THREE.FogExp2(0x030508, 0.003)// 俯视相机const width mapRef.value.clientWidthconst height mapRef.value.clientHeightcamera new THREE.PerspectiveCamera(50, width / height, 0.1, 1000)camera.position.set(0, 250, 0.1) // 正上方俯视camera.lookAt(0, 0, 0)// WebGL渲染器renderer new THREE.WebGLRenderer({ antialias: true })renderer.setSize(width, height)renderer.shadowMap.enabled truerenderer.toneMapping THREE.ACESFilmicToneMappingmapRef.value.appendChild(renderer.domElement)// CSS2D标签渲染器labelRenderer new CSS2DRenderer()labelRenderer.setSize(width, height)labelRenderer.domElement.style.position absolutelabelRenderer.domElement.style.pointerEvents nonelabelRef.value.appendChild(labelRenderer.domElement)// 轨道控制器controls new OrbitControls(camera, renderer.domElement)controls.enableDamping truecontrols.maxPolarAngle Math.PI / 2 // 限制俯视角度controls.target.set(0, 0, 0)}高德瓦片加载到Three.js三维模式下加载高德卫星瓦片拼贴为纹理贴到地面TypeScriptimport { MAP_CONFIG, AMAP_TILE_URLS } from ../config/mapimport { getTileXY, getTileUrl } from ../utils/mapUtilsconst loadAmapTiles async () {if (!realGround) returnconst zoom 12const centerTile getTileXY(MAP_CONFIG.CENTER_LON, MAP_CONFIG.CENTER_LAT, zoom)const tileCount 2const tileSize 256// 创建拼贴画布const tileCanvas document.createElement(canvas)tileCanvas.width tileSize * tileCounttileCanvas.height tileSize * tileCountconst tileCtx tileCanvas.getContext(2d)!// 逐个加载瓦片for (let dy 0; dy tileCount; dy) {for (let dx 0; dx tileCount; dx) {const tileX centerTile.x dx - 1const tileY centerTile.y dy - 1const url getTileUrl(AMAP_TILE_URLS.satellite, tileX, tileY, zoom)await new Promisevoid((resolve) {const img new Image()img.crossOrigin anonymousimg.onload () {tileCtx.drawImage(img, dx * tileSize, dy * tileSize, tileSize, tileSize)resolve()}img.onerror () resolve()img.src url})}}// 转为Three.js纹理const realTex new THREE.CanvasTexture(tileCanvas)realTex.wrapS THREE.ClampToEdgeWrappingrealTex.wrapT THREE.ClampToEdgeWrapping;(realGround.material as THREE.MeshStandardMaterial).map realTex;(realGround.material as THREE.MeshStandardMaterial).needsUpdate true}坐标转换工具TypeScript// src/utils/mapUtils.ts// 经纬度转瓦片坐标export function getTileXY(lon: number, lat: number, zoom: number) {const n Math.pow(2, zoom)const x Math.floor(((lon 180) / 360) * n)const y Math.floor(((1 - Math.log(Math.tan((lat * Math.PI) / 180) 1 / Math.cos((lat * Math.PI) / 180)) / Math.PI) / 2) * n)return { x, y }}// 生成瓦片URL支持子域名轮询export function getTileUrl(url: string, x: number, y: number, z: number): string {const subdomain [1, 2, 3, 4][Math.abs(x y) % 4]return url.replace({x}, x.toString()).replace({y}, y.toString()).replace({z}, z.toString()).replace({s}, subdomain)}事件平面标注事件标注采用平面圆形图标适合俯视视角TypeScriptconst createEvents () {const group new THREE.Group()const colorMap: Recordstring, number {danger: 0xff3333,warning: 0xffaa00,info: 0x00d4ff,}events.forEach(evt {// 内核圆const innerGeo new THREE.CircleGeometry(4, 32)const innerMat new THREE.MeshBasicMaterial({color: colorMap[evt.level],transparent: true,opacity: 0.9})const inner new THREE.Mesh(innerGeo, innerMat)inner.rotation.x -Math.PI / 2inner.position.set(evt.x, 0.1, evt.z)// 外圈脉冲环const outerGeo new THREE.RingGeometry(4, 6, 32)const outerMat new THREE.MeshBasicMaterial({color: colorMap[evt.level],transparent: true,opacity: 0.5,side: THREE.DoubleSide})const outer new THREE.Mesh(outerGeo, outerMat)outer.rotation.x -Math.PI / 2outer.position.set(evt.x, 0.15, evt.z)pulseRings.push(outer)// 中心白点const dotGeo new THREE.CircleGeometry(1.5, 16)const dotMat new THREE.MeshBasicMaterial({ color: 0xffffff })const dot new THREE.Mesh(dotGeo, dotMat)dot.rotation.x -Math.PI / 2dot.position.set(evt.x, 0.2, evt.z)// CSS2D标签const labelDiv document.createElement(div)labelDiv.textContent evt.namelabelDiv.style.cssText color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;padding: 4px 12px; background: rgba(0, 0, 0, 0.7);border: 1px solid ${evt.level danger ? #ff3333 : #ffaa00};border-radius: 6px;const label new CSS2DObject(labelDiv)label.position.set(evt.x, 0, evt.z)group.add(inner, outer, dot, label)})return group}动画循环TypeScriptconst animate () {animationId requestAnimationFrame(animate)time 0.016controls?.update()// 事件标注脉冲动画pulseRings.forEach((ring, i) {const scale 1 Math.sin(time * 3 i) * 0.15ring.scale.set(scale, scale, 1)const mat ring.material as THREE.MeshBasicMaterialmat.opacity 0.4 Math.sin(time * 3 i) * 0.2})renderer?.render(scene!, camera!)labelRenderer?.render(scene!, camera!)}4.3 智慧大屏 —— ECharts大屏页面整合ECharts图表和OpenLayers地图支持全屏展示TypeScript// 路网运行态势 - 多系列柱状图const trendChart echarts.init(trendRef.value)trendChart.setOption({tooltip: { trigger: axis },legend: {data: [今日车流量, 昨日车流量, 上周同期],textStyle: { color: rgba(255,255,255,0.8) }},xAxis: {type: category,data: [00时, 04时, 08时, 12时, 16时, 20时, 24时],axisLabel: { color: rgba(255,255,255,0.6) }},yAxis: { type: value, axisLabel: { color: rgba(255,255,255,0.6) } },series: [{ name: 今日车流量, type: bar, data: [320, 180, 850, 920, 780, 650, 420] },{ name: 昨日车流量, type: bar, data: [350, 200, 800, 880, 750, 680, 450] },{ name: 上周同期, type: line, data: [380, 220, 820, 900, 760, 700, 480] }]})4.4 全局主题深度定制对Element Plus组件进行深度样式覆盖使整体UI风格统一CSS/* 深色科技主题覆盖Element Plus */.el-menu {background: transparent;border-right: none;}.el-menu-item {color: rgba(255, 255, 255, 0.65);border-left: 2px solid transparent;transition: all 0.3s;}.el-menu-item.is-active {color: #00d4ff;background: linear-gradient(90deg, rgba(0, 212, 255, 0.15), transparent);border-left: 2px solid #00d4ff;}.el-button--primary {background: linear-gradient(135deg, #00d4ff, #0099cc);border: none;}/* 毛玻璃面板 */.el-card {background: rgba(10, 20, 40, 0.95);backdrop-filter: blur(16px);border: 1px solid rgba(0, 212, 255, 0.2);border-radius: 12px;}五、性能优化实践5.1 构建分包策略TypeScript// vite.config.tsexport default defineConfig({build: {rollupOptions: {output: {manualChunks: {vue: [vue, vue-router],echarts: [echarts],ol: [ol],}}}}})分包效果Chunk 大小 gzip后vue 106 KB 41 KBecharts 1036 KB 343 KBol 273 KB 79 KBMap3D 555 KB 141 KBindex 1086 KB 344 KB5.2 路由懒加载所有业务页面均采用动态import实现按需加载TypeScript{path: map-2d,name: Map2D,component: () import(../views/Map2D.vue)}5.3 3D地图性能优化按需加载瓦片仅在切换到卫星模式时才加载高德瓦片纹理尺寸控制瓦片拼贴画布使用合理尺寸避免内存溢出动画精简仅保留必要的脉冲动画移除冗余特效资源清理组件卸载时释放WebGL资源TypeScriptonUnmounted(() {window.removeEventListener(resize, handleResize)if (animationId) cancelAnimationFrame(animationId)controls?.dispose()renderer?.dispose()scene?.clear()})5.4 Element Plus按需导入TypeScript// vite.config.tsimport AutoImport from unplugin-auto-import/viteimport Components from unplugin-vue-components/viteimport { ElementPlusResolver } from unplugin-vue-components/resolversexport default defineConfig({plugins: [AutoImport({ resolvers: [ElementPlusResolver()] }),Components({ resolvers: [ElementPlusResolver()] }),vue()]})六、关键问题与解决方案6.1 内存溢出问题问题3D地图构建时出现 JavaScript heap out of memory原因纹理尺寸过大4096x4096、3D建筑模型过多导致文件体积过大解决方案Bash# 1. 增加Node内存限制set NODE_OPTIONS--max-old-space-size4096TypeScript// 2. 减小纹理尺寸const tileCanvas document.createElement(canvas)tileCanvas.width 512 // 原4096tileCanvas.height 512// 3. 按需加载仅切换到真实模式时才加载if (mode real !amapTilesLoaded) {loadAmapTiles()}// 4. 代码分割提取到composable// src/composables/useMap3D.tsexport function useMap3D(containerRef, labelRef) {// 封装3D地图初始化逻辑}6.2 瓦片跨域问题问题高德瓦片加载时canvas被污染无法导出纹理解决方案设置 crossOrigin anonymousTypeScriptconst img new Image()img.crossOrigin anonymous // 关键img.onload () {tileCtx.drawImage(img, dx * tileSize, dy * tileSize, tileSize, tileSize)resolve()}img.src url6.3 TypeScript类型错误问题img.onerror resolve 类型不匹配解决方案TypeScript// 错误写法img.onerror resolve// 正确写法img.onerror () resolve()七、项目亮点总结7.1 三引擎协同系统同时集成三种可视化引擎各司其职Plain Text┌─────────────────────────────────────────┐│ 智慧公路GIS平台 │├──────────┬──────────┬───────────────────┤│ OpenLayers│ Three.js │ ECharts ││ 2D地图 │ 3D地图 │ 数据大屏 ││ │ │ ││·瓦片底图 │·俯视渲染 │·统计图表 ││·矢量要素 │·事件标注 │·趋势分析 ││·交互选点 │·脉冲动画 │·预警展示 │└──────────┴──────────┴───────────────────┘7.2 双地图模式2D和3D地图均支持矢量/卫星双模式切换矢量模式自绘路网底图深色科技风格卫星模式高德卫星影像瓦片真实地理场景7.3 完整业务闭环覆盖公路管理全流程Plain Text综合态势 → 路网监测 → 资产管理 → 养护管理↓ ↓应急指挥 ← 交通规划 ← 运维管理 ← 数据管理7.4 科技感UI设计深色背景 青色主色调契合大屏场景毛玻璃面板 发光边框科技感十足CSS变量统一管理主题切换便捷响应式动画效果交互流畅自然八、总结本项目通过Vue3 TypeScript OpenLayers Three.js ECharts的技术组合实现了一个功能完整、可视化丰富的智慧公路GIS综合管理平台。核心经验技术选型要匹配场景2D地图用OpenLayers3D用Three.js图表用ECharts各取所长性能优化要前置分包策略、懒加载、按需渲染从一开始就要规划好主题设计要统一CSS变量 深度覆盖保证UI一致性类型安全很重要TypeScript在大型项目中能有效减少运行时错误写作声明本文为原创技术文章基于实际项目开发经验撰写。如需转载请注明出处。
