三维 GIS 平台架构与实现：从数据引擎到 Web 可视化

-- PostgreSQL 中创建三维几何列（含高度）
CREATE TABLE buildings (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    geom GEOMETRY(POLYGON, 4326),      -- 底面 footprint
    height FLOAT,                      -- 建筑高度（米）
    roof_type VARCHAR(20)
);

-- 创建空间索引加速查询
CREATE INDEX idx_buildings_geom ON buildings USING GIST(geom);

-- 生成 3D Tiles 属性信息（将几何和高度组合为三维体）
WITH tile_data AS (
    SELECT 
        id,
        name,
        ST_AsMVTGeom(
            ST_Extrude(ST_Force3D(geom), 0, 0, height),   -- 挤出为三维体
            ST_MakeEnvelope(116.3, 39.8, 116.5, 40.0, 4326)
        ) AS geom,
        height
    FROM buildings
)
SELECT ST_AsMVT(tile_data, 'buildings') FROM tile_data;

// 初始化 Cesium Viewer（带自定义配置）
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain({
        requestWaterMask: false,
        requestVertexNormals: false
    }),
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    }),
    baseLayerPicker: false,
    animation: false,          // 关闭动画控件
    timeline: false,           // 关闭时间轴
    infoBox: false,            // 关闭默认信息框
    sceneModePicker: false,
    selectionIndicator: false,
    // 性能相关
    targetFrameRate: 60,
    resolutionScale: window.devicePixelRatio > 1 ? 0.8 : 1.0
});

// 自定义相机视角（俯仰角、范围）
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.391, 39.913, 5000),
    orientation: {
        pitch: Cesium.Math.toRadians(-35),
        roll: 0.0
    },
    duration: 2.0,
    complete: () => console.log('Camera reached target')
});

// 加载 3D Tiles 建筑数据
const tileset = new Cesium.Cesium3DTileset({
    url: 'https://cdn.my-gis.com/tilesets/buildings/tileset.json',
    maximumScreenSpaceError: 4,        // 控制 LOD 切换敏感度
    maximumNumberOfLoadedTiles: 500,
    dynamicScreenSpaceError: true,
    dynamicScreenSpaceErrorDensity: 0.5
});
viewer.scene.primitives.add(tileset);

const express = require('express');
const turf = require('@turf/turf');
const app = express();

// 缓冲区分析 API
app.post('/api/buffer', (req, res) => {
    const { lng, lat, radius } = req.body;
    const point = turf.point([lng, lat]);
    const buffered = turf.buffer(point, radius, { units: 'meters' });
    res.json(buffered);
});

// 视域分析（模拟）
app.post('/api/viewshed', (req, res) => {
    const { observer, targets } = req.body;  // observer: {lng, lat, height}
    const result = targets.map(target => {
        // 模拟视线遮挡（实际需结合 DEM 数据）
        const distance = turf.distance(
            turf.point([observer.lng, observer.lat]),
            turf.point([target.lng, target.lat])
        );
        return { target, visible: distance < 2000 };
    });
    res.json(result);
});

// 用户点击地图，触发缓冲区分析
viewer.screenSpaceEventHandler.setInputAction((click) => {
    const cartesian = viewer.camera.pickEllipsoid(click.position);
    if (cartesian) {
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        const lng = Cesium.Math.toDegrees(cartographic.longitude);
        const lat = Cesium.Math.toDegrees(cartographic.latitude);
        // 调用分析 API
        fetch('/api/buffer', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ lng, lat, radius: 500 })
        })
        .then(res => res.json())
        .then(geojson => {
            // 将 GeoJSON 渲染为 Cesium 多边形
            const entity = viewer.entities.add({
                polygon: {
                    hierarchy: geojson.geometry.coordinates[0].map(coord => 
                        Cesium.Cartesian3.fromDegrees(coord[0], coord[1])
                    ),
                    material: Cesium.Color.RED.withAlpha(0.3),
                    outline: true,
                    outlineColor: Cesium.Color.RED
                }
            });
        });
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);