海量面线 ·Mass Polygons Polylines· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么GeometryInstance收集大量面/线几何单个Primitive一次 draw 多种 instancePerInstanceColorAppearance/PolylineColorAppearance效果说明随机生成10000个三角形面 对应边框线红绿交替填充白线描边。核心概念合批模式// 收集阶段faceCollection.instances.push(new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(positions) ), height: 0, vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT, }), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(color), }, id: face i, }));// 提交阶段 — 一个 Primitive 渲染全部面 viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: faceCollection.instances, appearance: new Cesium.PerInstanceColorAppearance({ closed: true }), }));线集合同理用PolylineGeometryPolylineColorAppearance。positions 格式本案例positions为[lon1, lat1, lon2, lat2, lon3, lat3]三角面三顶点度。实现步骤封装faceCollection/lineCollection带add()方法 push instance循环 10000 次随机经纬生成三角callback 结束后各 add 一个 Primitive代码要点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,//是否显示信息框})setFaceCollection(viewer, (faceCollection, lineCollection) {for (var i 0; i 10000; i) {var longitude Math.random() * 360 - 180;var latitude Math.random() * 180 - 90;var positions [longitude, latitude, longitude Math.random(), latitude, longitude, latitude Math.random()];faceCollection.add({ positions, color: i % 2 0 ? red : green, id: face i, opacity: 1 })lineCollection.add({ positions, color: #fff, id: line i, width: 1.0, opacity: 0.5 })}})// 创建大量面和线段 function setFaceCollection(viewer, callback) {const lineCollection {instances: [],add({ positions, color #fff, id , width 1.0, opacity 1 }) {if (!positions) returnthis.instances.push(new Cesium.GeometryInstance({geometry: new Cesium.PolylineGeometry({positions: Cesium.Cartesian3.fromDegreesArray(positions),width: width * 3,vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color).withAlpha(opacity))},id}))}}const faceCollection {instances: [],add({ positions, color #fff, id , opacity 1 }) {if (!positions) returnthis.instances.push(new Cesium.GeometryInstance({geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(positions)),height: 0,vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color).withAlpha(opacity))},id}))}}if (callback) callback(faceCollection, lineCollection)// 增加面集合到场景中 viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: faceCollection.instances,appearance: new Cesium.PerInstanceColorAppearance({closed: true})}))// 增加线集合到场景中 viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: lineCollection.instances,appearance: new Cesium.PolylineColorAppearance()}))}完整源码GitHub小结本文提供海量面线完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库