文章目录
- 问题
- 分析
问题
之前加载geojson数据都是使用dataSource和entity的方式,但是当数据量大时,浏览器就会崩掉:提示浏览器内存不足,已暂停渲染
分析
使用primitive方式加载数据,可以提高加载渲染效率。实现方法如下:
getServePyApi(tempData).then((res)=>{if(res){var contents = res.data.result;console.log(res);const instances = [];let features = contents.features;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(',');const polygon = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygonArray)),// 设置面的拉伸高度extrudedHeight: 35,});var count = features[i].properties.index_coun;const color = null; // 根据 count 值设置不同的颜色if (count >= 0 && count < 10) {color = Cesium.Color.fromCssColorString('#FF0000'); // 设置红色} else if (count >= 10 && count < 20) {color = Cesium.Color.fromCssColorString('#00FF00'); // 设置绿色} else {color = Cesium.Color.fromCssColorString('#0000FF'); // 设置蓝色}const geometry = Cesium.PolygonGeometry.createGeometry(polygon);instances.push(new Cesium.GeometryInstance({geometry: geometry,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(color),},}));}}// 合并单个geometry,提高渲染效率this.od5 = new Cesium.Primitive({geometryInstances: instances,appearance: new Cesium.PerInstanceColorAppearance(),});window.viewer.scene.primitives.add(this.od5);});