27.cesuim分析之限高分析

最新推荐文章于 2025-05-28 06:39:31 发布

紫雪giser

最新推荐文章于 2025-05-28 06:39:31 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

分类专栏： gis开发学习文章标签： arcgis 3d

本文链接：https://blog.youkuaiyun.com/yaojindou0/article/details/134140250

gis开发学习专栏收录该内容

32 篇文章

订阅专栏

文章展示了如何在Cesium中使用HeightLimit类创建一个可穿透的高亮区域，用于地图上的建筑物高度限制，提供定制颜色和透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

前端代码

HeightLimit实体类

const {
    Cartesian3,
    GeometryInstance,
    PolygonGeometry,
    PolygonHierarchy,
    ColorGeometryInstanceAttribute,
    Color,
    ClassificationPrimitive,
    ClassificationType,
    Cartographic,
    Matrix4,
    ShowGeometryInstanceAttribute
  } = Cesium
  
  const handleColor = (color, alpha)=> {
    return Color.fromCssColorString(color).withAlpha(alpha || 1)
  }
  
  export default class HeightLimit {
    limitHeightPrimitive = null
    constructor({ viewer, data, style = {} }) {
      this.viewer = viewer
      this.data = data
      this.style = style
      this.addPrimitive()
    }
    addPrimitive() {
      let { height = 0, color = 'pink', alpha } = this.style
      color = handleColor(color, alpha)
      const limitHeightPrimitive = this.viewer.scene.primitives.add(
          /**
          https://cesium.com/learn/cesiumjs/ref-doc/ClassificationPrimitive.html?classFilter=ClassificationPrimitive
          ClassificationPrimitive 用来生成可以穿透
          */
        new ClassificationPrimitive({
          geometryInstances: new GeometryInstance({
            geometry: new PolygonGeometry({
              polygonHierarchy: new PolygonHierarchy(
                Cartesian3.fromDegreesArray(this.data)
              ),
              height,
              extrudedHeight: height + 3000
            }),
            attributes: {
              color: ColorGeometryInstanceAttribute.fromColor(color),
              show: new ShowGeometryInstanceAttribute(true)
            }
          }),
          releaseGeometryInstances: false,
          /**
          https://cesium.com/learn/cesiumjs/ref-doc/global.html#ClassificationType
          只有 3D Tiles 会被分类
           */
          classificationType: ClassificationType.CESIUM_3D_TILE
        })
      )
      limitHeightPrimitive.readyPromise.then(() => {
      })
  
      // 这里主要是为了添加一个高出地面的 polygon , 用到的经纬度数据和需要校验的建筑物数据一样
      this.setPolygon(height, alpha )
    }
    // 这里主要是为了添加一个高出地面的 polygon , 用到的经纬度数据和需要校验的建筑物数据一样
    setPolygon(height, alpha ) {
      this.viewer.entities.add({
        polygon: {
          hierarchy: new PolygonHierarchy(
            Cartesian3.fromDegreesArray(this.data)
          ),
          material: Color.fromCssColorString('#FFF8DC').withAlpha(alpha || 1),
          height,
          perPositionHeight: false,
        }
      })
    }
  }

调用

 new HeightLimit({
            viewer: viewer,
            data: [
                108.9371687725441,34.20162482945407,

                108.9671687725441,34.20162482945407,
                108.9671687725441,34.24162482945407,
                108.931687725441,34.24162482945407,

                108.9371687725441,34.20162482945407
            ],
            style: {
              color: 'pink',
              alpha: 0.5,
              height: 410
            }
          })