Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit a42ed46c by 李梓桢
Options

layer前后端对接完成

parent 85055338
Showing with 82 additions and 75 deletions
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<!-- 工具栏--> <!-- 工具栏-->
<div class="toolBar"> <div class="toolBar">
<el-button-group id="start"> <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 class="tool-button" type="primary" >退出</el-button>
</el-button-group> </el-button-group>
...@@ -33,8 +33,8 @@ ...@@ -33,8 +33,8 @@
<div> <div>
<div class="img-list-title">点标注</div> <div class="img-list-title">点标注</div>
<div class="img-title-list-box" style="height: calc(32vh - 40px)"> <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()"> <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}} {{index+1}}. &nbsp; {{item.landmarkName}}
</div> </div>
</div> </div>
</div> </div>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
radio1: '建立地标', radio1: '建立地标',
activeIndex1:1, activeIndex1:1,
layerData: null, //layerdata存放标注数据 layerData: null, //layerdata存放标注数据
landMarkData: null,//存放地标数据 landmarkData: null,//存放地标数据
relationId: null,//当前任务的relationID relationId: null,//当前任务的relationID
clickedPosition: null,//保存最新一次点击的结果，没有使用 clickedPosition: null,//保存最新一次点击的结果，没有使用
map: null, map: null,
...@@ -104,12 +104,12 @@ ...@@ -104,12 +104,12 @@
*/ */
let res = await this.getLayerList() let res = await this.getLayerList()
console.log(res) console.log(res)
this.layerData = res.layerInfo[0].labelList this.layerData = res.layerInfo.labelList
console.log(this.layerData) console.log(this.layerData)
this.landMarkData = res.landMarkList[0].landmarkEntityList this.landmarkData = res.landmarkList.landmarkEntityList
console.log(this.landMarkData) console.log(this.landmarkData)
if (res.layerInfo[0].relationId == res.landMarkList[0].relationId) if (res.layerInfo.relationId == res.landmarkList.relationId)
this.relationId = res.landMarkList[0].relationId this.relationId = res.landmarkList.relationId
else else
console.log("relationId不一致，出问题了") console.log("relationId不一致，出问题了")
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
console.log(_this.clickedPosition) console.log(_this.clickedPosition)
if (_this.radio1 == '建立地标') { if (_this.radio1 == '建立地标') {
_this.addLandMark(value) _this.addlandmark(value)
}else if (_this.radio1 == '矩形标注') { }else if (_this.radio1 == '矩形标注') {
//_this.drawRectangle() //_this.drawRectangle()
}else if (_this.radio1 == '多边形标注') { }else if (_this.radio1 == '多边形标注') {
...@@ -207,10 +207,10 @@ ...@@ -207,10 +207,10 @@
*/ */
restore() { restore() {
//还原地标 //还原地标
this.landMarkData.forEach(element => { this.landmarkData.forEach(element => {
var marker = new AMap.Marker({ var marker = new AMap.Marker({
position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: element.landMarkName title: element.landmarkName
}) })
this.map.add(marker) this.map.add(marker)
}) })
...@@ -258,11 +258,11 @@ ...@@ -258,11 +258,11 @@
if (res.code === 1) { if (res.code === 1) {
let layerInfo = res.data.layerInfo let layerInfo = res.data.layerInfo
let landMarkList = res.data.landMarkList let landmarkList = res.data.landmarkList
console.log(res.data) console.log(res.data)
return { return {
layerInfo : layerInfo, layerInfo : layerInfo,
landMarkList : landMarkList landmarkList : landmarkList
} }
} }
else { else {
...@@ -286,40 +286,40 @@ ...@@ -286,40 +286,40 @@
/** /**
* 添加地标 * 添加地标
*/ */
addLandMark(position){ addlandmark(position){
var landMarkName var landmarkName
this.$prompt('请输入地标名称', '提示', { this.$prompt('请输入地标名称', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消' cancelButtonText: '取消'
}).then(({ value }) => { }).then(({ value }) => {
if (value == null) if (value == null)
value = 'iss' value = 'iss'
landMarkName = value landmarkName = value
this.makeLandMark(landMarkName, position) this.makelandmark(landmarkName, position)
}).catch(() => { }).catch(() => {
landMarkName = 'iss' landmarkName = 'iss'
this.makeLandMark(landMarkName, position) this.makelandmark(landmarkName, position)
}) })
}, },
/** /**
* 创建地标数据 * 创建地标数据
*/ */
makeLandMark(landMarkName, position) { makelandmark(landmarkName, position) {
let currentId = this.landMarkData.length let currentId = this.landmarkData.length
let newLandMark = { let newlandmark = {
X : position.X, X : position.X,
Y : position.Y, Y : position.Y,
landMarkId : currentId, landmarkId : currentId,
landMarkName : landMarkName landmarkName : landmarkName
} }
this.landMarkData.push(newLandMark) this.landmarkData.push(newlandmark)
console.log(this.landMarkData) console.log(this.landmarkData)
//在图层上显示 //在图层上显示
var marker = new AMap.Marker({ var marker = new AMap.Marker({
position: new AMap.LngLat(newLandMark.X, newLandMark.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] position: new AMap.LngLat(newlandmark.X, newlandmark.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: newLandMark.landMarkName title: newlandmark.landmarkName
}); });
this.map.add(marker) this.map.add(marker)
}, },
...@@ -462,18 +462,25 @@ ...@@ -462,18 +462,25 @@
}, },
// 保存数据用的接口 // 保存数据用的接口
save() { save() {
/**
* 使用时需要修改 let outputLayerInfo = {
*/ relationId : this.relationId,
labelList : this.layerData
}
let outputlandmarkInfo = {
relationId : this.relationId ,
landmarkEntityList : this.landmarkData
}
console.log("outputdata") console.log("outputdata")
console.log(this.layerData) console.log(outputlandmarkInfo)
console.log(outputLayerInfo)
this.axios({ this.axios({
method: 'post', method: 'post',
url: '/layer/saveLayer', url: '/layer/saveLayer',
data: { data: {
layerInfo: this.layerData, layerInfo: outputLayerInfo,
landMarkList: this.landMarkData landmarkInfo: outputlandmarkInfo
} }
}).then(res => { }).then(res => {
console.log(res) console.log(res)
......
DAPlatform-front/src/mock/api.js
...@@ -48,46 +48,46 @@ Mock.mock('http://localhost:9100/api/image/getImage', { ...@@ -48,46 +48,46 @@ Mock.mock('http://localhost:9100/api/image/getImage', {
} }
}) })
Mock.mock('http://localhost:9100/api/layer/getLayer', { // Mock.mock('http://localhost:9100/api/layer/getLayer', {
code: 1, // code: 1,
data: { // data: {
'layerInfo': [{ // 'layerInfo': {
'relationId': 123, // 这里的关系ID和地标的关系ID应该是一样的 // 'relationId': 123, // 这里的关系ID和地标的关系ID应该是一样的
'labelList': [{ // 'labelList': [{
'labelId': 0, // 'labelId': 0,
'labelName': 'label1', // 'labelName': 'label1',
'pointList': [{ // 'pointList': [{
'pointId': 0, // 'pointId': 0,
'X': 116.403322, // 'X': 116.403322,
'Y': 39.920255 // 'Y': 39.920255
}, { // }, {
'pointId': 1, // 'pointId': 1,
'X': 116.410703, // 'X': 116.410703,
'Y': 39.897555 // 'Y': 39.897555
}, { // }, {
'pointId': 2, // 'pointId': 2,
'X': 116.402292, // 'X': 116.402292,
'Y': 39.892353 // 'Y': 39.892353
}, { // }, {
'pointId': 3, // 'pointId': 3,
'X': 116.389846, // 'X': 116.389846,
'Y': 39.891365 // 'Y': 39.891365
}] // }]
}] // }]
}], // },
// 这是没有地标的情况 // // 这是没有地标的情况
// "landMarkList": [] // // "landmarkList": []
'landMarkList': [{ // 'landmarkList': {
'relationId': 123, // 'relationId': 123,
'landmarkEntityList': [{ // 'landmarkEntityList': [{
'landMarkId': 0, // 'landmarkId': 0,
'landMarkName': '北京', // 'landmarkName': '北京',
'X': 116.39, // 'X': 116.39,
'Y': 39.9 // 'Y': 39.9
}] // }]
}] // }
} // }
}) // })
// Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, { // Mock.mock(/http:\/\/localhost:9100\/api\/getPieces\?id=[0-9]+/, {
// 'status': 0, // 'status': 0,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment