image

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

@@ -185,16 +185,16 @@ export default {
   },
   async mounted () {
     let routeParams = this.$route.params
-    console.log("routeParams")
-    console.log(routeParams)
+    // console.log("routeParams")
+    // console.log(routeParams)
     this.imageName = routeParams.file.url
     this.relationId = routeParams.relationId
     this.description = routeParams.piece.template
-    console.log(this.baseURL)
+    // console.log(this.baseURL)
     let baseURL = this.baseURL
     // 获取图片列表并转换格式
     let imageList = await this.getLabelList()
-    console.log(imageList)
+    // console.log(imageList)
     this.imageList = imageList.imageList
 
     // 加载第一张图片
@@ -202,17 +202,17 @@ export default {
     // var imgUrl = this.data.length ? this.data[0].imageUrl : 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200627155321.png'
     // 这个是现在使用的代码
     var imgUrl = baseURL + '/files/getImage/' + this.imageName
-    console.log(imgUrl)
+    // console.log(imgUrl)
     // 如果不使用后端可以用这个模拟
     // var imgUrl = 'https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png'
     this.imageUrl = imgUrl
 
     // 把这个函数放在后面是因为formExchange中可能会用到this.imageUrl
-    console.log('input')
-    console.log(this.imageList)
+    // console.log('input')
+    // console.log(this.imageList)
     this.formExchange(this.imageList)
-    console.log('output')
-    console.log(this.data)
+    // console.log('output')
+    // console.log(this.data)
 
     console.log(this.data.length + ' 图片张数')
     var img = new Image()
@@ -265,7 +265,7 @@ export default {
 
       // 还原数据库里的标注记录
       let id = _this.pictureId
-      console.log('id = ' + id)
+      // console.log('id = ' + id)
       _this.data.forEach(function (element, index) {
         var indexPic = index
 
@@ -274,8 +274,8 @@ export default {
           // console.log(element)
           var num = []
           element.pointList.forEach(function (element1) {
-            console.log('pointlist')
-            console.log(element1)
+            // console.log('pointlist')
+            // console.log(element1)
             num.push(element1.X)
             num.push(element1.Y)
           })
@@ -284,7 +284,7 @@ export default {
           // var rx = element.pointList[1].X
           // var ry = element.pointList[1].Y
           // var num = [r1, r2, rx, ry]
-          console.log(num)
+          // console.log(num)
           _this.canvasAll[indexPic].push(num)
         })
       })
@@ -760,7 +760,7 @@ export default {
           let imageList = res.data
           // console.log(imageList.imageList[0].imageUrl)
           // self.$store.commit('setImageData', imageList.imageList)
-          console.log(imageList)
+          // console.log(imageList)
           return imageList
         } else {
           // self.$store.commit('clearImageData')
@@ -774,8 +774,8 @@ export default {
     },
     // 将数据库保存的数据格式转换为前端可以直接使用的格式，同时如果第一次标注该图片，会生成新数据
     formExchange (inputData) {
-      console.log('formexchange')
-      console.log(inputData)
+      // console.log('formexchange')
+      // console.log(inputData)
       if (inputData.length > 0) {
         var index = 0
         inputData.forEach(element => {
@@ -797,8 +797,8 @@ export default {
           children: []
         }
         this.data.push(newData)
-        console.log('formexchange')
-        console.log(this.data)
+        // console.log('formexchange')
+        // console.log(this.data)
         //imageNum这个虽然没啥用，但是先放着吧
         this.imageNum = 1
       }
@@ -1071,20 +1071,20 @@ export default {
           this.$alert('保存成功', '保存成功', {
             confirmButtonText: '确定',
             callback: action => {
-              this.$message({
-                type: 'info',
-                message: `action: ${action}`
-              })
+              // this.$message({
+              //   type: 'info',
+              //   //message: `action: ${action}`
+              // })
             }
           })
         } else {
           this.$alert('保存失败', '保存失败', {
             confirmButtonText: '确定',
             callback: action => {
-              this.$message({
-                type: 'info',
-                message: `action: ${action}`
-              })
+              // this.$message({
+              //   type: 'info',
+              //   message: `action: ${action}`
+              // })
             }
           })
         }
@@ -1092,10 +1092,10 @@ export default {
         this.$alert('保存失败', '保存失败', {
           confirmButtonText: '确定',
           callback: action => {
-            this.$message({
-              type: 'info',
-              message: `action: ${action}`
-            })
+            // this.$message({
+            //   type: 'info',
+            //   message: `action: ${action}`
+            // })
           }
         })
       })

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

@@ -305,15 +305,19 @@
       },
       // 双击显示详细信息
       markInfo (index) {
+        // 改变中心位置
+        this.jumpByPosition(this.landmarkData[index].X, this.landmarkData[index].Y)
+
         this.isMark = true
         this.labelNow = index
         this.isInfo = true
 
         this.labelName = this.landmarkData[index].landmarkName
-        this.labelPosition = 'X:' + this.landmarkData[index].X + '\nY:' + this.landmarkData[index].Y
+        this.labelPosition = '经度:' + this.landmarkData[index].X + '\n纬度:' + this.landmarkData[index].Y
 
       },
       areaInfo (index) {
+        this.findCenter(this.layerData[index].pointList)
         this.isMark = false
         this.labelNow = index
         this.isInfo = true
@@ -362,6 +366,27 @@
           this.map.add(polygon)
         })
       },
+      // 计算多边形几何中心
+      findCenter(pointList){
+        var minX = 1000
+        var minY = 1000
+        var maxX = -1000
+        var maxY = -1000
+        pointList.forEach((element, i) => {
+          if (element.X < minX)
+            minX = element.X
+          if (element.X > maxX)
+            maxX = element.X
+          if (element.Y < minY)
+            minY = element.Y
+          if (element.Y > maxY)
+            maxY = element.Y
+        })
+        let midX = (minX + maxX)/ 2
+        let midY = (minY + maxY)/ 2
+        this.jumpByPosition(midX, midY)
+      },
+
       markEnter (index) {
         //还原地标
         this.map.clearMap()
@@ -692,20 +717,20 @@
             this.$alert('保存成功', '保存成功', {
               confirmButtonText: '确定',
               callback: action => {
-                this.$message({
-                  type: 'info',
-                  message: `action: ${ action }`
-                });
+                // this.$message({
+                //   type: 'info',
+                //   message: `action: ${ action }`
+                // });
               }
             });
           } else {
             this.$alert('保存失败', '保存失败', {
               confirmButtonText: '确定',
               callback: action => {
-                this.$message({
-                  type: 'info',
-                  message: `action: ${ action }`
-                });
+                // this.$message({
+                //   type: 'info',
+                //   message: `action: ${ action }`
+                // });
               }
             });
           }
@@ -713,10 +738,10 @@
           this.$alert('保存失败', '保存失败', {
             confirmButtonText: '确定',
             callback: action => {
-              this.$message({
-                type: 'info',
-                message: `action: ${ action }`
-              });
+              // this.$message({
+              //   type: 'info',
+              //   message: `action: ${ action }`
+              // });
             }
           });
         })