当前位置：首页 > news >正文

Cesium使用primitive添加点线面(贴地)

news 2025/8/18 12:00:28

 // 创建一个图元集合const primitives = viewer.scene.primitives.add(new Cesium.PrimitiveCollection());

1、点上图

 // 定义点的位置（中国不同城市的经纬度）const points = [{ lon: 116.4074, lat: 39.9042, name: "北京" },{ lon: 121.4737, lat: 31.2304, name: "上海" },{ lon: 113.2644, lat: 23.1291, name: "广州" },{ lon: 104.0658, lat: 30.5728, name: "成都" },{ lon: 114.0579, lat: 22.5431, name: "深圳" }];// 创建点集合实例const pointCollection = new Cesium.PointPrimitiveCollection();// 为每个点创建PointPrimitive并添加到集合中points.forEach(point => {pointCollection.add({position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,label: new Cesium.LabelStyle({text: point.name,font: '14px Inter, sans-serif',fillColor: Cesium.Color.WHITE,backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),backgroundPadding: new Cesium.Cartesian2(5, 5),showBackground: true,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(0, -15)})});});// 将点集合添加到图元集合中primitives.add(pointCollection);

线上图

// 定义一条连接中国几个城市的线（北京-上海-广州-成都-北京）
const linePositions = Cesium.Cartesian3.fromDegreesArray([116.4074, 39.9042,  // 北京121.4737, 31.2304,  // 上海113.2644, 23.1291,  // 广州104.0658, 30.5728,  // 成都116.4074, 39.9042   // 回到北京形成闭环
]);// 创建线实例
const line = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.PolylineGeometry({positions: linePositions,width: 5,vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)}}),appearance: new Cesium.PerInstanceColorAppearance({flat: true,renderState: {lineWidth: Math.min(5, viewer.scene.maximumAliasedLineWidth)}})
});// 将线添加到图元集合中
primitives.add(line);

面上图

// 定义一个多边形（以中国部分边界为例）
const polygonPositions = Cesium.Cartesian3.fromDegreesArray([116.4074, 39.9042,  // 北京附近121.4737, 31.2304,  // 上海附近113.2644, 23.1291,  // 广州附近104.0658, 30.5728,  // 成都附近106.5049, 29.5331,  // 重庆附近114.3055, 30.5928,  // 武汉附近116.4074, 39.9042   // 回到北京形成闭环
]);// 创建多边形实例
const polygon = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions),vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN.withAlpha(0.5))}}),appearance: new Cesium.PerInstanceColorAppearance({translucent: true,flat: true})
});// 将多边形添加到图元集合中
primitives.add(polygon);

贴地展示方式一
点贴地显示：为点图元设置了heightReference属性
线贴地显示：为线图元设置了heightReference属性

heightReference: clampToGround ? Cesium.HeightReference.CLAMP_TO_GROUND : Cesium.HeightReference.NONE

面贴地显示：为面图元设置了classificationType属性
在这里插入图片描述

classificationType: Cesium.ClassificationType.TERRAIN

贴地展示方式一

贴地线：

// 创建贴地线段几何实例
const positions = Cesium.Cartesian3.fromDegreesArray([116.4074, 39.9042,  // 北京121.4737, 31.2304,  // 上海113.2644, 23.1291,  // 广州104.0658, 30.5728,  // 成都116.4074, 39.9042   // 回到北京形成闭环
]);const geometry = new Cesium.GroundPolylineGeometry({positions : positions
});

贴地多边形：

const instance = new Cesium.GeometryInstance({id: "PolygonGeometry",geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([116.4074, 39.9042,  // 北京121.4737, 31.2304,  // 上海113.2644, 23.1291,  // 广州104.0658, 30.5728,  // 成都116.4074, 39.9042   // 回到北京形成闭环]))}),
});const primitive = new Cesium.GroundPrimitive({geometryInstances: instance,  //可以是实例数组appearance: new Cesium.MaterialAppearance({material: Cesium.Material.fromType('Color', {color: Cesium.Color.BLUE}),
})