Cesium使用Primitive方式加载海量多边形

Cesium使用Primitive方式加载海量多边形_第1张图片使用Primitive加载海量多边形,在加载地形的情况下让Primitive绘制出来的多边形贴地

        this.polygonArr.forEach((item) => {
          let tempPosArr = [];
          if (item.geometry.coordinates.length !== 0) {
            item.geometry.coordinates[0].forEach((ii) => {
              tempPosArr.push(ii[0]);
              tempPosArr.push(ii[1]);
            });

            let primitive = new Cesium.GroundPrimitive({
              //贴地的primitive
              geometryInstances: new Cesium.GeometryInstance({
                id: item.properties.O_Name + '**polygonCompany**',
                geometry: new Cesium.PolygonGeometry({
                  polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray(tempPosArr)
                  ),
                }),
                attributes: {
                  color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    Cesium.Color.YELLOW
                  ),
                },
              }),
              appearance: new Cesium.PerInstanceColorAppearance(),
            });
            viewer.scene.primitives.add(primitive);//添加面
            viewer.scene.primitives.add(//添加面外边的边线
              new Cesium.GroundPolylinePrimitive({
                //贴地primitive线
                geometryInstances: new Cesium.GeometryInstance({
                  geometry: new Cesium.GroundPolylineGeometry({
                    //贴地线几何
                    positions: Cesium.Cartesian3.fromDegreesArray(tempPosArr),
                  }),
                }),
                appearance: new Cesium.PolylineMaterialAppearance({
                  material: Cesium.Material.fromType('Color', {
                    color: Cesium.Color.RED,
                  }),
                }),
              })
            );
          }
        });

原来是使用entity的方式加载数据,但是目前要加载的数据有一万多条,使用entity加载太卡了,所以换了上面的Primitive的方式加载

// 使用datasource一次性加载地块
Cesium.GeoJsonDataSource.load('/caoguoSHP.json', {
  clampToGround: true,
}).then(function (dataSource) {
  window.viewer.dataSources.add(dataSource);
  let entities = dataSource.entities.values;
  for (let i = 0; i < entities.length; i++) {
    let entity = entities[i];
    let color = Cesium.Color.YELLOW.withAlpha(0.8);
    let color1 = Cesium.Color.RED;
    //单独设置线条样式
    entity.polygon.material = color;
    var positions = entity.polygon.hierarchy._value.positions;
    entity.polyline = {
      positions: positions,
      width: 1,
      material: color1,
      clampToGround: true,
    };
    entity.layerId = entity.properties.O_Name + '**polygonCompany**';
  }
});

你可能感兴趣的:(Cesium,前端)