一般情況下，點線面用entity去實現顯得更加容易，但是當數據量比較大的時候，其頁面性能真的讓人不敢恭維，被甲方大大看到，大概率會被拉出去閹割了。。。

所以今天我們使用Cesium底層api，Primitive去實現一個數據量比較大的風險四色圖效果，其性能比entity不知強了多少倍，可以隨時在甲方大大面前蹦迪了😄！

首先我們要拿到區域數據

const getJson = async () => {const { res } = await getGeojson("/json/qingdaoArea.geojson")addDataToGlobe(res.features) }

然后直接渲染

const colorArrs = ["AQUAMARINE", "BEIGE", "CORNFLOWERBLUE", "DARKORANGE", "GOLD", "GREENYELLOW", "LIGHTPINK", "ORANGERED", "YELLOWGREEN", "TOMATO"] const addDataToGlobe = (features) => {let instances = [];for (let i = 0; i < features.length; i++) {for (let j = 0; j < features[i].geometry.coordinates.length; j++) {const polygonArray = features[i].geometry.coordinates[j].toString().split(',').map(Number);const polygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygonArray)),vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,// 設置面的拉伸高度extrudedHeight: 100,// height: 100, // 多邊形和橢球表面之間的距離（以米為單位）。});const geometry = Cesium.PolygonGeometry.createGeometry(polygon);instances.push(new Cesium.GeometryInstance({id: `polygon-${i}`,geometry: geometry,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromAlpha(Cesium.Color[colorArrs[i]], 0.6)),show: new Cesium.ShowGeometryInstanceAttribute(true)// 顏色隨機// color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({ alpha: 0.7 })),},}));}}// 合并單個geometry,提高渲染效率const primitive = new Cesium.Primitive({geometryInstances: instances,appearance: new Cesium.PerInstanceColorAppearance({translucent: true, // 當 true 時，幾何體應該是半透明的，因此 PerInstanceColorAppearance#renderState 啟用了 alpha 混合。closed: false // 當 true 時，幾何體應該是關閉的，因此 PerInstanceColorAppearance#renderState 啟用了背面剔除。}),asynchronous: false,});viewer.scene.primitives.add(primitive); }

就這么簡單，相關開源代碼請訪問：https://github.com/tingyuxuan2302/cesium-complete，該開源集合了Cesium常見的效果示例，并在持續的開發維護中，歡迎star！

總結

以上是生活随笔為你收集整理的Cesium Primitive实现风险四色图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。