layer前后端对接完成

DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue

@@ -4,7 +4,7 @@
     <!--    工具栏-->
     <div class="toolBar">
       <el-button-group id="start">
-        <el-button class="tool-button" type="primary" >保存</el-button>
+        <el-button class="tool-button" type="primary" @click="save()" >保存</el-button>
         <el-button class="tool-button" type="primary" >退出</el-button>
 
       </el-button-group>
@@ -33,8 +33,8 @@
           <div>
             <div class="img-list-title">点标注</div>
             <div class="img-title-list-box" style="height: calc(32vh - 40px)">
-              <div v-for="(item, index) in landMarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="labelInfo(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
-                {{index+1}}. &nbsp; {{item.landMarkName}}
+              <div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="labelInfo(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
+                {{index+1}}. &nbsp; {{item.landmarkName}}
               </div>
             </div>
           </div>
@@ -87,7 +87,7 @@
         radio1: '建立地标',
         activeIndex1:1,
         layerData: null, //layerdata存放标注数据
-        landMarkData: null,//存放地标数据
+        landmarkData: null,//存放地标数据
         relationId: null,//当前任务的relationID
         clickedPosition: null,//保存最新一次点击的结果，没有使用
         map: null,
@@ -104,12 +104,12 @@
        */
       let res = await this.getLayerList()
       console.log(res)
-      this.layerData = res.layerInfo[0].labelList
+      this.layerData = res.layerInfo.labelList
       console.log(this.layerData)
-      this.landMarkData = res.landMarkList[0].landmarkEntityList
-      console.log(this.landMarkData)
-      if (res.layerInfo[0].relationId == res.landMarkList[0].relationId)
-        this.relationId = res.landMarkList[0].relationId
+      this.landmarkData = res.landmarkList.landmarkEntityList
+      console.log(this.landmarkData)
+      if (res.layerInfo.relationId == res.landmarkList.relationId)
+        this.relationId = res.landmarkList.relationId
       else
         console.log("relationId不一致，出问题了")
 
@@ -168,7 +168,7 @@
           console.log(_this.clickedPosition)
 
           if (_this.radio1 == '建立地标') {
-            _this.addLandMark(value)
+            _this.addlandmark(value)
           }else if (_this.radio1 == '矩形标注') {
             //_this.drawRectangle()
           }else if (_this.radio1 == '多边形标注') {
@@ -207,10 +207,10 @@
        */
       restore() {
         //还原地标
-        this.landMarkData.forEach(element => {
+        this.landmarkData.forEach(element => {
           var marker = new AMap.Marker({
             position: new AMap.LngLat(element.X, element.Y),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-            title: element.landMarkName
+            title: element.landmarkName
           })
           this.map.add(marker)
         })
@@ -258,11 +258,11 @@
 
           if (res.code === 1) {
             let layerInfo = res.data.layerInfo
-            let landMarkList = res.data.landMarkList
+            let landmarkList = res.data.landmarkList
             console.log(res.data)
             return {
               layerInfo : layerInfo,
-              landMarkList : landMarkList
+              landmarkList : landmarkList
             }
           }
           else {
@@ -286,40 +286,40 @@
       /**
        *  添加地标
        */
-      addLandMark(position){
-        var landMarkName
+      addlandmark(position){
+        var landmarkName
         this.$prompt('请输入地标名称', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消'
         }).then(({ value }) => {
           if (value == null)
             value = 'iss'
-          landMarkName = value
-          this.makeLandMark(landMarkName, position)
+          landmarkName = value
+          this.makelandmark(landmarkName, position)
         }).catch(() => {
-          landMarkName = 'iss'
-          this.makeLandMark(landMarkName, position)
+          landmarkName = 'iss'
+          this.makelandmark(landmarkName, position)
         })
       },
       /**
        * 创建地标数据
        */
-      makeLandMark(landMarkName, position) {
-        let currentId = this.landMarkData.length
+      makelandmark(landmarkName, position) {
+        let currentId = this.landmarkData.length
 
-        let newLandMark = {
+        let newlandmark = {
           X : position.X,
           Y : position.Y,
-          landMarkId : currentId,
-          landMarkName : landMarkName
+          landmarkId : currentId,
+          landmarkName : landmarkName
         }
-        this.landMarkData.push(newLandMark)
-        console.log(this.landMarkData)
+        this.landmarkData.push(newlandmark)
+        console.log(this.landmarkData)
 
         //在图层上显示
         var marker = new AMap.Marker({
-          position: new AMap.LngLat(newLandMark.X, newLandMark.Y),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          title: newLandMark.landMarkName
+          position: new AMap.LngLat(newlandmark.X, newlandmark.Y),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          title: newlandmark.landmarkName
         });
         this.map.add(marker)
       },
@@ -462,18 +462,25 @@
       },
       // 保存数据用的接口
       save() {
-        /**
-         * 使用时需要修改
-         */
+        
+        let outputLayerInfo = {
+          relationId : this.relationId,
+          labelList : this.layerData
+        }
+        let outputlandmarkInfo = {
+          relationId : this.relationId ,
+          landmarkEntityList : this.landmarkData
+        }
         console.log("outputdata")
-        console.log(this.layerData)
+        console.log(outputlandmarkInfo)
+        console.log(outputLayerInfo)
 
         this.axios({
           method: 'post',
           url: '/layer/saveLayer',
           data: {
-            layerInfo: this.layerData,
-            landMarkList: this.landMarkData
+            layerInfo: outputLayerInfo,
+            landmarkInfo: outputlandmarkInfo
           }
         }).then(res => {
           console.log(res)

DAPlatform-front/src/mock/api.js

@@ -48,46 +48,46 @@ Mock.mock('http://localhost:9100/api/image/getImage', {
   }
 })
 
-Mock.mock('http://localhost:9100/api/layer/getLayer', {
-  code: 1,
-  data: {
-    'layerInfo': [{
-      'relationId': 123, // 这里的关系ID和地标的关系ID应该是一样的
-      'labelList': [{
-        'labelId': 0,
-        'labelName': 'label1',
-        'pointList': [{
-          'pointId': 0,
-          'X': 116.403322,
-          'Y': 39.920255
-        }, {
-          'pointId': 1,
-          'X': 116.410703,
-          'Y': 39.897555
-        }, {
-          'pointId': 2,
-          'X': 116.402292,
-          'Y': 39.892353
-        }, {
-          'pointId': 3,
-          'X': 116.389846,
-          'Y': 39.891365
-        }]
-      }]
-    }],
-    // 这是没有地标的情况
-    // "landMarkList": []
-    'landMarkList': [{
-      'relationId': 123,
-      'landmarkEntityList': [{
-        'landMarkId': 0,
-        'landMarkName': '北京',
-        'X': 116.39,
-        'Y': 39.9
-      }]
-    }]
-  }
-})
+// Mock.mock('http://localhost:9100/api/layer/getLayer', {
+//   code: 1,
+//   data: {
+//     'layerInfo': {
+//       'relationId': 123, // 这里的关系ID和地标的关系ID应该是一样的
+//       'labelList': [{
+//         'labelId': 0,
+//         'labelName': 'label1',
+//         'pointList': [{
+//           'pointId': 0,
+//           'X': 116.403322,
+//           'Y': 39.920255
+//         }, {
+//           'pointId': 1,
+//           'X': 116.410703,
+//           'Y': 39.897555
+//         }, {
+//           'pointId': 2,
+//           'X': 116.402292,
+//           'Y': 39.892353
+//         }, {
+//           'pointId': 3,
+//           'X': 116.389846,
+//           'Y': 39.891365
+//         }]
+//       }]
+//     },
+//     // 这是没有地标的情况
+//     // "landmarkList": []
+//     'landmarkList': {
+//       'relationId': 123,
+//       'landmarkEntityList': [{
+//         'landmarkId': 0,
+//         'landmarkName': '北京',
+//         'X': 116.39,
+//         'Y': 39.9
+//       }]
+//     }
+//   }
+// })
 
 // Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
 //   'status': 0,