cesium使用primitive方式加载geojson

Cesium实战系列文章总目录： 传送门

之前加载geojson数据都是使用dataSource和entity的方式，但是当数据量大时，使用primitive方式加载数据，可以提高加载渲染效率。

1.实现效果

2.实现方法

首先需要使用jQuery异步加载json文件，然后依次遍历设置geometry的颜色、拉伸高度等参数，最后将单个geometry合并一次传输，提高渲染效率，具体代码如下：

 // 使用primitive方式加载geojson
 let urlPath = './data/park/parks.geojson';
 // 使用jQuery异步加载json数据
 $.get(urlPath, function(data) {
     const features = data.features;
     addDataToGlobe(features);
 })

 function addDataToGlobe(features) {
     const 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(',');
             const polygon = new Cesium.PolygonGeometry({
                 polygonHierarchy: new Cesium.PolygonHierarchy(
                     Cesium.Cartesian3.fromDegreesArray(polygonArray)
                 ),
                 // 设置面的拉伸高度
                 extrudedHeight: 35,
             });
             const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
             instances.push(new Cesium.GeometryInstance({
                 geometry: geometry,
                 attributes: {
                     color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN),
                 },
             }));
         }
     }
     // 合并单个geometry,提高渲染效率
     const primitive = new Cesium.Primitive({
         geometryInstances: instances,
         appearance: new Cesium.PerInstanceColorAppearance(),
     });
     this.viewer.scene.primitives.add(primitive);
 }