Skip to content

D
DA-Platform

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

Commit a736e3f3 by ren
Options

已完成任务和待审核任务中图层详情展示样式修改

parent 5e31f6ad
Showing with 419 additions and 10 deletions
DAPlatform-front/src/components/imageAnnotation/layerCheck.vue
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</div> </div>
</div> </div>
<div class="sidebar" style="position: absolute;margin-top: 140px;height: 170px;width: 300px"> <div class="sidebar" style="position: absolute;margin-top: 140px;height: 120px;width: 300px">
<div class="sidebar-box" style="height: 235px"> <div class="sidebar-box" style="height: 235px">
<div> <div>
<div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">标注描述</div> <div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">标注描述</div>
...@@ -117,7 +117,44 @@ ...@@ -117,7 +117,44 @@
<!-- <div class="sidebar" style="border-radius:0px;position: absolute;margin-top: 264px;height: 1px;width: 300px;background-color: #409eff">--> <!-- <div class="sidebar" style="border-radius:0px;position: absolute;margin-top: 264px;height: 1px;width: 300px;background-color: #409eff">-->
<!-- </div>--> <!-- </div>-->
<div class="sidebar" style="position: absolute;margin-top: 295px;width:300px;height: calc(100vh - 71px - 345px);"> <div class="sidebar" style="position: absolute;margin-top: 245px;height: 200px;width: 300px">
<div class="sidebar-box" style="height: 235px">
<div>
<div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">图层</div>
<div style="font-size:14px;margin: 5px;text-align: left">
<el-table
:data="tableData"
id="Layer"
height="150"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="序号"
width="50">
</el-table-column>
<el-table-column
fixed
prop="name"
label="名称"
width="150">
</el-table-column>
<el-table-column
fixed="right"
label="显示"
width="50">
<template slot-scope="scope">
<input type="checkbox" @click="handleShowClick(scope.$index)"/>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="sidebar" style="position: absolute;margin-top: 445px;width:300px;height: calc(100vh - 71px - 345px - 150px);">
<div class="sidebar-box"> <div class="sidebar-box">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="地标列表" name="first"> <el-tab-pane label="地标列表" name="first">
...@@ -204,6 +241,8 @@ ...@@ -204,6 +241,8 @@
</template> </template>
<script> <script>
import gcoord from "gcoord";
export default { export default {
name: 'layerCheck', name: 'layerCheck',
data () { data () {
...@@ -239,7 +278,16 @@ export default { ...@@ -239,7 +278,16 @@ export default {
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label' label: 'label'
} },
tableData: [],
layerEventMap: [],
layerNum: 0,
layerList: [],
colorList: ['blue', 'pink', 'purple', 'red',
'salmon', 'orchid', 'darkblue', 'orange',
'green', 'gray', 'darkred', 'darkgreen',
'cadetblue', 'black', 'white', 'lightblue', 'beige'],
colorIndex: 0
} }
}, },
async mounted () { async mounted () {
...@@ -297,6 +345,133 @@ export default { ...@@ -297,6 +345,133 @@ export default {
_this.height_res = document.body.clientHeight - 61 _this.height_res = document.body.clientHeight - 61
} }
this.init() this.init()
if (res.geoNames != null) {
this.layerNum = res.geoNames.length
for (var index = 0; index < this.layerNum; index++) {
this.tableData.push({id: index, name: res.geoNames[index]})
}
}
// 叠加图层
for (let index = 0; index < this.layerNum; index++) {
const geojsonList = await this.getGeoList(index)
if (geojsonList != null) {
const blob = new Blob([geojsonList])
const fileReader = new FileReader()
fileReader.readAsArrayBuffer(blob)
fileReader.onload = function () {
const shapefile = require('shapefile')
shapefile
.read(this.result)
.then(geoJson => {
let i
let lnglats
let x
const geoItem = geoJson
// 分析geojson结构
if ((typeof geoItem.features[0].geometry.coordinates[0]) === 'number') {
// 一般为点
// console.log("1");
// 判断是否是墨卡托坐标系，如果是转化为经纬度
if (geoItem.features[0].geometry.coordinates[0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
// 判断经度是否已经小于我国的最小经度，如果是，就将经度+105（中央经线），纬度+4（有问题，为解决）
if (geoItem.features[0].geometry.coordinates[0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
lnglats[0] += 105
lnglats[1] += 4
}
}
} else if ((typeof geoItem.features[0].geometry.coordinates[0][0]) === 'number') {
// 一般为线
// console.log("2");
if (geoItem.features[0].geometry.coordinates[0][0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
if (geoItem.features[0].geometry.coordinates[0][0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
for (i = 0; i < lnglats.length; i++) {
lnglats[i][0] += 105
lnglats[i][1] += 4
}
}
}
} else if ((typeof geoItem.features[0].geometry.coordinates[0][0][0]) === 'number') {
// 一般为多边形
// console.log("3");
if (geoItem.features[0].geometry.coordinates[0][0][0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
if (geoItem.features[0].geometry.coordinates[0][0][0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
for (i = 0; i < lnglats.length; i++) {
for (let j = 0; j < lnglats[i].length; j++) {
lnglats[i][j][0] += 105
lnglats[i][j][1] += 4
}
}
}
}
}
// Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection
const type = geoItem.features[0].geometry.type
let geoLayer
if (type === 'Point' || type === 'MultiPoint') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
getMarker: function (geojson, lnglats) {
return new AMap.CircleMarker({
center: lnglats, // 圆心位置
radius: 6, // 半径
strokeColor: 'white',
fillColor: _this.colorList[_this.colorIndex]
})
}
})
// colorList中有17个颜色
_this.colorIndex = (_this.colorIndex + 1) % 17
} else if (type === 'LineString' || type === 'MultiLineString') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
getPolyline: function (geojson, lnglats) {
return new AMap.Polyline({
path: lnglats,
strokeColor: _this.colorList[_this.colorIndex]
})
}
})
_this.colorIndex = (_this.colorIndex + 1) % 17
} else if (type === 'Polygon' || type === 'MultiPolygon') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
// 还可以自定义getMarker和getPolyline
getPolygon: function (geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
strokeColor: 'white',
fillColor: _this.colorList[_this.colorIndex]
})
}
})
_this.colorIndex = (_this.colorIndex + 1) % 17
} else {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem
})
}
_this.layerEventMap.push(0)
_this.layerList.push(geoLayer)
})
}
}
}
this.restore() this.restore()
}, },
beforeRouteLeave: function (to, from, next) { beforeRouteLeave: function (to, from, next) {
...@@ -453,6 +628,17 @@ export default { ...@@ -453,6 +628,17 @@ export default {
} }
}) })
}, },
handleShowClick (index) {
if (this.layerEventMap[index] === 0) {
this.map.add(this.layerList[index])
}
this.layerEventMap[index]++
if (this.layerEventMap[index] % 2 === 1) {
this.layerList[index].show()
} else {
this.layerList[index].hide()
}
},
// 点标注&区域标注跳转 // 点标注&区域标注跳转
handleClick (tab, event) { handleClick (tab, event) {
// console.log(tab, event) // console.log(tab, event)
...@@ -653,6 +839,22 @@ export default { ...@@ -653,6 +839,22 @@ export default {
/** /**
前端接口——获取图层数据 前端接口——获取图层数据
*/ */
async getGeoList (index) {
this.data = []
let relationId = this.relationId
try {
return await this.axios({
method: 'post',
url: '/layer/getGeojson',
data: {'relationId': relationId, 'index': index},
responseType: 'blob'
})
} catch (err) {
self.$store.commit('clearLayerData')
console.log(err)
alert('请求出错！')
}
},
async getLayerList () { async getLayerList () {
this.data = [] this.data = []
let params = this.getRelationId() let params = this.getRelationId()
...@@ -667,11 +869,13 @@ export default { ...@@ -667,11 +869,13 @@ export default {
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
let geoNames = res.data.geoNames
// console.log(res.data) // console.log(res.data)
// 0是标注者标注错误的，1是标注者标注正确的，2是审核者自己添加的 // 0是标注者标注错误的，1是标注者标注正确的，2是审核者自己添加的
return { return {
layerInfo: layerInfo, layerInfo: layerInfo,
landmarkList: landmarkList landmarkList: landmarkList,
geoNames: geoNames
} }
} else { } else {
self.$store.commit('clearLayerData') self.$store.commit('clearLayerData')
......
DAPlatform-front/src/components/imageAnnotation/layerShow.vue
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<!-- <el-button style="font-size: 12px;padding: 10px 20px;" class="tool-button" type="primary" @click="save()" >保存</el-button> --> <!-- <el-button style="font-size: 12px;padding: 10px 20px;" class="tool-button" type="primary" @click="save()" >保存</el-button> -->
<!-- <el-button style="font-size: 12px;padding: 10px 20px;" class="tool-button" type="primary" >退出</el-button> --> <!-- <el-button style="font-size: 12px;padding: 10px 20px;" class="tool-button" type="primary" >退出</el-button> -->
<el-button style="font-size: 12px;padding: 10px 20px;" v-if="this.$route.params.operationSign == 1" @click="commentScore = true">打分</el-button> <el-button style="font-size: 12px;padding: 10px 20px;" v-if="this.$route.params.operationSign == 1" @click="commentScore = true">打分</el-button>
<!-- <el-button style="font-size: 12px;padding: 10px 20px;" v-if="this.$route.params.operationSign == 1" @click="submit()">提交</el-button>--> <!-- <el-button style="font-size: 12px;padding: 10px 20px;" v-if="this.$route.params.operationSign == 1" @click="submit()">提交</el-button>-->
</div> </div>
</div> </div>
</div> </div>
...@@ -79,19 +79,59 @@ ...@@ -79,19 +79,59 @@
</div> </div>
</div> </div>
<div class="sidebar" style="width:300px;position: absolute;margin-top: 300px;height: calc(100vh - 71px - 350px);"> <div class="sidebar" style="position: absolute;margin-top: 245px;height: 200px;width: 300px">
<div class="sidebar-box" style="height: 235px">
<div>
<div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">图层</div>
<div style="font-size:14px;margin: 5px;text-align: left">
<el-table
:data="tableData"
id="Layer"
height="150"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="序号"
width="50">
</el-table-column>
<el-table-column
fixed
prop="name"
label="名称"
width="150">
</el-table-column>
<el-table-column
fixed="right"
label="显示"
width="50">
<template slot-scope="scope">
<input type="checkbox" @click="handleShowClick(scope.$index)"/>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="sidebar"
style="position: absolute;margin-top: 445px;width:300px;height: calc(100vh - 71px - 345px - 150px);">
<div class="sidebar-box"> <div class="sidebar-box">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="地标列表" name="first"> <el-tab-pane label="地标列表" name="first">
<div class="img-title-list-box" style="height: 205px"> <div class="img-title-list-box">
<div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()"> <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}} {{index+1}}. &nbsp; {{item.landmarkName}}
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="区域标注列表" name="second"> <el-tab-pane label="区域标注列表" name="second">
<div class="img-title-list-box"> <div class="img-title-list-box">
<div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()"> <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}} {{index+1}}. &nbsp; {{item.labelName}}
</div> </div>
</div> </div>
...@@ -149,6 +189,8 @@ ...@@ -149,6 +189,8 @@
</template> </template>
<script> <script>
import gcoord from "gcoord";
export default { export default {
name: 'layerAnnotation', name: 'layerAnnotation',
data(){ data(){
...@@ -178,6 +220,15 @@ ...@@ -178,6 +220,15 @@
children: 'children', children: 'children',
label: 'label' label: 'label'
}, },
tableData: [],
layerEventMap: [],
layerNum: 0,
layerList: [],
colorList: ['blue', 'pink', 'purple', 'red',
'salmon', 'orchid', 'darkblue', 'orange',
'green', 'gray', 'darkred', 'darkgreen',
'cadetblue', 'black', 'white', 'lightblue', 'beige'],
colorIndex: 0,
scoreForm:{ scoreForm:{
accuracy:'', accuracy:'',
score:'' score:''
...@@ -217,6 +268,131 @@ ...@@ -217,6 +268,131 @@
_this.height_res = document.body.clientHeight - 61; _this.height_res = document.body.clientHeight - 61;
} }
this.init() this.init()
if (res.geoNames != null) {
this.layerNum = res.geoNames.length
for (var index = 0; index < this.layerNum; index++) {
this.tableData.push({id: index, name: res.geoNames[index]})
}
}
// 叠加图层
for (let index = 0; index < this.layerNum; index++) {
const geojsonList = await this.getGeoList(index)
if (geojsonList != null) {
const blob = new Blob([geojsonList])
const fileReader = new FileReader()
fileReader.readAsArrayBuffer(blob)
fileReader.onload = function () {
const shapefile = require('shapefile')
shapefile
.read(this.result)
.then(geoJson => {
let i
let lnglats
let x
const geoItem = geoJson
// 分析geojson结构
if ((typeof geoItem.features[0].geometry.coordinates[0]) === 'number') {
// 一般为点
// console.log("1");
// 判断是否是墨卡托坐标系，如果是转化为经纬度
if (geoItem.features[0].geometry.coordinates[0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
// 判断经度是否已经小于我国的最小经度，如果是，就将经度+105（中央经线），纬度+4（有问题，为解决）
if (geoItem.features[0].geometry.coordinates[0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
lnglats[0] += 105
lnglats[1] += 4
}
}
} else if ((typeof geoItem.features[0].geometry.coordinates[0][0]) === 'number') {
// 一般为线
// console.log("2");
if (geoItem.features[0].geometry.coordinates[0][0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
if (geoItem.features[0].geometry.coordinates[0][0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
for (i = 0; i < lnglats.length; i++) {
lnglats[i][0] += 105
lnglats[i][1] += 4
}
}
}
} else if ((typeof geoItem.features[0].geometry.coordinates[0][0][0]) === 'number') {
// 一般为多边形
// console.log("3");
if (geoItem.features[0].geometry.coordinates[0][0][0] > 180) {
gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap)
}
if (geoItem.features[0].geometry.coordinates[0][0][0] < 73) {
for (x = 0; x < geoItem.features.length; x++) {
lnglats = geoItem.features[x].geometry.coordinates;
for (i = 0; i < lnglats.length; i++) {
for (let j = 0; j < lnglats[i].length; j++) {
lnglats[i][j][0] += 105
lnglats[i][j][1] += 4
}
}
}
}
}
// Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection
const type = geoItem.features[0].geometry.type
let geoLayer
if (type === 'Point' || type === 'MultiPoint') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
getMarker: function (geojson, lnglats) {
return new AMap.CircleMarker({
center: lnglats, // 圆心位置
radius: 6, // 半径
strokeColor: 'white',
fillColor: _this.colorList[_this.colorIndex]
})
}
})
// colorList中有17个颜色
_this.colorIndex = (_this.colorIndex + 1) % 17
} else if (type === 'LineString' || type === 'MultiLineString') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
getPolyline: function (geojson, lnglats) {
return new AMap.Polyline({
path: lnglats,
strokeColor: _this.colorList[_this.colorIndex]
})
}
})
_this.colorIndex = (_this.colorIndex + 1) % 17
} else if (type === 'Polygon' || type === 'MultiPolygon') {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem,
// 还可以自定义getMarker和getPolyline
getPolygon: function (geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
strokeColor: 'white',
fillColor: _this.colorList[_this.colorIndex]
})
}
})
_this.colorIndex = (_this.colorIndex + 1) % 17
} else {
geoLayer = new AMap.GeoJSON({
geoJSON: geoItem
})
}
_this.layerEventMap.push(0)
_this.layerList.push(geoLayer)
})
}
}
}
this.restore() this.restore()
}, },
watch: { watch: {
...@@ -298,6 +474,17 @@ ...@@ -298,6 +474,17 @@
// } // }
// }) // })
}, },
handleShowClick (index) {
if (this.layerEventMap[index] === 0) {
this.map.add(this.layerList[index])
}
this.layerEventMap[index]++
if (this.layerEventMap[index] % 2 === 1) {
this.layerList[index].show()
} else {
this.layerList[index].hide()
}
},
// 点标注&区域标注跳转 // 点标注&区域标注跳转
handleClick(tab, event) { handleClick(tab, event) {
// console.log(tab, event); // console.log(tab, event);
...@@ -499,6 +686,22 @@ ...@@ -499,6 +686,22 @@
/** /**
前端接口——获取图层数据 前端接口——获取图层数据
*/ */
async getGeoList (index) {
this.data = []
let relationId = this.relationId
try {
return await this.axios({
method: 'post',
url: '/layer/getGeojson',
data: {'relationId': relationId, 'index': index},
responseType: 'blob'
})
} catch (err) {
self.$store.commit('clearLayerData')
console.log(err)
alert('请求出错！')
}
},
async getLayerList() { async getLayerList() {
this.data = [] this.data = []
let params = this.getRelationId() let params = this.getRelationId()
...@@ -513,10 +716,12 @@ ...@@ -513,10 +716,12 @@
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
let geoNames = res.data.geoNames
// console.log(res.data) // console.log(res.data)
return { return {
layerInfo : layerInfo, layerInfo : layerInfo,
landmarkList : landmarkList landmarkList : landmarkList,
geoNames: geoNames
} }
} }
else { else {
......
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