ArcGIS API for JavaScript 实现三维分层建筑可视化：从数据准备到性能优化

1次阅读

共计 3362 个字符，预计需要花费 9 分钟才能阅读完成。

三维分层建筑可视化在城市规划、应急管理等领域有着广泛的应用。通过将建筑按高度、功能等进行分层展示，可以帮助规划师更直观地分析城市空间结构，评估建筑密度和容积率。在应急管理中，分层可视化可以快速定位高风险区域，辅助制定疏散路线和救援方案。

ArcGIS JS API：
优势：内置地理空间数据处理能力，支持多种坐标系，与 ArcGIS 平台无缝集成，提供丰富的三维符号系统
劣势：相对封闭的生态系统，高级定制能力有限
Cesium：
优势：强大的全球地形支持，开源社区活跃，适用于大规模场景
劣势：学习曲线较陡，需要额外处理地理数据
Three.js：
优势：完全自由的可视化控制，适合高度定制的 3D 效果
劣势：缺乏地理空间计算能力，需要自行实现坐标系转换

GeoJSON 是存储建筑数据的理想格式，建议包含以下属性字段：

{
  "type": "Feature",
  "properties": {
    "id": "唯一标识符",
    "height": "建筑总高度",
    "floors": "楼层数",
    "usage": "建筑用途",
    "baseHeight": "基础高度"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": "建筑轮廓坐标"
  }
}

SceneView 是 ArcGIS JS API 中负责 3D 场景渲染的核心组件。初始化时需要特别注意相机参数设置：

const view = new SceneView({
  container: "viewDiv",
  map: new Map({
    basemap: "streets-night-vector",
    ground: "world-elevation"
  }),
  camera: {
    position: {
      x: 经度,
      y: 纬度,
      z: 1500 // 初始高度
    },
    tilt: 65, // 倾斜角度
    heading: 0 // 朝向
  },
  qualityProfile: "high",
  environment: {
    atmosphere: {quality: "high"},
    lighting: {directShadowsEnabled: true}
  }
});

ExtrudeSymbol3DLayer 用于将 2D 多边形拉伸为 3D 体块，关键配置如下：

const renderer = new SimpleRenderer({
  symbol: new PolygonSymbol3D({
    symbolLayers: [new ExtrudeSymbol3DLayer({
      material: {
        color: "#ffffff",
        colorMixMode: "replace"
      },
      edges: {
        type: "solid",
        color: [50, 50, 50, 0.5]
      },
      size: 1 // 拉伸比例
    })]
  }),
  visualVariables: [{
    type: "color",
    field: "usage",
    stops: [{ value: "residential", color: "#4CAF50"},
      {value: "commercial", color: "#2196F3"},
      {value: "industrial", color: "#FF5722"}
    ]
  }, {
    type: "size",
    field: "height",
    stops: [{ value: 10, size: 10},
      {value: 50, size: 50},
      {value: 100, size: 100}
    ]
  }]
});

// 数据预处理函数：CSV 转 GeoJSON
function csvToGeoJSON(csvData) {
  const features = csvData.map(row => ({
    type: "Feature",
    properties: {
      id: row.id,
      height: parseFloat(row.height),
      floors: parseInt(row.floors),
      usage: row.usage,
      baseHeight: parseFloat(row.baseHeight)
    },
    geometry: {
      type: "Polygon",
      coordinates: JSON.parse(row.coordinates)
    }
  }));

  return {
    type: "FeatureCollection",
    features: features
  };
}

// 主函数
async function init3DBuildings() {
  // 加载 CSV 数据
  const response = await fetch("buildings.csv");
  const csvText = await response.text();
  const csvData = parseCSV(csvText);

  // 转换为 GeoJSON
  const geoJSON = csvToGeoJSON(csvData);

  // 创建图形图层
  const graphics = geoJSON.features.map(feature => {
    return new Graphic({geometry: new Polygon(feature.geometry),
      attributes: feature.properties
    });
  });

  // 创建 3D 建筑图层
  const buildingsLayer = new GraphicsLayer({
    renderer: renderer,
    elevationInfo: {
      mode: "relative-to-ground",
      offset: 0
    }
  });

  // 添加到地图
  view.map.add(buildingsLayer);
  buildingsLayer.addMany(graphics);
}

对于大规模建筑数据，应根据视距设置不同的细节级别：

buildingsLayer.lod = {
  level: 0,
  levelValue: 500, // 500 米以下显示完整细节
  level1: {
    levelValue: 1000,
    screenSize: 128,
    renderer: simplifiedRenderer
  },
  level2: {
    levelValue: 2000,
    screenSize: 64,
    renderer: minimalRenderer
  }
};

合并相同材质的建筑几何体
使用 instanced rendering 技术
限制每帧绘制的三角形数量

// 定期检查内存使用情况
setInterval(() => {
  const memory = window.performance.memory;
  console.log(`JS heap size: ${memory.usedJSHeapSize / 1024 / 1024} MB`);
  if (memory.usedJSHeapSize > 0.7 * memory.jsHeapSizeLimit) {console.warn("Memory usage approaching limit!");
  }
}, 10000);

确保所有数据使用相同的坐标系（建议 WGS84 Web Mercator）
高度值单位统一（米或英尺）
注意 GeoJSON 坐标顺序是 [经度, 纬度]

view.on("pointer-move", event => {if (event.pointerType === "touch") {
    // 降低移动端交互灵敏度
    const factor = 0.5;
    event.stopPropagation();
    // 自定义处理逻辑
  }
});