Vue3 + Cesium 前端加载省级建筑物切片白模教程

相关连接；

1、【从省级PBF建筑数据到地图白模：一键生成 GeoJSON 并切片】

2、【从OSM到Cesium 建筑白模—省级建筑数据GeoJSON切片的实操指南（Windows版）】

本文详细介绍如何使用已经切片好的省级建筑物数据，在前端 **Vue3 + Cesium** 项目中动态加载建筑物白模（灰白色 3D 模型），并实现 **按相机视野动态加载/卸载网格** 的优化效果。  

基于已经验证过的 `<BuildingWhiteModel>` 组件。

1. 组件功能概览

<BuildingWhiteModel>` 是一个逻辑组件，不渲染任何 DOM，它的核心功能包括：

1.1 动态加载建筑物网格     根据当前相机视野动态加载对应网格的 GeoJSON 数据     支持最大并发加载数，防止阻塞渲染  

1.2. 建筑物白模样式渲染      – 高度拉伸 (`extrudedHeight`)      – 灰白色填充，半透明显示      – 边线显示，禁用深度测试确保显示在最上层  

1.3.动态卸载网格    – 自动卸载视野外网格      – 超出 `maxLoadedGrids` 时优先卸载最早加载网格      – 节约内存和 GPU 渲染开销  

1.4. 显示/隐藏控制      – `enabled` 属性可以全局控制白模显示或隐藏  

1.5. 事件监听与调度     – 监听相机移动结束事件 (`camera.moveEnd`)      – 使用防抖机制延迟加载/卸载，避免频繁操作  

2. 数据准备

假设已有的建筑物数据切片目录结构如下：参考文档【从省级PBF建筑数据到地图白模：一键生成 GeoJSON 并切片】

buildings_by_region/ ├─ index.json # 网格索引文件 ├─ 0_0.geojson # 网格 0_0 ├─ 0_1.geojson ├─ 1_0.geojson ├─ … – 每个 GeoJSON 文件包含建筑物坐标和属性信息。 – 每个建筑物属性中需包含 `height_computed`（计算后的建筑高度），用于生成 3D 白模。

 3. 组件 Props 说明

| 参数 | 类型 | 默认值 | 功能 | |——|——|——–|——| | `viewer` | Object | 必填 | Cesium Viewer 实例 | | `indexUrl` | String | buildingIndexUrl | 网格索引 JSON 文件路径 | | `maxLoadedGrids` | Number | 10 | 最大同时加载网格数 | | `enabled` | Boolean | true | 控制建筑白模显示/隐藏 |

 4. 组件使用示例

“`vue
<template>
<div id=\”map\” style=\”width:100%;height:100%\”>
<BuildingWhiteModel
v-if=\”viewer\”
:viewer=\”viewer\”
:index-url=\”buildingIndexUrl\”
:max-loaded-grids=\”10\”
:enabled=\”buildingEnabled\”
/>
</div>

<button @click=\”buildingEnabled = !buildingEnabled\”>
切换建筑白模显示
</button>
</template>

<script setup>
import { ref, onMounted } from \’vue\’
import { Viewer } from \’cesium\’
import BuildingWhiteModel from \’@/components/BuildingWhiteModel.vue\’
import buildingIndexUrl from \’@/assets/buildings/buildings_by_region/index.json?url&no-inline\’

const viewer = ref(null)
const buildingEnabled = ref(true)

onMounted(() => {
viewer.value = new Viewer(\’map\’, {
terrainProvider: null,
animation: false,
timeline: false,
baseLayerPicker: false,
})
})
</script>

说明：

• viewer 必须传入 Cesium Viewer 实例。

• indexUrl 指向切片索引文件，组件会根据索引动态加载网格。

• buildingEnabled 控制建筑物白模显示/隐藏。

5. 内部加载逻辑详解

5.1 视野计算

组件通过 getViewRectangle() 计算当前相机视野范围（经纬度四至）：

• 从屏幕各关键点（四角+垂直采样）生成射线

• 转换为地理坐标

• 计算最小/最大经纬度，作为当前视野范围

5.2 动态加载网格

加载网格的主要函数 loadBuildingGrid(grid)：

5.3 样式设置

functi