Cesium贴地设置

Cesium贴地设置

1.primitive贴地线

Cesium对primitive线有专门的GroundPolylinePrimitive贴地线primitive和GroundPolylineGeometry贴地线几何

viewer.scene.primitives.add(
new Cesium.GroundPolylinePrimitive({//贴地primitive线
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({//贴地线几何
          positions:Cesium.Cartesian3.fromDegreesArray([90, 28, 100, 28])
        })
      }),
      appearance: new Cesium.PolylineMaterialAppearance({
        material: Cesium.Material.fromType('Color', {
          color: Cesium.Color.RED
        })
      }）
    })
    )

2.CircleGeometry，CorridorGeometry，EllipseGeometry，PolygonGeometry，和RectangleGeometry设置贴地，Cesium提供GroundPrimitive类，实现对以上几何图形设置贴地，对于立体几何图形不支持贴地

var primitive = new Cesium.GroundPrimitive({//贴地的primitive
        geometryInstances: new Cesium.GeometryInstance({
          geometry: new Cesium.PolygonGeometry({//支持CircleGeometry，CorridorGeometry，EllipseGeometry，RectangleGeometry
            polygonHierarchy: new Cesium.PolygonHierarchy([
              Cesium.Cartesian3.fromDegreesArray(100，25，100，30，110，30)
            ])
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
          }
        }),
        appearance: new Cesium.PerInstanceColorAppearance()
      })
viewer.scene.primitives.add(primitive)

3.PointPrimitive设置贴地

在没有地形的情况下设置笛卡尔的高度为0就是贴地，有地形就需要使用到Cesium提供的sampleTerrainMostDetailed方法实现点位置添加高程实现贴地，

var cartesian=Cesium.Cartesian3.fromDegrees(100,20)//这里没设置点的高度，也可以设置高度，但不知道该位置的高程，所以需要使用sampleTerrainMostDetailed方法在地形加载出来后，将该点位置赋予高程
	var points = window.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection())
	var ellipsoid = window.viewer.scene.globe.ellipsoid
	let p = ellipsoid.cartesianToCartographic(cartesian)
          let promise = Cesium.sampleTerrainMostDetailed(window.viewer.terrainProvider, [p])
          Cesium.when(promise, function() {
            points.add({
              position: Cesium.Cartographic.toCartesian(p),
              color: Cesium.Color.WHITE,
              pixelSize: 10
            })
          })

4.Entity实体设置贴地

大部分entity有HeightReference高度参考属性，设置为CLAMP_TO_GROUND贴地类型可设置贴地

window.viewer.entities.add({
            polygon: {//box，ellipse，cylinder.......
              hierarchy: Cesium.Cartesian3.fromDegreesArray(100，25，100，30，110，30)，
              material: Cesium.Color.GREEN,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND//设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
            }
          })

5.model模型设置贴地

用Entity的加载方式添加模型同上只要叫上高度参考就好，如果用primitive的方式加载模型，则同点原语一样要将模型中心点贴合地面，或者通过模型矩阵改变位置

//entity方式
viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(117, 25),
        model: {
          uri: 'Models/my_city_0.glb',
          minimumPixelSize: 48，
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
      })
//primitive方式
var position = Cesium.Cartesian3.fromDegrees(109.02, 34.02, 0)
	let p = ellipsoid.cartesianToCartographic(position )
          let promise = Cesium.sampleTerrainMostDetailed(window.viewer.terrainProvider, [p])
          Cesium.when(promise, function() {
		  var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0)
		      var fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west')
		      var scene = viewer.scene
		      scene.primitives.add(
		        Cesium.Model.fromGltf({
		          url: 'Models/Cesium_Air.gltf',
		          modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(Cesium.Cartographic.toCartesian(p), hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame, position),
		          minimumPixelSize: 128,
		          maximumScale: 200,
		        })
		      )
})
    

6.3dTiles设置贴地

3dtiles初始的位置在加载了地形后可能位于地形下方，通过调整模型高度让tiles位于地表上，这里高度设定的固定值，也可以通过上边的sampleTerrainMostDetailed获取到实际的高程再调整

var tileset = window.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: 'Tileset/tileset.json'
        })
      )
      tileset.readyPromise
        .then(function(tileset) {
          //调整高度
          var translation = Cesium.Cartesian3.fromArray([0, 0, 200])
          var m = Cesium.Matrix4.fromTranslation(translation) //fromTranslation()方法
          tileset.modelMatrix = m
          })
        .otherwise(function(error) {
          console.log(error)
        })
      

7.CZML，GEOJSON，KML设置贴地

czml和GEOJSON都是json格式，kml则接近与html标签的形式，这三种文件中都有clampToGround字段属性，加载时设置为true便可实现贴地

var dataSourcePromise = Cesium.CzmlDataSource.load('../Czml/MultipartVehicle_part1.czml'，{clampToGround: true}) //CZML加载实体方式
      viewer.dataSources.add(dataSourcePromise)
      viewer.zoomTo(dataSourcePromise)

var dataSourcePromise = Cesium.GeoJsonDataSource.load('../JSON/1.json'，{clampToGround: true})
      dataSourcePromise.then(function(dataSource) {
        viewer.dataSources.add(dataSource)
        viewer.flyTo(dataSource)
      })

var dataSourcePromise = Cesium.KmlDataSource.load('../Kml/facilities/facilities.kml', {clampToGround: true})
      dataSourcePromise.then(function(dataSource) {
        viewer.dataSources.add(dataSource)
        //viewer.flyTo(dataSource)
      })