iClient3D for Cesium 实现限高分析

作者：gaogy

1、背景

随着地理信息技术的发展，三维地球技术逐渐成为了许多领域中的核心工具，尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据，提供更高效的决策支持。

iClient3D for Cesium 是由 SuperMap 提供的一款开发工具，旨在将三维地理信息系统 (3D GIS) 技术应用于大规模的地理信息可视化与分析，帮助开发者通过 Web 平台展示三维地图，还提供了强大的数据分析功能，包括对建筑物、地形、设施等的空间分析。

限高分析是地理信息系统中的一种常见分析需求，特别是在城市规划与建筑设计中，限高分析能够帮助规划人员确保建筑物在设计过程中不会超过法规规定的高度限制，并避免与其他建筑物或设施发生冲突。通过限高分析，开发者可以根据地形、建筑物高度等条件，动态计算和展示特定区域内的限高区域。

本文将利用 iClient3D for Cesium 实现三维场景下得限高分析功能，帮助用户在三维地图中直观地分析和展示限高区域，从而在建筑设计和城市规划过程中提供有效的决策依据。

2、限高分析效果演示

iClient3D for Cesium 实现限高分析

3、实现过程

3.1、项目环境

本文采用Vite6 + Vue3.5 + iClient3D for Cesium(2024) 框架实现，项目具体使用依赖如下：

json 复制代码

{
  "vue": "^3.5.13",
  "element-plus": "^2.9.1",
  "vite": "^6.0.1"
}

3.2、初始化三维场景

js 复制代码

function initViewer() {
  window.viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false })
  viewer.scene.addS3MTilesLayerByScp(
    'http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config',
    { name: 's3mLayer' }
  )
  viewer.scene.camera.setView({
    destination: new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
    orientation: {
      heading: 4.39611370540786,
      pitch: -0.43458664812464143,
      roll: 2.0174972803488345e-11
    }
  })
}

3.3、利用iServer Data 服务查询，并绘制 Entity 面

js 复制代码

async function queryByGeometry(queryGeometry) {
  const queryObj = {
    getFeatureMode: 'SPATIAL',
    spatialQueryMode: 'CONTAIN',
    datasetNames: ['铁岭矢量面:New_Region3D_1'],
    hasGeometry: true,
    geometry: { points: queryGeometry, type: 'REGION' }
  }
  try {
    const response = await fetch(
      'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.geojson?returnContent=true',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(queryObj)
      }
    )
    const data = await response.json()
    data.features.forEach((feature) => {
      if (feature.geometry.type === 'Polygon') {
        const lonLatArr = []
        feature.geometry.coordinates[0].forEach((coord) => lonLatArr.push(...coord))
        const entity = viewer.entities.add({
          id: `identify-area-${feature.id || Date.now()}`,
          name: '单体化标识面',
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
            material: new Cesium.Color(1.0, 0.0, 0.0, 0.6),
            classificationType: Cesium.ClassificationType.S3M_TILE, // 贴在 S3M 模型表面
            groundBottomAltitude: height.value,
            groundExtrudedHeight: 500
          },
          info: feature.properties
        })
        entities.push(entity)
      }
    })
  } catch (error) {
    throw new error(error.message)
  }
}

3.4、使用 Cesium 的 DrawHandler 绘制限高分析区域

js 复制代码

const handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon)
handlerPolygon.drawEvt.addEventListener((result) => {
  handlerPolygon.polygon.show = false
  handlerPolygon.polyline.show = false
  const positions = result.object.positions
  const geometries = []
  let minLongitude = Infinity
  let maxLongitude = -Infinity
  let minLatitude = Infinity
  let maxLatitude = -Infinity
  positions.forEach((position) => {
    const cartographic = Cesium.Cartographic.fromCartesian(position)
    const longitude = Cesium.Math.toDegrees(cartographic.longitude)
    const latitude = Cesium.Math.toDegrees(cartographic.latitude)
    minLongitude = Math.min(minLongitude, longitude)
    maxLongitude = Math.max(maxLongitude, longitude)
    minLatitude = Math.min(minLatitude, latitude)
    maxLatitude = Math.max(maxLatitude, latitude)
  })
  const rectangle = Cesium.Rectangle.fromDegrees(minLongitude, minLatitude, maxLongitude, maxLatitude)
  const southWest = { x: minLongitude, y: minLatitude }
  const southEast = { x: maxLongitude, y: minLatitude }
  const northEast = { x: maxLongitude, y: maxLatitude }
  const northWest = { x: minLongitude, y: maxLatitude }
  geometries.push(southWest, southEast, northEast, northWest)
  entity = viewer.entities.add({
    rectangle: {
      coordinates: rectangle,
      height: height.value,
      material: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
      outline: true,
      outlineColor: Cesium.Color.RED
    }
  })
  queryByGeometry(geometries)
})

注意，这里是根据绘制的几何面的外接矩形作为限高分析的范围区域，如有其他需要可自行更改分析区域

3.5、动态调整限高高度

js 复制代码

function changeHeight() {
  if (entity) entity.rectangle.height = height.value
  for (const entity of entities) {
    if (entity) entity.polygon.groundBottomAltitude = height.value
  }
}

height 为 vue 的 ref 对象，利用 vue 双向绑定指令可实现动态修改分析范围面的高度；而分析结果的楼栋 entity 对象，则可以通过修改其 groundBottomAltitude 属性，动态修改其高度，实现限高分析。

3.6、点击分析结果展示属性信息

js 复制代码

const pickHandler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
pickHandler.setInputAction((event) => {
  const feature = window.viewer.scene.pick(event.position)
  if (Cesium.defined(feature)) {
    if (Object.prototype.hasOwnProperty.call(feature, 'id') && feature.id instanceof Cesium.Entity) {
      if (feature.id._id.startsWith('identify-area')) {
        const entity = viewer.entities.getById(feature.id._id)
        tableData.value = Object.keys(entity.info).map((key) => {
          return { name: key, info: entity.info[key] }
        })
        showInfo.value = true
      }
    }
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

4、总结

本文借鉴SuperMap iClientD for Cesium官网的动态单体化示例(support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#dynamicDTH)，通过修改entity 的 groundBottomAltitude 属性，动态修改其高度，实现限高分析，能够动态的展示超过限高高度的具体楼栋，并能展示其属性信息，从而在建筑设计和城市规划过程中为决策者提供有效的决策依据。

本文完整Vue代码可在https://download.csdn.net/download/supermapsupport/90151388下载参考