航点移动

src/views/demo/workmanagement/workplan/components/map.vue

@@ -136,7 +136,7 @@ const initMap = ()=>{
     map = new mars3d.Map(vChartRef.value, 
     {
         "scene": {
-            "center": {"lat":35.134762,"lng":118.295245,"alt":953.2,"heading":360,"pitch":-90},
+            "center": {"lat":35.134762,"lng":118.295245,"alt":953.2,"heading":360,"pitch":-60},
             "scene3DOnly": false,
             "shadows": false,
             "removeDblClick": true,
@@ -397,7 +397,6 @@ const handlerBindMapMenus = ()=>{
             text: "飞行到此处",
             icon: "fa fa-camera-retro", // 支持 font-class 的字体方式图标
             callback: (e) => {
-
                 flyToThere(e);
             }
         },
@@ -929,20 +928,71 @@ const deleteAirPoint = (e)=>{
 
 }
 
+
+let stickGraphicLayer:mars3d.layer.GraphicLayer;
+
+let moveTool:mars3d.thing.MatrixMove2;
+
 // 飞行到此处
 const flyToThere = (e) => {
 
     if(!uavGraphicLayer){
         uavGraphicLayer = new mars3d.layer.GraphicLayer({
-            isAutoEditing: true // 是否自动激活编辑
+            isAutoEditing: false // 是否自动激活编辑
         });
-        map.addLayer(uavGraphicLayer);
 
         uavGraphicLayer.bindContextMenu([
+            {
+                text: "按轴平移",
+                icon: "fa fa-pencil",
+                callback: (event) => {
+                    const graphic = event.graphic
+                    if(moveTool){
+                        return null;
+                    }
 
-        ])
+                    // 按轴移动
+                    moveTool = new mars3d.thing.MatrixMove2({
+                        position: graphic.position,
+                    })
+
+                    moveTool.on(mars3d.EventType.change, (event) => {
+                        graphic.position = event.position
+                        uavGraphicMove(event);
+                    })
+
+                    map.addThing(moveTool)
+                }
+            },
+            {
+                text: "停止平移",
+                icon: "fa fa-pencil",
+                callback: (event) => {
+                    const graphic = event.graphic
+                    if(moveTool){
+                        moveTool.destroy();
+                        moveTool = null;
+                    }
+                }
+            }
+        ])  
+
+        map.addLayer(uavGraphicLayer);
+
+        uavGraphicLayer.on(mars3d.EventType.editMouseMove, (e) => {
+            
+        });
+    }
+
+    if(!stickGraphicLayer){
+        stickGraphicLayer = new mars3d.layer.GraphicLayer({
+            isAutoEditing: false // 是否自动激活编辑
+        });
+        map.addLayer(stickGraphicLayer);
     }
 
+    uavGraphicLayer.clear();
+
     let position = mars3d.LngLatPoint.fromCartesian(e.position);
 
     emits("flyToThere",position)
@@ -953,18 +1003,18 @@ const flyToThere = (e) => {
         graphicLayer.removeGraphic(mark);
     }
 
-    // 航点
+    // 无人机点
     const graphic = new mars3d.graphic.BillboardEntity({
-        id:"flytothere",
+        id:"flytothere-uav",
         name: "标点",
-        position: [position._lng,position._lat,position._alt],
+        position: [position._lng,position._lat,200],
         style: {
-            image: "/map/start-point.png",
-            scale: 0.5,
+            image: "/map/uav-mark.png",
+            scale: 0.3,
             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             label: {
-                text: "标点",
+                text: "",
                 font_size: 14,
                 color: "#ffffff",
                 outline: true,
@@ -974,17 +1024,134 @@ const flyToThere = (e) => {
         },
     })
 
+    
 
-    const pointEdit = new mars3d.thing.MatrixMove2({
-        position: graphic.position
+    // 贴地点
+    const stickGraphic = new mars3d.graphic.PointEntity({
+        id:"flytothere-stick",
+        position: [position._lng,position._lat],
+        style: {
+            color: "#f5f5f5",
+            pixelSize: 8,
+            outline: true,
+            outlineColor: "#f5f5f5",
+            outlineWidth: 1,
+            clampToGround:true,
+        }
     })
-    map.addThing(pointEdit)
 
-    pointEdit.on(mars3d.EventType.change, (event) => {
-        graphic.position = event.position
-    })
+    stickGraphic.on(mars3d.EventType.editMouseMove, (e) => {
+        const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.cartesian);
+        // 弧度转度数
+        const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
+        const height = cartographic.height; // 高度（米）
+        stickGraphicMove([longitude,latitude,height]);
+    });
+
+    
+    // 连接线
+    const connectLine = new mars3d.graphic.PolylineEntity({
+        id:"flytothere-line",
+        positions: [[position._lng,position._lat,200], [position._lng,position._lat,0]],
+        style: {
+            color: '#f5f5f5',
+            width: 1,
+        },
+    });
+
+
+
 
     uavGraphicLayer.addGraphic(graphic);
+    stickGraphicLayer.addGraphic(stickGraphic);
+    uavGraphicLayer.addGraphic(connectLine);
+
+}
+
+// 移动贴地点
+const stickGraphicMove = (e) => {
+    return null;
+    let uav = uavGraphicLayer.getGraphicById("flytothere-uav");
+    
+    if(uav){
+        uav.setOptions({
+            id:"flytothere-uav",
+            name: "标点",
+            position: [e[0],e[1],200],
+            style: {
+                image: "/map/uav-mark.png",
+                scale: 0.3,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                label: {
+                    text: "",
+                    font_size: 14,
+                    color: "#ffffff",
+                    outline: true,
+                    outlineColor: "#000000",
+                    pixelOffsetY: -40
+                }
+            },
+        })
+    }
+
+    let line = uavGraphicLayer.getGraphicById("flytothere-line");
+    if(line){
+        line.setOptions({
+            id:"flytothere-line",
+            positions: [[e[0],e[1],200], [e[0],e[1],0]],
+            style: {
+                color: '#f5f5f5',
+                width: 1,
+            },
+        })
+    }
+}
+
+// 无人机点按轴移动
+const uavGraphicMove = (e) => {
+
+    const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
+
+
+    // 弧度转度数
+    const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
+    const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
+    const height = cartographic.height; // 高度（米）
+
+    console.log(longitude,latitude,height);
+
+    emits("flyToThere",{_lng:longitude,_lat:latitude,_alt:height});
+
+    let line = uavGraphicLayer.getGraphicById("flytothere-line");
+
+    if(line){
+        line.setOptions({
+            id:"flytothere-line",
+            positions: [[longitude,latitude,height], [longitude,latitude,0]],
+            style: {
+                color: '#f5f5f5',
+                width: 1,
+            },
+        })
+    }
+
+    let stick = stickGraphicLayer.getGraphicById("flytothere-stick");
+    if(stick){
+        stick.setOptions({
+            id:"flytothere-stick",
+            position: [longitude,latitude],
+            style: {
+                color: "#f5f5f5",
+                pixelSize: 8,
+                outline: true,
+                outlineColor: "#f5f5f5",
+                outlineWidth: 1,
+                clampToGround:true,
+            }
+        })
+    }
 }
 </script>