Cesium实现限高设计

最新推荐文章于 2025-03-29 13:34:27 发布

小火车况且况且

最新推荐文章于 2025-03-29 13:34:27 发布

阅读量1.4k

点赞数 2

分类专栏： Cesium 文章标签：前端

本文链接：https://blog.csdn.net/weixin_43972992/article/details/127535846

版权

Cesium 专栏收录该内容

4 篇文章

订阅专栏

`Cesium`实现限高设计

在这里插入图片描述

请添加图片描述

主要使用的API

ClassificationPrimitive
GeometryInstance
PolygonGeometry

使用

直接上代码

const {
  Cartesian3,
  GeometryInstance,
  PolygonGeometry,
  PolygonHierarchy,
  ColorGeometryInstanceAttribute,
  Color,
  ClassificationPrimitive,
  ClassificationType,
  Cartographic,
  Matrix4,
  ShowGeometryInstanceAttribute
} = window.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,
      }
    })
  }
}

setPolygon方法不使用的效果图如下
在这里插入图片描述

使用

new HeightLimit({
  viewer: this.viewer,
  data: [
    113.060458, 22.670675, 113.070458, 22.650675, 113.080458, 22.700675,
    113.020458, 22.500675
  ],
  style: {
    color: 'pink',
    alpha: 0.5,
    height: 120
  }
})
// 需要生成 倾斜摄影数据
function set3Dtitle3(){}

倾斜摄影可以参考这个大佬的文章