Skip to content

D
DA-Platform

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

Commit b185d9ba by 张欣玥
Options

layer功能完善

parent 3f853f6b
Showing with 161 additions and 6 deletions
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
......@@ -9,11 +9,11 @@
</el-button-group>
<el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">
<el-button class="tool-button" type="primary" style="margin-right: 10px">飞入坐标点</el-button>
<el-button class="tool-button" type="primary" style="margin-right: 10px" @click="setCenter()">改变中心点</el-button>
<a>X:</a>
<input type="text" style="width: 30px">
<input type="text" style="width: 30px" v-model="centerX">
<a>Y:</a>
<input type="text" style="width: 30px">
<input type="text" style="width: 30px" v-model="centerY">
</el-button-group>
<el-radio-group v-model="radio1">
<el-radio-button label="建立地标"></el-radio-button>
......@@ -23,6 +23,27 @@
</div>
<el-container>
<transition name="fade">
<div class = "alert1" v-show="isInfo">
<div style="flex: 1;display: flex;align-items:center;font-size: 25px">标注</div>
<div style="flex: 1;display: flex;align-items:center;">
<div style="flex: 1;justify-content: left;display: flex;">标注名称</div>
<input disabled="true" readOnly="true" :placeholder="labelName" style="flex: 3;height: 20px;border: #d4d4d4 solid 1px">
</div>
<div style="flex: 2.5;display: flex;align-items: flex-start;">
<div style="flex: 1;justify-content: left;display: flex;">标注坐标</div>
<textarea disabled="true" readOnly="true" :placeholder="labelPosition" style="flex: 3;;height: 130px;border: #d4d4d4 solid 1px">
</textarea>
</div>
<div style="flex: 1;display: flex;justify-content: flex-end;align-items:center;">
<el-button @click="isInfo = false">取消</el-button>
<el-button @click="deleteLabelInList()">删除</el-button>
</div>
</div>
</transition>
<transition name="fade">
<div v-show="isInfo" style="z-index:4000;position: fixed;background-color: rgba(0,0,0,0.42);width: 100%;height: 100%;top: 0;left: 0"></div>
</transition>
<!-- 侧边栏-->
<el-aside class="sidebar" style="">
......@@ -33,7 +54,7 @@
<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()">
<div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()">
{{index+1}}. &nbsp; {{item.landmarkName}}
</div>
</div>
......@@ -46,7 +67,7 @@
<div>
<div class="img-list-title">区域标注</div>
<div class="img-title-list-box">
<div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="labelInfo(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
<div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">
{{index+1}}. &nbsp; {{item.labelName}}
</div>
</div>
......@@ -81,6 +102,13 @@
name: 'layerAnnotation',
data(){
return{
centerX: 0,
centerY: 0,
labelNow: 0,
labelName: '111',
labelPosition: '',
isMark: false,
isInfo: false,
height_res:0,
Xpoint: 0,
Ypoint: 0,
......@@ -149,7 +177,6 @@
this.mouseTool = new AMap.MouseTool(this.map);
var layer1 = new AMap.TileLayer.Satellite();
var layer2 = new AMap.TileLayer.RoadNet();
var layers = [
......@@ -202,11 +229,121 @@
}
})
},
// 删除标注
deleteLabelInList () {
if(this.isMark) {
this.landmarkData.splice(this.labelNow,1)
} else {
this.layerData.splice(this.labelNow,1)
}
this.restore()
this.isInfo = false
},
// 双击显示详细信息
markInfo (index) {
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
},
areaInfo (index) {
this.isMark = false
this.labelNow = index
this.isInfo = true
this.labelName = this.layerData[index].labelName
this.labelPosition = ''
this.layerData[index].pointList.forEach((element,i) => {
let tmp = i + 1
this.labelPosition = this.labelPosition + '坐标' + tmp + ':[' + element.X +',' + element.Y +']\n'
})
},
// 鼠标移入高亮
areaEnter (index) {
//还原地标
this.map.clearMap()
this.landmarkData.forEach(element => {
var marker = new AMap.Marker({
position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: element.landmarkName
})
this.map.add(marker)
})
//还原标注区域
this.layerData.forEach((element,i) => {
var path = []
element.pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
});
if(i == index) {
var polygon = new AMap.Polygon({
path: path,
fillColor: 'rgba(51,135,255,0.36)', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
});
} else{
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
});
}
this.map.add(polygon)
})
},
markEnter (index) {
//还原地标
this.map.clearMap()
this.landmarkData.forEach((element, i) => {
if(i == index){
var marker = new AMap.Marker({
position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// offset: new AMap.Pixel(-13, -30),
title: element.landmarkName
})
} else{
var marker = new AMap.Marker({
position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: element.landmarkName
})
}
this.map.add(marker)
})
//还原标注区域
this.layerData.forEach(element => {
var path = []
element.pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
});
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
});
this.map.add(polygon)
})
},
setCenter () {
this.map.setCenter([this.centerX, this.centerY])
},
/**
* 还原数据中的地标、标注区域
*/
restore() {
//还原地标
this.map.clearMap()
this.landmarkData.forEach(element => {
var marker = new AMap.Marker({
position: new AMap.LngLat(element.X, element.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
......@@ -399,6 +536,7 @@
}
this.layerData.push(newLabel)
console.log(this.layerData)
this.restore()
},
/**
* 画多边形，高德地图的样例代码
......@@ -459,6 +597,8 @@
}
this.layerData.push(newLabel)
console.log(this.layerData)
this.restore()
},
// 保存数据用的接口
save() {
......@@ -548,6 +688,21 @@
</script>
<style scoped>
.alert1{
width: 400px;
height: 350px;
background-color: white;
position: fixed;
left: calc(50% - 200px);
top: calc(50% - 175px);
z-index: 5000;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 10px 30px;
}
#container {
background-color: #2c3e50;
width: 100%;
......
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