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,
        })
      }
    }
相关推荐
kyle~5 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light606 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏7 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~8 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟8 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
iCoding9110 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3310 小时前
使用 Service Worker 限制请求并发数
前端
张可爱10 小时前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine10 小时前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis10 小时前
chrome中的axure插件提示无法不受支持
前端·chrome