cesium中对创建的Polygon跟PolyLine的entity进行编辑

话不多少直接贴代码

 

import * as Cesium from '@cesiumgs/cesium-analytics';
import { DrawType } from '@/BaseClass/Cesium/Draw/DrawType';
type OptionsModel = {
    cesiumview:Cesium.Viewer,
  };
class ModifyGraphics{
    cesiumview:Cesium.Viewer
    dataSource:Cesium.DataSource
    plygonPositions:Array<Cesium.Cartesian3>
    handle:Cesium.ScreenSpaceEventHandler
    constructor(options:OptionsModel){
        this.cesiumview=options.cesiumview;
        console.log(this.cesiumview)
        this.dataSource = new Cesium.CustomDataSource('ModifyGraphicsEntityArr');
        this.cesiumview.dataSources.add(this.dataSource);
        this.handle=new Cesium.ScreenSpaceEventHandler(this.cesiumview.scene.canvas)
    }
    drawGraphics (arr:Array<Cesium.Cartesian3>,drawType:DrawType){
        this.cesiumview.scene.screenSpaceCameraController.enableRotate = false;
        this.plygonPositions=arr;
        let graphicsEntity=null;
        if(drawType=="polygon"){
           graphicsEntity = new Cesium.Entity({
                name: "mmpolygon",
                polygon: {
                  hierarchy: new Cesium.CallbackProperty(()=>{
                    return new Cesium.PolygonHierarchy(this.plygonPositions);
                  }, false),
                  material: Cesium.Color.YELLOW.withAlpha(0.3),
                  heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                  outline:true,
                  outlineWidth:5,
                  outlineColor:Cesium.Color.RED
                },
              });
        }else if(drawType=="line"){
            graphicsEntity = new Cesium.Entity({
                name: "mmpolygon",
                polyline: {
                    width: 4,
                    material: Cesium.Color.YELLOW.withAlpha(0.8),
                    clampToGround: true,
                    positions: new Cesium.CallbackProperty( ()=> {
                      return this.plygonPositions;
                    }, false),
                },
              });
        }else{
            throw new Error('For a DrawType with no input, contact the author of this method!!!');
        }
      this.plygonPositions.map((item,index)=>{
        let _pointEntity = new Cesium.Entity({
            id: `mmmovepoint_${index}`,
            position: new Cesium.CallbackProperty( ()=> {
                return item;
               }, false),
            point: {
              pixelSize: 8,
              outlineColor: Cesium.Color.SKYBLUE,
              outlineWidth: 3,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        })

        this.dataSource.entities.add(_pointEntity);
      })
      this.dataSource.entities.add(graphicsEntity);

      this.modifyShape();
    }
    
    modifyShape(){
       this.handle.setInputAction((e)=>{
            let pick = this.cesiumview.scene.pick(e.position);
        
            if(pick&&pick.id&&pick.id.id.indexOf("mmmovepoint")!=-1){
                let index=pick.id.id.split("_")[1]
                this.handle.setInputAction((moveEvent)=>{
                    let ray = this.cesiumview.camera.getPickRay(moveEvent.endPosition);
                    let cartesian = this.cesiumview.scene.globe.pick(ray, this.cesiumview.scene);
                    this.movePoint(pick.id.id,cartesian)
                    this.plygonPositions[index]=cartesian;

                },Cesium.ScreenSpaceEventType.MOUSE_MOVE)
            }else if(pick&&pick.id&&pick.id.name=="mmpolygon"){
                this.handle.setInputAction((moveEvent)=>{
                    let startPosition = this.cesiumview.scene.pickPosition(moveEvent.startPosition);
                    let endPosition = this.cesiumview.scene.pickPosition(moveEvent.endPosition);
                    let changed_x = endPosition.x-startPosition.x;
                    let changed_y = endPosition.y-startPosition.y;
                    let changed_z = endPosition.z-startPosition.z;
                    for(let i=0;i<this.plygonPositions.length;i++){
                        this.plygonPositions[i].x=this.plygonPositions[i].x+changed_x;
                        this.plygonPositions[i].y=this.plygonPositions[i].y+changed_y;
                        this.plygonPositions[i].z=this.plygonPositions[i].z+changed_z;
                    }
                },Cesium.ScreenSpaceEventType.MOUSE_MOVE)
            }
        },Cesium.ScreenSpaceEventType.LEFT_DOWN)

        this.handle.setInputAction((e)=>{
           this.handle.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
           return this.plygonPositions
        },Cesium.ScreenSpaceEventType.LEFT_UP)
    }
    movePoint(id,position){

        let entities = this.dataSource.entities.values;
        
        for (var i = 0; i < entities.length; i++) {
            if (entities[i].id && entities[i].id == id) {
                console.log(entities[i])
                entities[i].position=new Cesium.CallbackProperty( ()=> {
                    return position;
                   }, false)
            }
          }
   
    }
    destory(){
        this.cesiumview.scene.screenSpaceCameraController.enableRotate = true;
        if(this.handle){
            this.handle.destroy();
        }
        if(this.dataSource){
            this.dataSource.entities.removeAll()
            this.cesiumview.dataSources.remove(this.dataSource);
        }
    }
}

export default ModifyGraphics

没有细致测试.有问题一起讨论