海量点 ·Mass Points· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么BillboardCollection相对 Entity 的性能优势双重 for 循环生成64800个格网点每个 billboard 设id供 pick 识别效果说明全球每 1° 经纬交点处放置一张小图标随机着色点击可在控制台输出object.id。核心概念| 方式 | 适用规模 | API | |------|---------|-----| | Entity.point | 数百以内 |entities.add| |BillboardCollection| 数万 |scene.primitives.add| | PointPrimitiveCollection | 数十万点无图标 | 同 Primitive 层 |const billboards new Cesium.BillboardCollection();viewer.scene.primitives.add(billboards);billboards.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude), image: HOST /files/author/z2586300277.png, scale: 0.1, color: new Cesium.Color(Math.random(), Math.random(), Math.random(), 1), id: billboard- longitude - latitude, });Entity 每个点一个 draw callCollection合批同纹理 billboard。实现步骤camera.setView定初始全球视角创建BillboardCollection并 add 到 scene经度 -180~180、纬度 -90~90 双重循环 addLEFT_CLICKscene.pick读 id代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)),fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})// 设置一个视角 viewer.camera.setView({destination: Cesium.Cartesian3.fromRadians(2.100117282185777, 0.6195146302793972, 104244.23864046125),orientation: {direction: new Cesium.Cartesian3(0.5153454276260272, -0.7794098602398831, 0.3562855034741005),up: new Cesium.Cartesian3(-0.1511548595883593, 0.326557215595639, 0.9330126437327882)}})// 添加点击事件监听器 viewer.screenSpaceEventHandler.setInputAction(function (event) {const object viewer.scene.pick(event.position)console.log(object.id)}, Cesium.ScreenSpaceEventType.LEFT_CLICK)const billboards new Cesium.BillboardCollection(); // 创建billboard集合对象viewer.scene.primitives.add(billboards); // 添加billboard集合对象到场景中const color () new Cesium.Color(Math.random(), Math.random(), Math.random(), 1); // 随机颜色// 生成64800个点每个经度、纬度值各生成一个点高度为0贴地表 for (var longitude -180; longitude 180; longitude) {for (var latitude -90; latitude 90; latitude) {billboards.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude),image: HOST /files/author/z2586300277.png, // 图标scale: 0.1, // 调整图标的大小color: color(), // 随机颜色id: billboard - longitude - latitude})}}完整源码GitHub小结本文提供海量点完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库