星图地图--根据坐标创建模型、手动生成模型、删除模型、监听模型点击事件

1.根据坐标显示模型--必须具备唯一id

1.1 显示矩形模型和名称

     selecterRows.forEach(item => {
         // 矩形
        let rectangleGraphic = new GV.RectangleGraphic({
          visible: true,
          id: item.id, // 必须具备唯一id
          coordinates: item.area, //坐标， 数组
          extrudedHeight: 200000,
          extrudedHeightReference: 'none',
          fill: true,
          material: 'rgba(0, 255, 255, 0.4)',
        });
        // 名称
        groupView.add(rectangleGraphic);
        let labelGraphic = new GV.LabelGraphic({
          position: new GV.GeoPoint(...item.area), // 坐标，列表
          text: item.name, // 显示的名字
          id: item.name,  // 唯一id
          font: '12px Helvetica',
          fillColor: '#fff',
          pixelOffset: [0, -20],
        });
       groupView.add(labelGraphic)
      })

1.2 显示球体

    selecterRows.forEach((item) => {

          //球 planArea: [69, 40, 12000]，只取前两位坐标，最后一个为高度
          // 处理数据需要深复制，否则循环过程数据有影响
          let transData = JSON.parse(JSON.stringify(item.planArea)) 
          let planArea = transData.splice(0, 2);
          let sphereGraphic = new GV.SphereGraphic({
            visible: true,
            id: item.id,
            position: new GV.GeoPoint(...planArea, 300000),
            color: '#7fb80e',
          });
          groupView.add(sphereGraphic);
        });

2.手动绘制模型--绘制模型必须创建唯一name

2.1 绘制点

      group.graphicLayer.create(
        {
          type: 'PointGraphic',
          name: `'show'${ifShow}`,
          size: 0.2, //大小,
          color: '#ffff00',
        },
        group.graphicLayer.getRoot(),
        (data) => {
            if (data.positions) {
              groupView.removeById('mubiao');
              let labelGraphic = new GV.LabelGraphic({
                position: new GV.GeoPoint(
                  data.position.lon.toFixed(6),
                  data.position.lat.toFixed(6),
                ),
                text: '目标点',
                id: `point${ifShow}`,
                font: '12px Helvetica',
                fillColor: '#fff',
                pixelOffset: [0, -20],
              });
              groupView.add(labelGraphic);
            }
        }

2.2 绘制立方体

        group.graphicLayer.create(
          {
            type: 'RectangleGraphic',
            outline: true,
            name:'dizhi',
            outlineColor: '#fff',
            height: 200000,
            extrudedHeight: 200000,
            material: 'rgba(0, 255, 255, 0.4)',
          },
          undefined,
          (data) => {
            console.log(data);
            if(data.positions) {
              form.setFieldsValue({
                leftLg: data.positions[0].lon.toFixed(6),
                leftLa: data.positions[0].lat.toFixed(6),
                rightLg: data.positions[1].lon.toFixed(6),
                rightLa: data.positions[1].lat.toFixed(6),
              });
            }
            setIfShow(true);
          },
        )

2.3 绘制球

    group.graphicLayer.create({
            type: 'SphereGraphic',
            color: 'rgba(0, 0.0, 255, 0.6)'
        }, undefined, (data) => {
            console.log(data);
            if(data.positions) {
              form.setFieldsValue({
                aritLg: data.position.lon.toFixed(6),
                ariLa: data.position.lat.toFixed(6),
                aritHeight: data.position.alt.toFixed(2),
                radius: data.radius.toFixed(2),
              });
            }
            setIfShow(true);
    })

3.删除规则

根据坐标创建的模型具有唯一id

groupView.removeById(item.planName);

手动创建的模型具有唯一name

group.graphicLayer.remove(group.graphicLayer.getNodeByName('dizhi')[0]);

4.监听模型点击事件

      // 监听地图上点击事件，保存当前点击模型的标识
    if(group) {
      group.screenSpaceEventHandler.setInputAction((movement) => {
            let pickObj = group.graphicLayer.pickByCoordinate2(movement.position.x, movement.position.y);
            if(pickObj.length != 0) {
              dispatch({
                type: 'commomMap/saveMapTag',
                payload: pickObj[0].id,
              });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }

5.模型定位

    // 参数依次为经、纬、高
    group.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(record.planArea[0], record.planArea[1], 20000000)
    })