Cesium豐富的空間數據可視化API分為兩部分：primitive API面向三維圖形開發者，更底層一些。

Entity API是數據驅動更高級一些。

// entity
// 調用方便，封裝完美
// 是基于primitive的封裝// primitive
// 更接近底層
// 可以繪制高級圖形
// 由Geometry(幾何形狀)、(Appearance)外觀組成

const primitive = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.EllipseGeometry({center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),semiMinorAxis: 500000.0,semiMajorAxis: 1000000.0,rotation: Cesium.Math.PI_OVER_FOUR,vertexFormat: Cesium.VertexFormat.POSITION_AND_ST}),}),appearance: new Cesium.EllipsoidSurfaceAppearance({material: Cesium.Material.fromType('Stripe')})
})
viewer.scene.primitives.add(primitive);

組合圖形

<h1 id="m7WFT">組合圖形</h1>
```javascript
const rectangleInstance = new Cesium.GeometryInstance({geometry: new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT}),id: 'rectangle',attributes: {color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)}
});const ellipsoidInstance = new Cesium.GeometryInstance({geometry: new Cesium.EllipsoidGeometry({radii: new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0),vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL}),modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 500000.0), new Cesium.Matrix4()),id: 'ellipsoid',attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)}
});viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [rectangleInstance, ellipsoidInstance],appearance: new Cesium.PerInstanceColorAppearance()
}));

點擊事件

<h1 id="qr6o4">點擊事件：</h1>
<h3 id="XXD1c">添加地形圖層后去畫點</h3>
```javascript
let viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain()
})let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {//返回一個笛卡爾坐標let position = viewer.scene.pickPosition(event.position);//如果有這個坐標if (Cesium.defined(position)) {console.log(position)viewer.entities.add({position: position,point: {color: Cesium.Color.BLUE,pixelSize: 20,},})console.log(viewer.entities)}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

事件注銷

handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左鍵點擊事件

申明變量

let pickModel

鼠標移動事件

//添加建筑物
const city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(75343),})
);
viewer.flyTo(city)let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {//拾取模型const pick = viewer.scene.pick(event.endPosition);if (pick) {if (pickModel) {pickModel.color = Cesium.Color.WHITE;}pick.color = Cesium.Color.ORANGERED;pickModel = pick;}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

注銷事件

handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左鍵點擊事件