vue+cesium地球上绘制点、线，动态改变点的高度

1. 鼠标点击绘制点、线

   //点击模式开启/关闭
    modeOpenOrClose = () => {
        let that = this;
        if (that.spotMode) {
            that.handler.setInputAction(function (event) {
                //返回地球表面上的点坐标
                let earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
                if (Cesium.defined(earthPosition)) {
                    let ellipsoid = viewer.scene.globe.ellipsoid;
                    let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
                    let lon = Cesium.Math.toDegrees(cartographic.longitude);
                    let lat = Cesium.Math.toDegrees(cartographic.latitude);
                    let alt = cartographic.height + ''
                    //高度太高 无法获取数据高度为0
                    if (alt.indexOf('e') != -1) alt = 0
                    let entity = that.AddPoint({
                        lon,
                        lat,
                        alt,
                        color: Cesium.Color.YELLOW
                    });

                    let entityPiontData = {
                        pointId: entity._id,
                        longitude: lon,
                        latitude: lat,
                        height: alt
                    }
                    store.commit('SAVE_CARTOGRAPHIC', entityPiontData) //储存到vuex
                    if (that.lastPoint === undefined) {
                        that.lastPoint = new Cesium.Cartesian3.fromDegrees(lon, lat, alt);
                        that.lastPoint.pointId = entity._id;
                    } else {
                        that.nextPoint = new Cesium.Cartesian3.fromDegrees(lon, lat, alt);
                        that.nextPoint.pointId = entity._id
                        that.AddPolyline({
                            positions: [that.lastPoint, that.nextPoint]
                        });
                        that.lastPoint = that.nextPoint;
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        } else {
            that.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) //移除事件
            that.lastPoint = undefined;
        }
    }
    // 添加点
    AddPoint = (params) => {
        let entity = new Cesium.Entity({
            id:`${params.lon}点`,
            name: '点',
            show: true,
            position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
            point: new Cesium.PointGraphics({
                show: true, //是否展示
                pixelSize: 10, //点大小            
                color: params.color       
            })
        });
        //收集Id
        this.pointIdList.push(entity._id);
        viewer.entities.add(entity);
        return entity;
    }
     // 添加线
     AddPolyline = (params) => {
        let entity = new Cesium.Entity({
            id:`${new Date().getTime()}线`,
            name: '线',
            adjoinPointId: params.positions[0].pointId + '@' + params.positions[1].pointId,  //相邻点id
            polyline: new Cesium.PolylineGraphics({
                show: true,
                clampToGround: false,
                positions: params.positions,
                width: 10,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.2,
                    color: Cesium.Color.BLUE
                })
            })
        });
        viewer.entities.add(entity);
        return entity;
    }

2.改变点的高度，并重新绘制线

    // 修改点的高度
    editPointHeight = (data) => {
        let axis = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.height);
        axis.pointId = data.pointId;
        let adjoinPointIdlist = [];//相邻点id的集合
        let pointList = []//相邻点坐标的集合
        let entitiesArray = viewer.entities._entities._array

        for (var i = 0; i < entitiesArray.length; i++) {
            if (entitiesArray[i]._id == data.pointId) {
                entitiesArray[i]._position._value.x = axis.x
                entitiesArray[i]._position._value.y = axis.y
                entitiesArray[i]._position._value.z = axis.z
            }
            //通过遍历获取adjoinPointId包含点id  获取两个点的坐标   
            if (entitiesArray[i].adjoinPointId && entitiesArray[i].adjoinPointId.indexOf(data.pointId) >= 0) {
                let arr = entitiesArray[i].adjoinPointId.split('@')
                if (arr[0] !== data.pointId) adjoinPointIdlist.push(arr[0])
                else adjoinPointIdlist.push(arr[1])
                viewer.entities.remove(viewer.entities.getById(entitiesArray[i]._id)); //删除线段
                i--
            }
        }
        //如果是修改的最后一个点  同时也修改lastPoint的位置
        if (entitiesArray[entitiesArray.length - 1]._id == data.pointId) {
            this.lastPoint = axis //记录点的位置
        }
        // console.log(adjoinPointIdlist,'adjoinPointIdlist')
        //获取相邻点的位置
        adjoinPointIdlist.forEach(v => {
            entitiesArray.forEach(k => {
                if (v == k._id) {
                    let obj = {
                        pointId: k._id,
                        ...k._position._value
                    }
                    pointList.push(obj)
                }
            })
        })
        // console.log(pointList, 'pointList')

        pointList.forEach((item, index) => {
            if (index == 0) {
                this.AddPolyline({
                    positions: [item, axis]
                });
            } else {
                setTimeout(() => {
                    this.AddPolyline({
                        positions: [item, axis]
                    });
                }, 10)
            }
        })
    }

示例图