1

public/config.js

@@ -1,11 +1,19 @@
 const isCamera = false; // 是否开启相机限制
-const cameraLon = 116.3974;
+const cameraLon = 116.3974; // 相机经度
-const cameraLat = 39.9042;
+const cameraLat = 39.9042; // 相机纬度
-const cameraRadius = 40000;
+const cameraRadius = 40000; // 相机半径
+const allPositionLon = 116.3974; // 全部阵地跳转经度
+const allPositionLat = 39.9042; // 全部阵地跳转纬度
+const allPositionAlt = 39.9042; // 全部阵地跳转高度
+const allPositionPitch = -90; // 全部阵地跳转俯仰角
 
 window.mapConfig = {
   isCamera: isCamera,
   cameraLon: cameraLon,
   cameraLat: cameraLat,
-  cameraRadius: cameraRadius
+  cameraRadius: cameraRadius,
+  allPositionLon: allPositionLon,
+  allPositionLat: allPositionLat,
+  allPositionAlt: allPositionAlt,
+  allPositionPitch: allPositionPitch
 };

src/components/myForm.vue

@@ -567,8 +567,11 @@ export default {
               }
               return item.geometry.coordinates;
             });
-            // console.log(toJson);
             this.ruleForm.geoJson = geojson;
+            this.ruleForm.center = [
+              this.$refs.myMarsmap[0].lonData,
+              this.$refs.myMarsmap[0].latData
+            ];
           }
 
           this.$emit("determine", this.ruleForm);

src/components/myMarsmap.vue

@@ -35,11 +35,16 @@
       </div>
       <div class="topbtns">
         <el-input
-          v-model="lonAndlat"
+          v-model="lonData"
-          placeholder="请输入经纬度"
+          :disabled="isinputDisabled"
-          @keyup.enter.native="handleSearchClick()"
+          placeholder="请输入经度"
         ></el-input>
-        <!-- <el-button @click="handleSearchClick()">跳转</el-button> -->
+        <el-input
+          v-model="latData"
+          :disabled="isinputDisabled"
+          placeholder="请输入纬度"
+        ></el-input>
+        <el-button @click="handleSearchClick()">定位</el-button>
         <el-button class="btns" @click="clearDraw">清空</el-button>
       </div>
     </div>
@@ -49,6 +54,7 @@
 <script>
 "use script";
 import { Drawarectangle } from "./map.js";
+import iconimg from "@/assets/img/dianweidingweiqizi.png";
 export default {
   name: "myMarsmap",
   props: {
@@ -76,9 +82,11 @@ export default {
       num: 0,
       attrType: "",
       fileList: [],
-      lonAndlat: "",
+      lonData: "",
+      latData: "",
       fileContent: "",
-      isDisabled: false
+      isDisabled: false,
+      isinputDisabled: false
     };
   },
   components: {},
@@ -106,12 +114,17 @@ export default {
       immediate: true,
       handler(newVal) {
         if (newVal) {
+          if (newVal.lon && newVal.lat) {
+            this.lonData = newVal.lon;
+            this.latData = newVal.lat;
+          } else {
+            this.lonData = "";
+            this.latData = "";
+          }
           console.log("mapData发生变化", newVal);
-          this.lon = newVal.lon;
+          if (this.lonData && this.latData) {
-          this.lat = newVal.lat;
+            if (this.lonData && this.latData) {
-          if (this.lon && this.lat) {
+              this.deviceDrid(this.lonData, this.latData);
-            if (this.lon && this.lat) {
-              this.deviceDrid(this.lon, this.lat);
             }
           }
         }
@@ -120,15 +133,13 @@ export default {
   },
   methods: {
     handleSearchClick() {
-      if (this.lonAndlat !== "") {
-        let lon = this.lonAndlat.split(",");
       this.map.setCameraView(
-          { lat: lon[1], lng: lon[0], alt: 4607, pitch: -50 },
+        { lat: this.latData, lng: this.lonData, alt: 4607, pitch: -50 },
         { duration: 0 }
       );
-        if (lon[0] && lon[1]) {
+      if (this.lonData && this.latData) {
-          this.deviceDrid(lon[0], lon[1]);
+        this.isinputDisabled = true;
-        }
+        this.deviceDrid(this.lonData, this.latData);
       }
     },
     getMapJson() {
@@ -204,8 +215,8 @@ export default {
       if (this.jsonData.length !== 0) {
         this.showRegion(this.jsonData, "geojson");
       }
-      if (this.lon && this.lat) {
+      if (this.lonData && this.latData) {
-        this.deviceDrid(this.lon, this.lat);
+        this.deviceDrid(this.lonData, this.latData);
       }
     },
     lineClicks(val) {
@@ -317,6 +328,7 @@ export default {
       }
     },
     clearDraw() {
+      this.isinputDisabled = false;
       if (this.graphicLayer) {
         this.graphicLayer.clear();
       }
@@ -327,7 +339,7 @@ export default {
         return this.graphicLayer.toGeoJSON({ noAlt: true });
       } else {
         this.graphicLayer._graphicList._array.forEach((item) => {
-          if (item.type === "pointP") {
+          if (item.type === "billboard") {
             this.graphicLayer.removeGraphic(item);
           }
         });
@@ -375,24 +387,30 @@ export default {
       }
     },
     deviceDrid(lon, lat) {
-      console.log(lon, lat);
+      // this.clearDraw();
-      this.clearDraw();
+      this.graphicLayer.eachGraphic((item) => {
-      // eslint-disable-next-line no-undef
+        if (item.name === "贴地点") {
-      const graphic = new mars3d.graphic.PointPrimitive({
+          this.graphicLayer.removeGraphic(item);
-        name: "贴地点",
+        }
-        // eslint-disable-next-line no-undef
+      });
+
+      const graphic = new mars3d.graphic.BillboardEntity({
         position: new mars3d.LngLatPoint(lon, lat),
         style: {
-          color: "#ffff00",
+          image: iconimg,
-          pixelSize: 10,
+          scale: 1,
-          clampToGround: true,
+          width: 30,
-          outlineWidth: 0
+          height: 50,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
         },
         flyTo: true
       });
+
       if (this.graphicLayer) {
         this.graphicLayer.addGraphic(graphic);
       }
+      console.log(this.graphicLayer, "this.graphicLayer");
     },
     // 地图跳转
     mapJump(lon, lat, alt) {
@@ -496,7 +514,7 @@ export default {
     justify-content: flex-start;
     background-color: rgba(30, 93, 160, 0.5);
     .el-input {
-      width: 60%;
+      width: 30%;
       margin-left: 1%;
       // transform: translateX(-50%);
     }
@@ -507,7 +525,7 @@ export default {
   .toolbar {
     position: absolute;
     right: 0%;
-    top: 0%;
+    top: 20%;
     z-index: 999;
     height: auto;
     display: flex;

src/views/contentData/Footer/index.vue

@@ -23,10 +23,15 @@ export default {
   name: "my-Footer",
   data() {
     return {
-      is2DActive: 2 // 这个值可以是根据其他逻辑来动态改变的
+      is2DActive: 2, // 这个值可以是根据其他逻辑来动态改变的
+      uploadUrl: ""
     };
   },
-  mounted() {},
+  mounted() {
+    if (window.marsMap) {
+      this.switchMap(2);
+    }
+  },
   methods: {
     switchMap(value) {
       if (value === 1) {
@@ -41,6 +46,40 @@ export default {
         this.$refs.leftBtn.style.background = `url(${require("@/assets/img/left-nohover.png")})`;
         this.$refs.rightBtn.style.background = `url(${require("@/assets/img/right-hover.png")})`;
       }
+
+      let wPath = window.document.location.href;
+      let pathName = this.$route.path;
+      let pos = wPath.indexOf(pathName);
+      let localhostPath = wPath.substring(0, pos);
+      this.uploadUrl =
+        process.env.VUE_APP_API_URL === "/"
+          ? localhostPath
+          : process.env.VUE_APP_API_URL;
+      let graphicLayer = window.marsMap.getLayerById("devLog");
+      graphicLayer.eachGraphic((graphic) => {
+        console.log(graphic, value, "graphic");
+        if (value === 1) {
+          graphic.setOptions({
+            style: {
+              image: require(`@/assets/img/device/deviceIcon/${graphic.attr.icon}.png`)
+            }
+          });
+        } else {
+          if (graphic.attr.img !== null) {
+            graphic.setOptions({
+              style: {
+                image: this.uploadUrl + graphic.attr.img
+              }
+            });
+          } else {
+            graphic.setOptions({
+              style: {
+                image: require("@/assets/img/group.png")
+              }
+            });
+          }
+        }
+      });
     }
   }
 };

src/views/contentData/MainContent/index.vue

@@ -1,8 +1,5 @@
-<!-- src/components/MainContent/MainContent.vue -->
 <template>
   <div class="main-content">
-    <!-- <img src="@/assets/map.jpg" alt="Map" class="map" /> -->
-    <!-- 模拟无人机位置 -->
     <div class="drone-marker" style="top: 20%; left: 30%"></div>
     <div class="drone-marker" style="top: 50%; left: 60%"></div>
   </div>

src/views/contentData/RightSidebar/index.vue

@@ -97,7 +97,6 @@ export default {
           this.positionData = newPositions;
           this.homeView = this.homeData;
           this.$nextTick(() => {
-            console.log("Calling handleTitleClick due to positions change");
             this.handleTitleClick(true, "all");
           });
         }
@@ -147,7 +146,7 @@ export default {
       }
       console.log(this.positionData, "this.positionData");
       let positionData = this.processGeojsonData(this.positionData);
-      allPositions(positionData, show); // 显示所有位置信息
+      allPositions(positionData, show, "all"); // 显示所有位置信息
     },
     handlePositionClick(value) {
       console.log(value, "value");
@@ -185,7 +184,7 @@ export default {
       );
       this.handleTitleClick(false, "one");
       let positionData = this.processGeojsonData([value]);
-      allPositions(positionData, true); // 显示所有位置信息
+      allPositions(positionData, true, "one", value); // 显示所有位置信息
       let deviceData = this.positionData.find((item) => item.id === value.id);
       allDevices(deviceData, "one", true); // 显示所有设备信息
     },

src/views/contentData/headerTop/index.vue

@@ -178,8 +178,8 @@ export default {
         {
           id: 8,
           name: "白名单",
-          icon: require("@/assets/img/menu/tjfx.png"),
+          icon: require("@/assets/img/menu/bmd.png"),
-          iconActive: require("@/assets/img/menu/tjfx-hove.png")
+          iconActive: require("@/assets/img/menu/bmd-hove.png")
         }
       ],
       quanping: [

src/views/contentData/index.js

@@ -1,5 +1,6 @@
 import route from "@/router/index";
-export function allPositions(options, show) {
+import iconimg from "@/assets/img/dianweidingweiqizi.png";
+export function allPositions(options, show, type, value) {
   options.forEach((item, index) => {
     let graphic = window.marsMap.getLayerById(
       item.geometry.coordinates[0][0][0]
@@ -27,8 +28,7 @@ export function allPositions(options, show) {
           }
         },
         show,
-        popup: item.name,
+        popup: item.name
-        flyTo: true
       });
       window.marsMap.addLayer(graphic);
     } else {
@@ -63,9 +63,52 @@ export function allPositions(options, show) {
         popup: item.name
       });
       window.marsMap.addLayer(graphics);
+      let position = window.mapConfig;
+      window.marsMap.setCameraView({
+        lat: position.allPositionLon,
+        lng: position.allPositionLat,
+        alt: position.allPositionAlt + 800,
+        pitch: position.allPositionPitch
+      });
     } else {
       graphics.show = show;
+      if (type === "all") {
+        let position = window.mapConfig;
+        window.marsMap.setCameraView({
+          lat: position.allPositionLon,
+          lng: position.allPositionLat,
+          alt: position.allPositionAlt + 800,
+          pitch: position.allPositionPitch
+        });
+      } else {
         graphics.flyTo();
+        console.log(value, item, "valueitem");
+
+        let graphicLayer = window.marsMap.getLayerById("center");
+        if (!graphicLayer) {
+          graphicLayer = new mars3d.layer.GraphicLayer({ id: "center" });
+          window.marsMap.addLayer(graphicLayer);
+        } else {
+          graphicLayer.clear();
+        }
+        let graphic = graphicLayer.getGraphicById(value.id);
+        if (!graphic) {
+          graphic = new mars3d.graphic.BillboardEntity({
+            id: value.id,
+            name: "中心点",
+            position: [value.lon, value.lat, 0],
+            style: {
+              image: iconimg,
+              scale: 1,
+              width: 30,
+              height: 50,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            }
+          });
+          graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
+        }
+      }
     }
     // if (item.regionModels.length !== 0) {
     //   item.regionModels.forEach((val, index) => {
@@ -80,6 +123,10 @@ export function allDevices(options, type, show) {
   } else {
     graphicLayer.clear();
   }
+
+  window.marsMap.on("morphStart", function (event) {
+    console.log("开始变换模式", event);
+  });
   if (type === "all") {
     options.forEach((item, index) => {
       if (item.devices.length !== 0) {
@@ -280,7 +327,6 @@ export function mapUavFiex(options) {
       if (item.drone_lon !== 0 || item.drone_lat !== 0) {
         let graphic = graphicLayer.getGraphicById(item.BatchId);
         // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
-
         //发现无人机
         if (!graphic) {
           // eslint-disable-next-line no-undef
@@ -294,13 +340,23 @@ export function mapUavFiex(options) {
               randomColor: true,
               show: true
             },
-            billboard: {
+            // billboard: {
-              image: require("@/assets/img/uav.svg"),
+            //   image: require("@/assets/img/uav.svg"),
-              scale: 0.5,
+            //   scale: 0.5,
-              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            // },
+            model: {
+              scale: 1,
+              url: "/uav/scene.gltf",
+              // 航向
+              heading: 0,
+              // 俯仰
+              pitch: 0,
+              // 滚转
+              roll: 0.0,
+              show: true
             },
-
             attr: item
           });
           graphicLayer.addGraphic(graphic);

src/views/mapControl/index.vue

@@ -2,6 +2,9 @@
   <div class="HomeMpa">
     <div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
     <div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
+    <div class="pointingNorth" @click="mapNorth">
+      <img src="@/assets/img/menu/shebei.png" alt="" />
+    </div>
   </div>
 </template>
 
@@ -96,6 +99,69 @@ export default {
         map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
         map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
       }
+    },
+    mapNorth() {
+      let graphicLayer = new mars3d.layer.GraphicLayer();
+      window.marsMap.addLayer(graphicLayer);
+      const fixedRoute = new mars3d.graphic.FixedRoute({
+        name: "贴地表表面漫游",
+        position: {
+          type: "time", // 时序动态坐标
+          speed: 160,
+          list: [
+            [116.043233, 30.845286, 392.48],
+            [116.046833, 30.846863, 411.33],
+            [116.052137, 30.848801, 439.45],
+            [116.060838, 30.850918, 442.91],
+            [116.069013, 30.852035, 435.14],
+            [116.18739, 30.854441, 244.53],
+            [116.205214, 30.859332, 300.96]
+          ]
+        },
+        clockLoop: false, // 是否循环播放
+        camera: {
+          type: "gs",
+          pitch: -30,
+          radius: 500
+        },
+        // model: {
+        //   show: true,
+        //   url: "https://data.mars3d.cn/gltf/mars/qiche.gltf",
+        //   scale: 0.2,
+        //   minimumPixelSize: 50
+        // },
+        model: {
+          scale: 1,
+          url: "/uav/scene.gltf",
+          heading: 90,
+          mergeOrientation: true, // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
+          minimumPixelSize: 50
+        },
+        polyline: {
+          color: "rgba(255,0,0,0.5)",
+          width: 2,
+          showAll: true
+        },
+        path: {
+          color: "rgba(255,255,0,1.0)",
+          width: 4,
+          leadTime: 0
+        }
+      });
+      graphicLayer.addGraphic(fixedRoute);
+      fixedRoute.start();
+      // 1. 获取当前视角
+      // const currentView = window.marsMap.getCameraView();
+
+      // // 2. 修改视角的heading为0（正北），保留其他参数
+      // window.marsMap.setCameraView({
+      //   lat: currentView.lat,
+      //   lng: currentView.lng,
+      //   alt: currentView.alt,
+      //   heading: 0, // 指北
+      //   pitch: currentView.pitch,
+      //   roll: currentView.roll
+      // });
     }
   }
 };
@@ -116,5 +182,11 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .pointingNorth {
+    position: absolute;
+    bottom: 5%;
+    right: 25%;
+    cursor: pointer;
+  }
 }
 </style>

src/views/menuData/DeviceDialog.vue

@@ -204,7 +204,7 @@ export default {
           model: "protocol",
           options: [],
           rules: [
-            { required: true, message: "请选择关联防区", trigger: "change" }
+            { required: true, message: "请选择设备协议", trigger: "change" }
           ]
         },
         {

src/views/menuData/PositionDialog.vue

@@ -221,7 +221,10 @@ export default {
       console.log(params, "params");
       params.regionJson = JSON.stringify(params.geoJson);
 
+      params.lon = params.center[0];
+      params.lat = params.center[1];
       this.$delete(params, "geoJson");
+      this.$delete(params, "center");
       // this.$delete(params, "imageBriefUrl");
       if (this.isType === "add") {
         //   console.log("新增");

src/views/menuData/WhitListDialog.vue

@@ -206,7 +206,7 @@ export default {
           this.paginationParam.currentPage = value.page;
           this.paginationParam.size = value.pageSize;
         }
-        params.page = this.paginationParam.currentPage;
+        params.pageNum = this.paginationParam.currentPage;
         params.pageSize = this.paginationParam.size;
         this.$delete(params, "dateRange");
         whitListList(params).then((res) => {