Skip to content

D
DA-Platform

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

Commit 85e00be9 by ren
Options

点线面的shp显示（单一图层）

parent 67f0f965
Showing with 331 additions and 152 deletions
DAPlatform-front/index.html
......@@ -10,4 +10,4 @@
<!-- built files will be auto injected -->
</body>
</html>
<script src="//webapi.amap.com/maps?v=2.0&key=fd28dc34eb931d82a25869cd127005d5&plugin=AMap.MouseTool,AMap.ToolBar"></script>
<script src="//webapi.amap.com/maps?v=2.0&key=fd28dc34eb931d82a25869cd127005d5&plugin=AMap.MouseTool,AMap.ToolBar,AMap.GeoJSON"></script>
DAPlatform-front/package-lock.json
......@@ -5688,6 +5688,11 @@
"globule": "^1.0.0"
}
},
"gcoord": {
"version": "0.2.3",
"resolved": "https://registry.npm.taobao.org/gcoord/download/gcoord-0.2.3.tgz",
"integrity": "sha1-vfjUjtGZeFF36ylyfvOrFrKdiV4="
},
"get-caller-file": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
......
DAPlatform-front/package.json
......@@ -15,6 +15,7 @@
"default-passive-events": "^2.0.0",
"element-ui": "^2.13.1",
"file-saver": "^2.0.2",
"gcoord": "^0.2.3",
"jszip": "^3.5.0",
"mathjs": "^7.0.2",
"node-sass": "^4.14.1",
......
DAPlatform-front/src/components/ReleaseTask.vue
......@@ -213,11 +213,10 @@
:http-request="uploadFileL"
:data="'3:'+(index)"
:limit="7"
disabled
:on-exceed="handleExceed"
:file-list="dynamicValidateForm.layerDomains[index].fileList">
<!-- <el-button size="small" type="primary" @click="setIndex(index)">点击上传图层文件</el-button>-->
<!-- <div slot="tip" class="el-upload__tip">上传要求：kml格式文件</div>-->
<el-button size="small" type="primary" @click="setIndex(index)">点击上传图层文件</el-button>
<div slot="tip" class="el-upload__tip">上传要求：shp、kml格式文件</div>
</el-upload>
</el-col>
<el-col offset="4" span="12">
......@@ -964,7 +963,7 @@
//添加图层分片
else if(ptype == 3){
this.dynamicValidateForm.layerDomains.push({
fileList:[{name:"默认文件",url:"默认路径",size:2333}],
fileList:new Array(),
description:'',
key: Date.now()
});
......
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
<template>
<!-- <div class="layout" :style="{ height : height_res+'px'}">-->
<!-- <div class="layout" :style="{ height : height_res+'px'}">-->
<div class="layout">
<!-- 工具栏-->
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" @click="save()" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </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" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>X:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerX">-->
<!-- <a>Y:</a>-->
<!-- <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>-->
<!-- <el-radio-button label="矩形"></el-radio-button>-->
<!-- <el-radio-button label="多边形"></el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<!-- <div class="toolBar">-->
<!-- <el-button-group id="start">-->
<!-- <el-button class="tool-button" type="primary" @click="save()" >保存</el-button>-->
<!-- <el-button class="tool-button" type="primary" >退出</el-button>-->
<!-- </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" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>X:</a>-->
<!-- <input type="text" style="width: 30px" v-model="centerX">-->
<!-- <a>Y:</a>-->
<!-- <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>-->
<!-- <el-radio-button label="矩形"></el-radio-button>-->
<!-- <el-radio-button label="多边形"></el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<el-container style="margin-top: 20px;height: 100%">
<transition name="fade">
<div class = "alert1" v-show="isInfo">
<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">
<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 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;">
......@@ -42,32 +44,34 @@
</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>
<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="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<el-aside class="sidebar"
style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
<div class="sidebar-box">
<!-- <div class="tool-button-left" style="text-align: left">-->
<!-- <div style="margin-top: 5px"></div>-->
<!--&lt;!&ndash; // 改变中心点&ndash;&gt;-->
<!-- <el-button-group style="margin-right: 10px ; line-height: 30px;vertical-align: middle">-->
<!-- <el-button class="tool-button" type="primary" style="margin-right: 10px;font-size: 12px;padding: 10px 20px;" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>纬度:</a>-->
<!-- <el-input type="text" style="width: 40px;" v-model="centerX"></el-input>-->
<!-- <a>经度:</a>-->
<!-- <el-input type="text" style="width: 40px" v-model="centerY"></el-input>-->
<!-- </el-button-group>-->
<!-- <div style="margin-top: 10px"></div>-->
<!-- <el-radio-group v-model="radio1" >-->
<!-- <el-radio-button label="地标"></el-radio-button>-->
<!-- <el-radio-button label="矩形"></el-radio-button>-->
<!-- <el-radio-button label="多边形"></el-radio-button>-->
<!-- </el-radio-group>-->
<!-- <el-button @click="save()" style="font-size: 12px;padding: 10px 20px;">保存</el-button>-->
<!-- </div>-->
<!-- <div class="tool-button-left" style="text-align: left">-->
<!-- <div style="margin-top: 5px"></div>-->
<!--&lt;!&ndash; // 改变中心点&ndash;&gt;-->
<!-- <el-button-group style="margin-right: 10px ; line-height: 30px;vertical-align: middle">-->
<!-- <el-button class="tool-button" type="primary" style="margin-right: 10px;font-size: 12px;padding: 10px 20px;" @click="setCenter()">改变中心点</el-button>-->
<!-- <a>纬度:</a>-->
<!-- <el-input type="text" style="width: 40px;" v-model="centerX"></el-input>-->
<!-- <a>经度:</a>-->
<!-- <el-input type="text" style="width: 40px" v-model="centerY"></el-input>-->
<!-- </el-button-group>-->
<!-- <div style="margin-top: 10px"></div>-->
<!-- <el-radio-group v-model="radio1" >-->
<!-- <el-radio-button label="地标"></el-radio-button>-->
<!-- <el-radio-button label="矩形"></el-radio-button>-->
<!-- <el-radio-button label="多边形"></el-radio-button>-->
<!-- </el-radio-group>-->
<!-- <el-button @click="save()" style="font-size: 12px;padding: 10px 20px;">保存</el-button>-->
<!-- </div>-->
</div>
</el-aside>
......@@ -81,7 +85,9 @@
<!-- // 改变中心点-->
<div style="margin-left: 5px ; line-height: 30px;vertical-align: middle">
<el-button class="tool-button" type="primary" style="background-color:#ecf5ff;color: rgba(51, 135, 255, 0.76);
border: 1px solid #cadcee;margin-right: 10px;font-size: 12px;padding: 10px 20px;" @click="jumpByPosition(centerX,centerY)">改变中心点</el-button>
border: 1px solid #cadcee;margin-right: 10px;font-size: 12px;padding: 10px 20px;"
@click="jumpByPosition(centerX,centerY)">改变中心点
</el-button>
<a>经度:</a>
<el-input type="text" style="width: 40px;" v-model="centerX"></el-input>
<a>纬度:</a>
......@@ -90,7 +96,7 @@
<div style="margin-top: 10px"></div>
<el-radio-group v-model="radio1" style="margin-left: 5px">
<el-radio-button label="地标" ></el-radio-button>
<el-radio-button label="地标"></el-radio-button>
<el-radio-button label="矩形"></el-radio-button>
<el-radio-button label="多边形"></el-radio-button>
</el-radio-group>
......@@ -114,70 +120,74 @@
</div>
</div>
<!-- <div class="sidebar" style="border-radius:0px;position: absolute;margin-top: 264px;height: 1px;width: 300px;background-color: #409eff">-->
<!-- </div>-->
<!-- <div class="sidebar" style="border-radius:0px;position: absolute;margin-top: 264px;height: 1px;width: 300px;background-color: #409eff">-->
<!-- </div>-->
<div class="sidebar" style="position: absolute;margin-top: 295px;width:300px;height: calc(100vh - 71px - 345px);">
<div class="sidebar-box">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="地标列表" name="first">
<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}}
</div>
</div>
</el-tab-pane>
<el-tab-pane label="区域标注列表" name="second">
<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}}
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- <div>-->
<!-- <div class="img-list-title" style="display:inline-block;font-size: 14px;height: 30px;line-height: 30px;width: 100px">点标注</div>-->
<!-- <div class="img-list-title">区域标注</div>-->
<!-- <div v-show="isPoint" class="img-title-list-box" style="height: 205px">-->
<!-- <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>-->
<!-- <div v-show="!isPoint" 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()">-->
<!-- {{index+1}}. &nbsp; {{item.labelName}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="img-list-title" style="display:inline-block;font-size: 14px;height: 30px;line-height: 30px;width: 100px">点标注</div>-->
<!-- <div class="img-list-title">区域标注</div>-->
<!-- <div v-show="isPoint" class="img-title-list-box" style="height: 205px">-->
<!-- <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>-->
<!-- <div v-show="!isPoint" 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()">-->
<!-- {{index+1}}. &nbsp; {{item.labelName}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<!-- 工作台-->
<el-main class="workbench" style="width: 60%;padding: 0">
<!-- <img src="../../assets/logo.png">-->
<!-- <img src="../../assets/logo.png">-->
<div id="container">
<!-- <amap :zoom.sync="map.zoom" :center.sync="map.center">-->
<!-- <amap-marker-->
<!-- :position="[116.473179, 39.993169]"-->
<!-- :label="{ content: 'Hello, AMap-Vue!', direction: 'bottom' }"-->
<!-- @click="onMarkerClick"-->
<!-- />-->
<!-- </amap>-->
<!-- <amap :zoom.sync="map.zoom" :center.sync="map.center">-->
<!-- <amap-marker-->
<!-- :position="[116.473179, 39.993169]"-->
<!-- :label="{ content: 'Hello, AMap-Vue!', direction: 'bottom' }"-->
<!-- @click="onMarkerClick"-->
<!-- />-->
<!-- </amap>-->
</div>
<!-- <el-button-group id="buttonBar">-->
<!-- <el-button class="tool-button" type="primary" >移动图层</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 id="buttonBar">-->
<!-- <el-button class="tool-button" type="primary" >移动图层</el-button>-->
<!-- <el-button class="tool-button" type="primary" >放大</el-button>-->
<!-- <el-button class="tool-button" type="primary" >缩小</el-button>-->
<!-- </el-button-group>-->
</el-main>
</el-container>
</div>
</template>
<script>
export default {
import gcoord from 'gcoord'
export default {
name: 'layerAnnotation',
data () {
data() {
return {
activeName: 'first',
isPoint: true,
......@@ -207,7 +217,7 @@ export default {
}
}
},
async mounted () {
async mounted() {
/**
* 在整个项目中X都是经度，Y都是纬度
*/
......@@ -222,12 +232,87 @@ export default {
// console.log(res)
// 避免第一次标注时数据库中没有内容的情况
if (res.layerInfo != null) { this.layerData = res.layerInfo.labelList } else { this.layerData = [] }
if (res.layerInfo != null) {
this.layerData = res.layerInfo.labelList
} else {
this.layerData = []
}
// console.log(this.layerData)
if (res.landmarkList != null) { this.landmarkData = res.landmarkList.landmarkEntityList } else { this.landmarkData = [] }
if (res.landmarkList != null) {
this.landmarkData = res.landmarkList.landmarkEntityList
} else {
this.landmarkData = []
}
// console.log(this.landmarkData)
if (res.geoJSON != null) {
//不能直接加载，因为map此时还是Null
this.axios({
method: 'get',
url: 'https://a.amap.com/jsapi_demos/static/geojson/chongqing.json',
}).then(geoJSON => {
console.log(res.geoJSON);
// console.log(res.geoJSON.features[0].geometry.coordinates[0][0]);
//分析geojson结构
if ((typeof res.geoJSON.features[0].geometry.coordinates[0]) === 'number') {
//一般为点
// console.log("1");
//判断是否是墨卡托坐标系，如果是转化为经纬度
if (res.geoJSON.features[0].geometry.coordinates[0] > 180) {
gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
}
//判断经度是否已经小于我国的最小经度，如果是，就将经度+105（中央经线），纬度+4（有问题，为解决）
if (res.geoJSON.features[0].geometry.coordinates[0] < 73) {
for (var x = 0; x < res.geoJSON.features.length; x++) {
var lnglats = res.geoJSON.features[x].geometry.coordinates;
lnglats[0] += 105
lnglats[1] += 4
}
}
} else if ((typeof res.geoJSON.features[0].geometry.coordinates[0][0]) === 'number') {
//一般为线
// console.log("2");
if (res.geoJSON.features[0].geometry.coordinates[0][0] > 180) {
gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
}
if (res.geoJSON.features[0].geometry.coordinates[0][0] < 73) {
for (var x = 0; x < res.geoJSON.features.length; x++) {
var lnglats = res.geoJSON.features[x].geometry.coordinates;
for (var i = 0; i < lnglats.length; i++) {
lnglats[i][0] += 105
lnglats[i][1] += 4
}
}
}
} else if ((typeof res.geoJSON.features[0].geometry.coordinates[0][0][0]) === 'number') {
//一般为多边形
// console.log("3");
if (res.geoJSON.features[0].geometry.coordinates[0][0][0] > 180) {
gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
}
if (res.geoJSON.features[0].geometry.coordinates[0][0][0] < 73) {
for (var x = 0; x < res.geoJSON.features.length; x++) {
var lnglats = res.geoJSON.features[x].geometry.coordinates;
for (var i = 0; i < lnglats.length; i++) {
for (var j = 0; j < lnglats[i].length; j++) {
lnglats[i][j][0] += 105
lnglats[i][j][1] += 4
}
}
}
}
}
var geojson = new AMap.GeoJSON({
geoJSON: res.geoJSON,
})
this.map.add(geojson)
}).catch(e => {
console.log(e.toString())
})
}
this.get_height()
var _this = this
window.onresize = function () {
......@@ -250,7 +335,7 @@ export default {
}).catch(() => {
i = 1
})
}else {
} else {
this.$destroy()
next()
}
......@@ -264,7 +349,7 @@ export default {
},
watch: {
radio1: function f () {
radio1: function f() {
if (this.radio1 == '地标') {
this.mouseTool.close()
} else if (this.radio1 == '矩形') {
......@@ -279,7 +364,7 @@ export default {
}
},
methods: {
init () {
init() {
this.map = new AMap.Map('container', {
center: [116.397428, 39.90923], // 中心点坐标
resizeEnable: true,
......@@ -342,11 +427,11 @@ export default {
})
},
// 点标注&区域标注跳转
handleClick (tab, event) {
handleClick(tab, event) {
// console.log(tab, event)
},
// 删除标注
deleteLabelInList () {
deleteLabelInList() {
if (this.isMark) {
this.landmarkData.splice(this.labelNow, 1)
} else {
......@@ -358,7 +443,7 @@ export default {
this.hasSaved = false
},
// 双击显示详细信息
markInfo (index) {
markInfo(index) {
// 改变中心位置
this.setCenter('mark', this.landmarkData[index])
......@@ -369,7 +454,7 @@ export default {
this.labelName = this.landmarkData[index].landmarkName
this.labelPosition = '经度:' + this.landmarkData[index].X + '\n纬度:' + this.landmarkData[index].Y
},
areaInfo (index) {
areaInfo(index) {
// 改变中心位置
this.setCenter('polygon', this.layerData[index].pointList)
......@@ -384,7 +469,7 @@ export default {
})
},
// 鼠标移入高亮
areaEnter (index) {
areaEnter(index) {
// 还原地标
this.map.clearMap()
this.landmarkData.forEach(element => {
......@@ -422,23 +507,31 @@ export default {
})
},
// 计算多边形几何中心， 没有使用的函数
findCenter (pointList) {
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 }
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) {
markEnter(index) {
// 还原地标
this.map.clearMap()
this.landmarkData.forEach((element, i) => {
......@@ -475,7 +568,7 @@ export default {
this.map.add(polygon)
})
},
setCenter (type, pointList) {
setCenter(type, pointList) {
if (type == 'mark') {
var tmp = new AMap.Marker({
position: new AMap.LngLat(pointList.X, pointList.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
......@@ -498,7 +591,7 @@ export default {
/**
* 还原数据中的地标、标注区域
*/
restore () {
restore() {
// 还原地标
this.map.clearMap()
this.landmarkData.forEach(element => {
......@@ -528,7 +621,7 @@ export default {
/**
获取标注任务的relationID
*/
getRelationId () {
getRelationId() {
// 由于获取方法还没有确定，所以这里先使用桩
let res = {
'relationId': this.relationId
......@@ -538,7 +631,7 @@ export default {
/**
前端接口——获取图层数据
*/
async getLayerList () {
async getLayerList() {
this.data = []
let params = this.getRelationId()
try {
......@@ -552,10 +645,12 @@ export default {
if (res.code === 1) {
let layerInfo = res.data.layerInfo
let landmarkList = res.data.landmarkList
let geoJSON = res.data.geojson
// console.log(res.data)
return {
layerInfo: layerInfo,
landmarkList: landmarkList
landmarkList: landmarkList,
geoJSON: geoJSON
}
} else {
self.$store.commit('clearLayerData')
......@@ -570,20 +665,22 @@ export default {
/**
* 坐标跳转
*/
jumpByPosition (X, Y) {
jumpByPosition(X, Y) {
var position = new AMap.LngLat(X, Y)
this.map.setCenter(position)
},
/**
* 添加地标
*/
addlandmark (position) {
addlandmark(position) {
var landmarkName
this.$prompt('请输入地标名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
if (value == null) { value = '未命名' }
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
landmarkName = value
this.makelandmark(landmarkName, position)
}).catch(() => {
......@@ -594,7 +691,7 @@ export default {
/**
* 创建地标数据
*/
makelandmark (landmarkName, position) {
makelandmark(landmarkName, position) {
let currentId = this.landmarkData.length
let newlandmark = {
......@@ -619,7 +716,7 @@ export default {
/**
* 画矩形，这是高德地图的样例代码
*/
drawRectangle () {
drawRectangle() {
if (this.radio1 == '矩形') {
this.mouseTool.rectangle({
strokeColor: 'red',
......@@ -635,13 +732,15 @@ export default {
})
}
},
addRectangle (northEast, southWest) {
addRectangle(northEast, southWest) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
if (value == null) { value = '未命名' }
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
name = value
this.makeRectangle(name, northEast, southWest)
}).catch(() => {
......@@ -653,7 +752,7 @@ export default {
/**
* 创建矩形区域数据
*/
makeRectangle (labelName, northEast, southWest) {
makeRectangle(labelName, northEast, southWest) {
// X是经度，Y是纬度，应该是没错的，当初就不该叫XY的
// 右上
let p0 = {
......@@ -701,7 +800,7 @@ export default {
/**
* 画多边形，高德地图的样例代码
*/
drawPolygon () {
drawPolygon() {
this.mouseTool.polygon({
strokeColor: 'red',
strokeOpacity: 1,
......@@ -718,13 +817,15 @@ export default {
/**
* 创建多边形标签
*/
addPolygon (path) {
addPolygon(path) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
if (value == null) { value = '未命名' }
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
name = value
this.makePolygon(name, path)
}).catch(() => {
......@@ -736,7 +837,7 @@ export default {
/**
* 创建多边形数据
*/
makePolygon (labelName, path) {
makePolygon(labelName, path) {
// console.log(path)
var pointList = []
var i = 0
......@@ -763,7 +864,7 @@ export default {
this.hasSaved = false
},
// 保存数据用的接口
save () {
save() {
let outputLayerInfo = {
relationId: this.relationId,
labelList: this.layerData
......@@ -820,10 +921,10 @@ export default {
})
})
},
get_height () {
get_height() {
this.height_res = document.body.clientHeight - 61
},
changeToolBar (val) {
changeToolBar(val) {
this.activeIndex1 = val
},
/**
......@@ -847,17 +948,20 @@ export default {
})
}
}
}
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.alert1{
.alert1 {
width: 400px;
height: 350px;
background-color: white;
......@@ -872,11 +976,13 @@ export default {
padding: 10px 30px;
}
#container {
background-color: #2c3e50;
width: 100%;
height: 100%;
}
.layout {
display: flex;
flex-direction: column;
......@@ -885,10 +991,11 @@ export default {
background-color: #d9ecff;
}
.toolBar{
.toolBar {
margin-top: 20px;
margin-bottom: 20px;
}
.workbench {
/*border: 2px solid #409eff;*/
margin-left: 20px;
......@@ -904,6 +1011,7 @@ export default {
left: 50%;
bottom: 30px;
}
.sidebar {
height: 0%;
margin-left: 50px;
......@@ -912,23 +1020,27 @@ export default {
box-shadow: 0px 0px 10px #dbdbdb;
background-color: white;
}
.img-list-title{
.img-list-title {
line-height: 40px;
padding: 0 10px;
background: #409EFF;
color: white;
}
.img-title-list-box{
.img-title-list-box {
/*height: 500px;*/
height: 100%;
overflow: auto;
background-color: white;
}
.add-file-btn-group >>> button{
.add-file-btn-group >>> button {
margin-top: 3px;
margin-bottom: 3px;
}
.listLeft{
.listLeft {
background-color: white;
/*padding-top: 5px;*/
height: 24px;
......@@ -937,39 +1049,46 @@ export default {
line-height: 24px;
vertical-align: middle;
}
.listLeft:hover{
.listLeft:hover {
background-color: #cbd8ea;
}
/deep/ .el-radio-button__inner{
/deep/ .el-radio-button__inner {
font-size: 12px;
padding: 10px 20px;
}
/deep/ .el-input__inner{
/deep/ .el-input__inner {
font-size: 12px;
height: 34px;
line-height: 34px;
padding: 0px 3px;
}
/deep/ .el-tabs__header{
/deep/ .el-tabs__header {
margin: 0px 0px 5px;
}
/deep/ .el-tabs__item{
/deep/ .el-tabs__item {
height: 35px;
line-height: 35px;
font-size: 14px;
}
/deep/ .el-tabs__nav-scroll{
/deep/ .el-tabs__nav-scroll {
background-color: #409EFF;
}
/deep/ .el-tabs__item.is-active{
/deep/ .el-tabs__item.is-active {
background-color: #409EFF;
color: white;
/*border-bottom: 5px solid #409EFF;*/
}
/deep/ .el-tabs__item{
/deep/ .el-tabs__item {
background-color: white;
color: #409EFF;
width: 150px;
......@@ -977,24 +1096,26 @@ export default {
border-bottom: 1px solid #409EFF;
border-top: 1px solid #409EFF;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
transition: color 0s ease;
-webkit-transition: color 0s ease;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav{
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 0;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #409EFF;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
border-bottom-color: #409EFF;
}
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
background-color:#ecf5ff;
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #ecf5ff;
color: rgba(51, 135, 255, 0.76);
border: 1px solid #cadcee;
}
......
DAPlatform/dao/Image.py
......@@ -9,6 +9,8 @@ import PIL.Image
import PIL.ImageDraw
from flask_mongoengine import MongoEngine
import dao.Data as Data
import dao.Relation as Relation
import views.uploadDownload as fileDownload
db = MongoEngine()
......@@ -474,6 +476,15 @@ def saveImage(image_list):
traceback.print_exc()
return Result(0, repr(e), {})
#获取每一个图层分片下的所有shp文件的URL
#参数暂且有问题
def retURLList(relation_id):
slice_id = Relation.find_slice_by_id(relation_id)
datalist = Data.find_data_by_slice(slice_id).data
urlList = []
for data in datalist:
urlList.append(data['url'])
return urlList
# 获取图层
def getLayer(relation_id):
......
DAPlatform/dao/Relation.py
......@@ -30,6 +30,15 @@ class Relation(Model):
database = mysql
def find_slice_by_id(relation_id):
try:
slice_id = Relation.get(Relation.relation_id == relation_id).slice_id
except:
return False
else:
return slice_id
# 创建标注关系
def create_relation(slice_id, user_id, data_id):
try:
......
DAPlatform/views/imageAnnotation.py
......@@ -2,13 +2,23 @@ import json
import io
import traceback
import zipfile
import os
import shapefile
from support import basedir
from flask import Blueprint, request, make_response, send_file
from dao import Image, Relation
UPLOAD_FOLDER = 'upload' # 用于保存上传文件的文件夹名称
image = Blueprint("image", __name__, url_prefix="/api")
class Result:
def __init__(self, code, message, data):
self.code = code
self.message = message
self.data = data
def handle_except(result):
res = {
'code': result.code,
......@@ -48,14 +58,37 @@ def save_image():
return json.dumps(res, ensure_ascii=False)
# 获取图层中的每一个shp文件
def retGeoJson(relationId):
urlList = Image.retURLList(relationId)
for url in urlList:
file_dir = os.path.join(basedir, UPLOAD_FOLDER, url)
print(file_dir)
shp = shapefile.Reader(file_dir)
fields = shp.fields[1:]
field_names = [field[0] for field in fields]
buffer = []
for sr in shp.shapeRecords():
atr = dict(zip(field_names, sr.record))
geom = sr.shape.__geo_interface__
buffer.append(dict(type="Feature", geometry=geom, properties=atr))
return {"type": "FeatureCollection", "features": buffer}
# 获取图层
@image.route("/layer/getLayer", methods=["POST"])
def get_layer():
data = json.loads(request.data.decode('utf-8'))
relation_list = data['relationId']
layer = Image.getLayer(relation_list)
return handle_except(layer)
resLayer = Image.getLayer(relation_list)
geojson = retGeoJson(relation_list)
layer = resLayer.data
resdata = {
'geojson': geojson,
'layerInfo': layer['layerInfo'],
'landmarkList': layer['landmarkList'],
}
res = Result(resLayer.code, resLayer.message, resdata)
return handle_except(res)
# 保存图层标注结果
......
DAPlatform/views/uploadDownload.py
......@@ -22,7 +22,7 @@ from views.textAnnotation import collectionTest
uploadDownload = Blueprint("uploadDownload", __name__, url_prefix="/api/files")
UPLOAD_FOLDER = 'upload' # 用于保存上传文件的文件夹名称
ZIP_FOLDER = 'zip' # 用于保存zip文件的文件夹名称
ALLOWED_EXTENSIONS = {'txt', 'json', 'xlsx', 'png', 'jpg', 'jpeg', 'kml', 'gif'} # 允许上传的文件格式
ALLOWED_EXTENSIONS = {'txt', 'json', 'xlsx', 'png', 'jpg', 'jpeg', 'kml', 'gif', 'shp', 'dbf'} # 允许上传的文件格式
# 用于判断文件后缀
......
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