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,
        })
      }
    }
相关推荐
我要让全世界知道我很低调7 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined28 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾43 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript