项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

实现方法

方式1：heightReference属性

使用 Billboard 自带的 heightReference 属性实现贴地。该方法的好处是实现简单，但如果数据量巨大（50000以上），加载会比较慢。
使用该方法需要在创建 BillboardCollection 时指定 scene 属性。

const collection = new Cesium.BillboardCollection({ scene: viewer.scene })

并在创建 Billboard 时将 heightReference 设置为 CLAMP_TO_GROUND。

collection.add({position: position,image: pinBuilder.fromColor(Cesium.Color.fromRandom({ alpha: 1.0 }), 20).toDataURL(),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
})

方式2：sampleTerrainMostDetailed方法

如果数据量较大，另一种可行的方法是先使用 sampleTerrainMostDetailed 获取点的高程，并存储到数据库中，之后直接从数据库中读取数据。该方式只在高程采样时较慢，后面的加载会非常快，比较适用于大量数据的加载显示。

// 1、生成大量随机点
const points = randomPoint(500, { bbox: [100, 25, 102, 27] })
// 2、Cartographic数组
const positions = []
for (let point of points.features) {const coordinates = point.geometry.coordinatesconst position = Cesium.Cartographic.fromDegrees(coordinates[0], coordinates[1])positions.push(position)
}
// 3、高程采样
const pinBuilder = new Cesium.PinBuilder();
const collection = new Cesium.BillboardCollection()
const terrainProvider = viewer.terrainProvider
const promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions);
Promise.resolve(promise).then(function (updatedPositions) {for (let position of updatedPositions) {collection.add({position: Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height),image: pinBuilder.fromColor(Cesium.Color.fromRandom({ alpha: 1.0 }), 20).toDataURL(),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,})}viewer.scene.primitives.add(collection)
});

Cesium加载大量广告牌并实现贴地相关推荐

初次转化max模型为3D Tiles失败、cesium加载一个obj格式的3D 机房模型
先下一个3D max模型,后缀为.max:用3D max打开:网上下的其他模型查看器不能打开: 打开时会出错误提示:对max模型文件和3d max还不了解: 打开后如下:是一个机房的3D模型: 下载一 ...
首次使用Cesium加载3D数据不成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/110454547 参阅相关教程:Cesium加载3D数据是通过3D Tiles进行: 3D ...
cesium 加载网格
cesium 加载网格 // -------------------------------------- ---------------------------------加载网格--------- ...
cesium加载 gltf模型
cesium加载 gltf模型首先自己配置一个iis环境 :http://www.xitongcheng.com/jiaocheng/win10_article_60912.html,其他环境比如 ...
cesium 加载科技感
cesium 加载模型上边的呼吸感 // 设置透明度var alp = 1;var num = 0; 在model里边添加这个color参数 color:new Cesium.CallbackProp ...
cesium加载批量模型
cesium加载批量模型 class CreateModel {constructor() { }// 添加单条数据addEntity(item) {// 删除实体// viewer.entities ...
cesium加载arcgis切片
cesium 加载arcmap切片 jpg // z 是缩放级别 x是从左到右 y是从上到下 var imageryUrl = '/images/{z}/{x}/{y}.jpg';//影像数据var ...
cesium 加载Googl式的切片
cesium 加载Googl式的切片首先配置个iis本地服务器把项目放到iis服务器路径里边代码 var viewer = new Cesium.Viewer('cesiumContainer' ...
CESIUM加载glb的模型
CESIUM加载glb的模型 1.首先有一个glb格式的模型 // 加载gltf的模型 //url模型路径可以是.glb或者gltf等,height距地高度0为贴地 function createM ...

Cesium加载大量广告牌并实现贴地

目录