cesium两种方式实现贴地

根据地形高度计算高度以实现贴地

sampleTerrainMostDetailed，用于在地球表面的特定位置上采样最详细的地形数据，返回的是一个 Promise 对象
==数据量大计算量大耗时长==

javascript 复制代码

export function loadBigPointLayer(viewer, features, id, image) {
  let length = features.length
  if (!image) {
    return
  }
  viewer.scene.globe.depthTestAgainstTerrain = true
  //广告牌
  const billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection({ 
    // 如果所有广告牌都是完全不透明的或全部都是半透明的，将技术设置为BlendOption.OPAQUE或BlendOption.TRANSLUCENT最多可以将性能提高2倍
    blendOption: Cesium.BlendOption.TRANSLUCENT,
    scene: viewer.scene 
  }))
  //标注
  const labelCollection = viewer.scene.primitives.add(new Cesium.LabelCollection({scene: viewer.scene }));
  for (let i = 0; i < length; i++) {
    let feature=features[i]
    let x = feature.geometry.coordinates[0]
    let y = feature.geometry.coordinates[1]
    // 转换坐标格式
    let position = Cesium.Cartographic.fromDegrees(x, y)
    let pixelOffset = new Cartesian2(0, 0)
    let distanceDisplay = 7000//广告牌显示距离
    let distanceDisplayCondition = new DistanceDisplayCondition(0, distanceDisplay)
    if (feature.properties.place_type && feature.properties.imgurl) {
      image =feature.properties.imgurl
    }
    const terrainProvider = viewer.terrainProvider
    //此处可以循环每个点一起算，但由于需求要加入每个点的属性信息，所以就每个点单独算了
    //sampleTerrainMostDetailed的第二个参数是数组
    const promise = Cesium.sampleTerrainMostDetailed(terrainProvider, [position]);
    Promise.resolve(promise).then(function (updatedPositions) {
    for (let item of updatedPositions) {
      billboardCollection.add({
        //存储点击时所需属性
        id:{description:feature},
        show:true,
        //此处需要注意坐标格式的转换，需要将弧度值经纬度转为笛卡尔坐标
        position:Cesium.Cartesian3.fromRadians(item.longitude,item.latitude,item.height),
        //广告牌
        image:image,
        pixelOffset:pixelOffset,
        distanceDisplayCondition:distanceDisplayCondition,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
      })
      labelCollection.add({
        id:'Label'+id,
        show:true,
        position:Cesium.Cartesian3.fromRadians(item.longitude,item.latitude,item.height),
        text: features[i].properties.name || features[i].properties.show_name || '',
        font: "'500 10px Helvetica'",
        pixelOffset: new Cartesian2(0, -25),
        distanceDisplayCondition: distanceDisplayCondition,
      })
    }})
  }
}

设置heightReference属性以实现贴地

数据量大情况下贴地耗性能，会卡死

javascript 复制代码

export function loadBigPointLayer(viewer, features, id, image) {
  let length = features.length
  if (!image) {
    return
  }
  viewer.scene.globe.depthTestAgainstTerrain = true
  const billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection({ 
    // 如果所有广告牌都是完全不透明的或全部都是半透明的，将技术设置为BlendOption.OPAQUE或BlendOption.TRANSLUCENT最多可以将性能提高2倍
    blendOption: Cesium.BlendOption.TRANSLUCENT,
    scene: viewer.scene 
  }))
  const labelCollection = viewer.scene.primitives.add(new Cesium.LabelCollection({scene: viewer.scene }));
  for (let i = 0; i < length; i++) {
    let feature=features[i]
    let x = feature.geometry.coordinates[0]
    let y = feature.geometry.coordinates[1]
    let position = Cartesian3.fromDegrees(x, y)
    let pixelOffset = new Cartesian2(0, 0)
    let distanceDisplay = 7000//匹配的显示距离
    let distanceDisplayCondition = new DistanceDisplayCondition(0, distanceDisplay)
    if (feature.properties.place_type && feature.properties.imgurl) {
      image =feature.properties.imgurl
    }
    billboardCollection.add({
      id:{description:feature},
      show:true,
      position:position,
      image:image,
      pixelOffset:pixelOffset,
      distanceDisplayCondition:distanceDisplayCondition,
	  //贴地属性
      heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
    })
    labelCollection.add({
      id:'Label'+id,
      show:true,
      position:position,
      text: features[i].properties.name || features[i].properties.show_name || '',
      font: "'500 10px Helvetica'",
      pixelOffset: new Cartesian2(0, -25),
      distanceDisplayCondition: distanceDisplayCondition,
	  //贴地属性
      heightReference:HeightReference.CLAMP_TO_GROUND,
    })
  }
}