Skip to content

D
DA-Platform

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

Commit 8cac7d6a by ren
Options

修改上传文件的bug

parent e89de876
Showing with 903 additions and 795 deletions
DAPlatform-front/package-lock.json
......@@ -376,6 +376,11 @@
"is-string": "^1.0.5"
}
},
"array-source": {
"version": "0.0.4",
"resolved": "https://registry.npm.taobao.org/array-source/download/array-source-0.0.4.tgz",
"integrity": "sha1-pSXfSoSxN20nxnfNQmqXw4gviso="
},
"array-union": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
......@@ -2211,8 +2216,7 @@
"commander": {
"version": "2.17.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
"integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
"dev": true
"integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
},
"commondir": {
"version": "1.0.1",
......@@ -4843,6 +4847,14 @@
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
"integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
},
"file-source": {
"version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/file-source/download/file-source-0.6.1.tgz",
"integrity": "sha1-rhidSZN2a4Zad/g63Pm5pQTNN9w=",
"requires": {
"stream-source": "0.3"
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
......@@ -8145,6 +8157,15 @@
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
"path-source": {
"version": "0.1.3",
"resolved": "https://registry.npm.taobao.org/path-source/download/path-source-0.1.3.tgz",
"integrity": "sha1-A5B8WVSAqiWWoVqQHET3RXNuenM=",
"requires": {
"array-source": "0.0",
"file-source": "0.6"
}
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
......@@ -11590,6 +11611,19 @@
}
}
},
"shapefile": {
"version": "0.6.6",
"resolved": "https://registry.npm.taobao.org/shapefile/download/shapefile-0.6.6.tgz",
"integrity": "sha1-b+4VK5+yschfaQKFtpL7aMlaX08=",
"requires": {
"array-source": "0.0",
"commander": "2",
"path-source": "0.1",
"slice-source": "0.4",
"stream-source": "0.3",
"text-encoding": "^0.6.4"
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
......@@ -11664,6 +11698,11 @@
"is-fullwidth-code-point": "^2.0.0"
}
},
"slice-source": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/slice-source/download/slice-source-0.4.1.tgz",
"integrity": "sha1-QKV6wDxmaLXaIA4FN44AC/KmHXk="
},
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
......@@ -12090,6 +12129,11 @@
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
"dev": true
},
"stream-source": {
"version": "0.3.5",
"resolved": "https://registry.npm.taobao.org/stream-source/download/stream-source-0.3.5.tgz",
"integrity": "sha1-uX9S0PjqVm2wcdtnm5hUA6MeA0A="
},
"strict-uri-encode": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
......@@ -12326,6 +12370,11 @@
"inherits": "2"
}
},
"text-encoding": {
"version": "0.6.4",
"resolved": "https://registry.npm.taobao.org/text-encoding/download/text-encoding-0.6.4.tgz",
"integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk="
},
"text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
......
DAPlatform-front/package.json
......@@ -20,6 +20,7 @@
"mathjs": "^7.0.2",
"node-sass": "^4.14.1",
"qs": "^6.9.4",
"shapefile": "^0.6.6",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
......
DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue
......@@ -126,32 +126,32 @@
<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)" checked />
</template>
</el-table-column>
</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>
......@@ -160,7 +160,8 @@
<!-- <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: 445px;width:300px;height: calc(100vh - 71px - 345px - 150px);">
<div class="sidebar"
style="position: absolute;margin-top: 445px;width:300px;height: calc(100vh - 71px - 345px - 150px);">
<div class="sidebar-box">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="地标列表" name="first">
......@@ -220,699 +221,637 @@
</template>
<script>
import gcoord from 'gcoord'
export default {
name: 'layerAnnotation',
data() {
return {
activeName: 'first',
isPoint: true,
centerX: 0,
centerY: 0,
labelNow: 0,
labelName: '111',
labelPosition: '',
isMark: false,
isInfo: false,
height_res: 0,
Xpoint: 0,
Ypoint: 0,
radio1: '地标',
activeIndex1: 1,
hasSaved: 1, // 保存标志
layerData: null, // layerdata存放标注数据
landmarkData: null, // 存放地标数据
relationId: null, // 当前任务的relationID
clickedPosition: null, // 保存最新一次点击的结果，没有使用
map: null,
mouseTool: null,
description: null, // 分片描述
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [],
layerEventMap: [],
layerList: [],
colorList: ['blue','pink', 'purple', 'red',
'salmon', 'orchid', 'darkblue','orange',
'green', 'gray', 'darkred', 'darkgreen',
'cadetblue', 'black', 'white', 'lightblue', 'beige'],
colorIndex: 0,
}
},
async mounted() {
/**
import gcoord from 'gcoord'
export default {
name: 'layerAnnotation',
data () {
return {
activeName: 'first',
isPoint: true,
centerX: 0,
centerY: 0,
labelNow: 0,
labelName: '111',
labelPosition: '',
isMark: false,
isInfo: false,
height_res: 0,
Xpoint: 0,
Ypoint: 0,
radio1: '地标',
activeIndex1: 1,
hasSaved: 1, // 保存标志
layerData: null, // layerdata存放标注数据
landmarkData: null, // 存放地标数据
relationId: null, // 当前任务的relationID
clickedPosition: null, // 保存最新一次点击的结果，没有使用
map: null,
mouseTool: null,
description: null, // 分片描述
defaultProps: {
children: 'children',
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 () {
/**
* 在整个项目中X都是经度，Y都是纬度
*/
let routeParams = this.$route.params
// console.log('routeParams')
// console.log(routeParams)
this.relationId = routeParams.relationId
this.description = routeParams.piece.template
let routeParams = this.$route.params
// console.log('routeParams')
// console.log(routeParams)
this.relationId = routeParams.relationId
this.description = routeParams.piece.template
let res = await this.getLayerList()
// console.log(res)
let res = await this.getLayerList()
// console.log(res)
// 避免第一次标注时数据库中没有内容的情况
if (res.layerInfo != null) {
this.layerData = res.layerInfo.labelList
} else {
this.layerData = []
}
// console.log(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 = []
}
this.get_height()
var _this = this
window.onresize = function () {
// alert("??");
_this.height_res = document.body.clientHeight - 61
}
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]})
}
// 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)
for (var index = 0; index < res.geoJSON.length; index++){
var resItem = res.geoJSON[index]
var name = resItem.name
var geoItem = resItem.geojson
console.log(geoItem)
this.tableData.push({id: index, name: name})
// console.log(geoItem.features[0].geometry.coordinates[0][0]);
//分析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 (var x = 0; x < geoItem.features.length; x++) {
var lnglats = geoItem.features[x].geometry.coordinates;
lnglats[0] += 105
lnglats[1] += 4
}
// 叠加图层
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)
}
}
} 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 (var x = 0; x < geoItem.features.length; x++) {
var lnglats = geoItem.features[x].geometry.coordinates;
for (var i = 0; i < lnglats.length; i++) {
lnglats[i][0] += 105
lnglats[i][1] += 4
// 判断经度是否已经小于我国的最小经度，如果是，就将经度+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][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 (var x = 0; x < geoItem.features.length; x++) {
var lnglats = geoItem.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
} 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
}
}
}
}
}
// Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection
var type = geoItem.features[0].geometry.type
var geojson;
if(type === "Point" || type === "MultiPoint"){
geojson = 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"){
geojson = new AMap.GeoJSON({
geoJSON: geoItem,
getPolyline: function(geojson, lnglats) {
return new AMap.Polyline({
path: lnglats,
strokeColor: _this.colorList[_this.colorIndex],
});
} 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)
}
})
this.colorIndex = (this.colorIndex + 1) % 17;
}
else if(type === "Polygon" || type === "MultiPolygon"){
geojson = new AMap.GeoJSON({
geoJSON: geoItem,
// 还可以自定义getMarker和getPolyline
getPolygon: function(geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
strokeColor: 'white',
fillColor: _this.colorList[_this.colorIndex],
});
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
}
}
}
}
})
this.colorIndex = (this.colorIndex + 1) % 17;
}
else{
geojson = new AMap.GeoJSON({
geoJSON: geoItem,
})
}
this.map.add(geojson)
this.layerEventMap.push(0)
this.layerList.push(geojson)
}
}).catch(e => {
console.log(e.toString())
})
}
this.get_height()
var _this = this
window.onresize = function () {
// alert("??");
_this.height_res = document.body.clientHeight - 61
}
// 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.init()
this.restore()
},
beforeRouteLeave: function (to, from, next) {
if (!this.hasSaved) {
let i = 0
this.$confirm('返回后未保存的标注结果将会消失，请确认已保存！', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$destroy()
next()
}).catch(() => {
i = 1
})
} else {
}
this.restore()
},
beforeRouteLeave: function (to, from, next) {
if (!this.hasSaved) {
let i = 0
this.$confirm('返回后未保存的标注结果将会消失，请确认已保存！', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$destroy()
next()
}).catch(() => {
i = 1
})
} else {
this.$destroy()
next()
}
// var _this = this;
// setTimeout(function () {
// if (i == 0) {
// _this.$destroy()
// next()
// }
// },500)
},
watch: {
radio1: function f () {
if (this.radio1 == '地标') {
this.mouseTool.close()
} else if (this.radio1 == '矩形') {
this.mouseTool.close()
this.drawRectangle()
} else if (this.radio1 == '多边形') {
this.mouseTool.close()
this.drawPolygon()
} else {
this.mouseTool.close()
}
// var _this = this;
// setTimeout(function () {
// if (i == 0) {
// _this.$destroy()
// next()
// }
// },500)
},
watch: {
radio1: function f() {
if (this.radio1 == '地标') {
this.mouseTool.close()
} else if (this.radio1 == '矩形') {
this.mouseTool.close()
this.drawRectangle()
} else if (this.radio1 == '多边形') {
this.mouseTool.close()
this.drawPolygon()
} else {
this.mouseTool.close()
}
}
},
methods: {
init() {
this.map = new AMap.Map('container', {
center: [116.397428, 39.90923], // 中心点坐标
resizeEnable: true,
zoom: 10, // 级别
doubleClickZoom: false
})
this.mouseTool = new AMap.MouseTool(this.map)
var layer1 = new AMap.TileLayer.Satellite()
var layer2 = new AMap.TileLayer.RoadNet()
var layers = [
layer1
]
// 添加到地图上
this.map.add(layers)
let _this = this
this.map.on('click', function (e) {
let value = {
X: e.lnglat.getLng(),
Y: e.lnglat.getLat()
}
_this.clickedPosition = value
// console.log('clicked position: ')
// console.log(_this.clickedPosition)
if (_this.radio1 == '地标') {
_this.addlandmark(value)
} else if (_this.radio1 == '矩形') {
// _this.drawRectangle()
} else if (_this.radio1 == '多边形') {
// _this.drawPolygon()
}
})
this.mouseTool.on('draw', function (event) {
// console.log(event.obj)
if (_this.radio1 == '矩形') {
// console.log('northEast :' + event.obj._opts.bounds.northEast.lng + ',' + event.obj._opts.bounds.northEast.lat)
// console.log('southWest :' + event.obj._opts.bounds.southWest.lng + ',' + event.obj._opts.bounds.southWest.lat)
let northEast = {
X: event.obj._opts.bounds.northEast.lng,
Y: event.obj._opts.bounds.northEast.lat
}
let southWest = {
X: event.obj._opts.bounds.southWest.lng,
Y: event.obj._opts.bounds.southWest.lat
}
if (!(northEast.X == southWest.X && northEast.Y == southWest.Y)) {
// console.log('这是一个矩形')
_this.addRectangle(northEast, southWest)
}
} else if (_this.radio1 == '多边形') {
// console.log(event.obj._opts.path)
// console.log('这是一个多边形')
let path = event.obj._opts.path
if (path.length > 1) {
_this.addPolygon(path)
}
}
})
},
handleShowClick(index) {
this.layerEventMap[index]++
this.layerHide = index
if (this.layerEventMap[index] % 2 === 1) {
this.layerList[index].hide()
} else {
this.layerList[index].show()
}
},
methods: {
init () {
this.map = new AMap.Map('container', {
center: [116.397428, 39.90923], // 中心点坐标
resizeEnable: true,
zoom: 10, // 级别
doubleClickZoom: false
})
this.mouseTool = new AMap.MouseTool(this.map)
var layer1 = new AMap.TileLayer.Satellite()
var layer2 = new AMap.TileLayer.RoadNet()
var layers = [
layer1
]
// 添加到地图上
this.map.add(layers)
let _this = this
this.map.on('click', function (e) {
let value = {
X: e.lnglat.getLng(),
Y: e.lnglat.getLat()
}
},
// 点标注&区域标注跳转
handleClick(tab, event) {
// console.log(tab, event)
},
// 删除标注
deleteLabelInList() {
if (this.isMark) {
this.landmarkData.splice(this.labelNow, 1)
} else {
this.layerData.splice(this.labelNow, 1)
_this.clickedPosition = value
// console.log('clicked position: ')
// console.log(_this.clickedPosition)
if (_this.radio1 == '地标') {
_this.addlandmark(value)
} else if (_this.radio1 == '矩形') {
// _this.drawRectangle()
} else if (_this.radio1 == '多边形') {
// _this.drawPolygon()
}
this.restore()
this.isInfo = false
// 保存标志置为0
this.hasSaved = false
},
// 双击显示详细信息
markInfo(index) {
// 改变中心位置
this.setCenter('mark', this.landmarkData[index])
this.isMark = true
this.labelNow = index
this.isInfo = true
this.labelName = this.landmarkData[index].landmarkName
this.labelPosition = '经度:' + this.landmarkData[index].X + '\n纬度:' + this.landmarkData[index].Y
},
areaInfo(index) {
// 改变中心位置
this.setCenter('polygon', this.layerData[index].pointList)
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.mouseTool.on('draw', function (event) {
// console.log(event.obj)
if (_this.radio1 == '矩形') {
// console.log('northEast :' + event.obj._opts.bounds.northEast.lng + ',' + event.obj._opts.bounds.northEast.lat)
// console.log('southWest :' + event.obj._opts.bounds.southWest.lng + ',' + event.obj._opts.bounds.southWest.lat)
let northEast = {
X: event.obj._opts.bounds.northEast.lng,
Y: event.obj._opts.bounds.northEast.lat
}
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
let southWest = {
X: event.obj._opts.bounds.southWest.lng,
Y: event.obj._opts.bounds.southWest.lat
}
if (element.X > maxX) {
maxX = element.X
if (!(northEast.X == southWest.X && northEast.Y == southWest.Y)) {
// console.log('这是一个矩形')
_this.addRectangle(northEast, southWest)
}
if (element.Y < minY) {
minY = element.Y
} else if (_this.radio1 == '多边形') {
// console.log(event.obj._opts.path)
// console.log('这是一个多边形')
let path = event.obj._opts.path
if (path.length > 1) {
_this.addPolygon(path)
}
if (element.Y > maxY) {
maxY = element.Y
}
})
let midX = (minX + maxX) / 2
let midY = (minY + maxY) / 2
this.jumpByPosition(midX, midY)
},
}
})
},
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) {
// console.log(tab, event)
},
// 删除标注
deleteLabelInList () {
if (this.isMark) {
this.landmarkData.splice(this.labelNow, 1)
} else {
this.layerData.splice(this.labelNow, 1)
}
this.restore()
this.isInfo = false
// 保存标志置为0
this.hasSaved = false
},
// 双击显示详细信息
markInfo (index) {
// 改变中心位置
this.setCenter('mark', this.landmarkData[index])
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.isMark = true
this.labelNow = index
this.isInfo = true
this.map.add(marker)
this.labelName = this.landmarkData[index].landmarkName
this.labelPosition = '经度:' + this.landmarkData[index].X + '\n纬度:' + this.landmarkData[index].Y
},
areaInfo (index) {
// 改变中心位置
this.setCenter('polygon', this.layerData[index].pointList)
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.layerData.forEach(element => {
var path = []
this.map.add(marker)
})
// 还原标注区域
this.layerData.forEach((element, i) => {
var path = []
element.pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
})
element.pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
})
if (i == index) {
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
fillColor: 'rgba(51,135,255,0.36)', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red' // 线条颜色
})
this.map.add(polygon)
})
},
setCenter(type, pointList) {
if (type == 'mark') {
var tmp = new AMap.Marker({
position: new AMap.LngLat(pointList.X, pointList.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: 'tmp'
})
} else if (type == 'polygon') {
var path = []
pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
})
var tmp = new AMap.Polygon({
} else {
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red' // 线条颜色
})
}
this.map.setFitView(tmp)
},
/**
* 还原数据中的地标、标注区域
*/
restore() {
// 还原地标
this.map.clearMap()
this.landmarkData.forEach(element => {
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()
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
})
this.map.add(marker)
} 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))
})
// 还原标注区域
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 (type, pointList) {
if (type == 'mark') {
var tmp = new AMap.Marker({
position: new AMap.LngLat(pointList.X, pointList.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: 'tmp'
})
} else if (type == 'polygon') {
var path = []
pointList.forEach(e => {
path.push(new AMap.LngLat(e.X, e.Y))
})
var tmp = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red' // 线条颜色
})
}
this.map.setFitView(tmp)
},
/**
* 还原数据中的地标、标注区域
*/
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]
title: element.landmarkName
})
this.map.add(marker)
})
// 还原标注区域
this.layerData.forEach(element => {
var path = []
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red' // 线条颜色
})
this.map.add(polygon)
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)
})
},
/**
获取标注任务的relationID
*/
getRelationId() {
// 由于获取方法还没有确定，所以这里先使用桩
let res = {
'relationId': this.relationId
}
return res
},
/**
getRelationId () {
// 由于获取方法还没有确定，所以这里先使用桩
let res = {
'relationId': this.relationId
}
return res
},
/**
前端接口——获取图层数据
*/
async getLayerList() {
this.data = []
let params = this.getRelationId()
try {
let self = this
let res = await this.axios({
method: 'post',
url: '/layer/getLayer',
data: params
})
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('请求出错！')
}
},
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,
geoJSON: geoJSON
}
} else {
self.$store.commit('clearLayerData')
alert('请求出错！')
async getLayerList () {
this.data = []
let params = this.getRelationId()
try {
let self = this
let res = await this.axios({
method: 'post',
url: '/layer/getLayer',
data: params
})
if (res.code === 1) {
let layerInfo = res.data.layerInfo
let landmarkList = res.data.landmarkList
let geoNames = res.data.geoNames
// console.log(res.data)
return {
layerInfo: layerInfo,
landmarkList: landmarkList,
geoNames: geoNames
}
} catch (err) {
} else {
self.$store.commit('clearLayerData')
console.log(err)
alert('请求出错！')
}
},
/**
} catch (err) {
self.$store.commit('clearLayerData')
console.log(err)
alert('请求出错！')
}
},
/**
* 坐标跳转
*/
jumpByPosition(X, Y) {
var position = new AMap.LngLat(X, Y)
this.map.setCenter(position)
},
/**
jumpByPosition (X, Y) {
var position = new AMap.LngLat(X, Y)
this.map.setCenter(position)
},
/**
* 添加地标
*/
addlandmark(position) {
var landmarkName
this.$prompt('请输入地标名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
landmarkName = value
this.makelandmark(landmarkName, position)
}).catch(() => {
// landmarkName = '未命名'
// this.makelandmark(landmarkName, position)
})
},
/**
addlandmark (position) {
var landmarkName
this.$prompt('请输入地标名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
landmarkName = value
this.makelandmark(landmarkName, position)
}).catch(() => {
// landmarkName = '未命名'
// this.makelandmark(landmarkName, position)
})
},
/**
* 创建地标数据
*/
makelandmark(landmarkName, position) {
let currentId = this.landmarkData.length
let newlandmark = {
X: position.X,
Y: position.Y,
landmarkId: currentId,
correct: 0,
landmarkName: landmarkName
}
this.landmarkData.push(newlandmark)
// console.log(this.landmarkData)
makelandmark (landmarkName, position) {
let currentId = this.landmarkData.length
let newlandmark = {
X: position.X,
Y: position.Y,
landmarkId: currentId,
correct: 0,
landmarkName: landmarkName
}
this.landmarkData.push(newlandmark)
// console.log(this.landmarkData)
// 在图层上显示
var marker = new AMap.Marker({
position: new AMap.LngLat(newlandmark.X, newlandmark.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: newlandmark.landmarkName
})
this.map.add(marker)
// 保存标志置为0
this.hasSaved = false
},
/**
// 在图层上显示
var marker = new AMap.Marker({
position: new AMap.LngLat(newlandmark.X, newlandmark.Y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: newlandmark.landmarkName
})
this.map.add(marker)
// 保存标志置为0
this.hasSaved = false
},
/**
* 画矩形，这是高德地图的样例代码
*/
drawRectangle() {
if (this.radio1 == '矩形') {
this.mouseTool.rectangle({
strokeColor: 'red',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: 'blue',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: 'solid'
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
}
},
addRectangle(northEast, southWest) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
name = value
this.makeRectangle(name, northEast, southWest)
}).catch(() => {
// name = '未命名'
// this.makeRectangle(name, northEast, southWest)
this.restore()
})
},
/**
* 创建矩形区域数据
*/
makeRectangle(labelName, northEast, southWest) {
// X是经度，Y是纬度，应该是没错的，当初就不该叫XY的
// 右上
let p0 = {
pointId: 0,
X: northEast.X,
Y: northEast.Y
}
// 右下
let p1 = {
pointId: 1,
X: northEast.X,
Y: southWest.Y
}
// 左下
let p2 = {
pointId: 2,
X: southWest.X,
Y: southWest.Y
}
// 左上
let p3 = {
pointId: 3,
X: southWest.X,
Y: northEast.Y
}
let currentId = this.layerData.length
let pointList = []
pointList.push(p0)
pointList.push(p1)
pointList.push(p2)
pointList.push(p3)
const newLabel = {
labelId: currentId,
labelName: labelName,
correct: 0,
pointList: pointList
}
this.layerData.push(newLabel)
// console.log(this.layerData)
this.restore()
// 保存标志置为0
this.hasSaved = false
},
/**
* 画多边形，高德地图的样例代码
*/
drawPolygon() {
this.mouseTool.polygon({
drawRectangle () {
if (this.radio1 == '矩形') {
this.mouseTool.rectangle({
strokeColor: 'red',
strokeOpacity: 1,
strokeWeight: 6,
......@@ -924,103 +863,175 @@
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
},
/**
* 创建多边形标签
}
},
addRectangle (northEast, southWest) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
name = value
this.makeRectangle(name, northEast, southWest)
}).catch(() => {
// name = '未命名'
// this.makeRectangle(name, northEast, southWest)
this.restore()
})
},
/**
* 创建矩形区域数据
*/
addPolygon(path) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
name = value
this.makePolygon(name, path)
}).catch(() => {
// name = '未命名'
// this.makePolygon(name, path)
this.restore()
})
},
/**
* 创建多边形数据
makeRectangle (labelName, northEast, southWest) {
// X是经度，Y是纬度，应该是没错的，当初就不该叫XY的
// 右上
let p0 = {
pointId: 0,
X: northEast.X,
Y: northEast.Y
}
// 右下
let p1 = {
pointId: 1,
X: northEast.X,
Y: southWest.Y
}
// 左下
let p2 = {
pointId: 2,
X: southWest.X,
Y: southWest.Y
}
// 左上
let p3 = {
pointId: 3,
X: southWest.X,
Y: northEast.Y
}
let currentId = this.layerData.length
let pointList = []
pointList.push(p0)
pointList.push(p1)
pointList.push(p2)
pointList.push(p3)
const newLabel = {
labelId: currentId,
labelName: labelName,
correct: 0,
pointList: pointList
}
this.layerData.push(newLabel)
// console.log(this.layerData)
this.restore()
// 保存标志置为0
this.hasSaved = false
},
/**
* 画多边形，高德地图的样例代码
*/
makePolygon(labelName, path) {
// console.log(path)
var pointList = []
var i = 0
path.forEach(element => {
let newPoint = {
pointId: i,
X: element[0],
Y: element[1]
}
pointList.push(newPoint)
i++
})
let currentId = this.layerData.length
const newLabel = {
labelId: currentId,
labelName: labelName,
correct: 0,
pointList: pointList
drawPolygon () {
this.mouseTool.polygon({
strokeColor: 'red',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: 'blue',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: 'solid'
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
},
/**
* 创建多边形标签
*/
addPolygon (path) {
var name
this.$prompt('请输入标注名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({value}) => {
if (value == null) {
value = '未命名'
}
this.layerData.push(newLabel)
// console.log(this.layerData)
name = value
this.makePolygon(name, path)
}).catch(() => {
// name = '未命名'
// this.makePolygon(name, path)
this.restore()
// 保存标志置为0
this.hasSaved = false
},
// 保存数据用的接口
save() {
let outputLayerInfo = {
relationId: this.relationId,
labelList: this.layerData
})
},
/**
* 创建多边形数据
*/
makePolygon (labelName, path) {
// console.log(path)
var pointList = []
var i = 0
path.forEach(element => {
let newPoint = {
pointId: i,
X: element[0],
Y: element[1]
}
let outputlandmarkInfo = {
relationId: this.relationId,
landmarkEntityList: this.landmarkData
pointList.push(newPoint)
i++
})
let currentId = this.layerData.length
const newLabel = {
labelId: currentId,
labelName: labelName,
correct: 0,
pointList: pointList
}
this.layerData.push(newLabel)
// console.log(this.layerData)
this.restore()
// 保存标志置为0
this.hasSaved = false
},
// 保存数据用的接口
save () {
let outputLayerInfo = {
relationId: this.relationId,
labelList: this.layerData
}
let outputlandmarkInfo = {
relationId: this.relationId,
landmarkEntityList: this.landmarkData
}
// console.log('outputdata')
// console.log(outputlandmarkInfo)
// console.log(outputLayerInfo)
this.axios({
method: 'post',
url: '/layer/saveLayer',
data: {
layerInfo: outputLayerInfo,
landmarkInfo: outputlandmarkInfo
}
// console.log('outputdata')
// console.log(outputlandmarkInfo)
// console.log(outputLayerInfo)
this.axios({
method: 'post',
url: '/layer/saveLayer',
data: {
layerInfo: outputLayerInfo,
landmarkInfo: outputlandmarkInfo
}
}).then(res => {
// console.log(res)
if (res.code === 1) {
// 保存标志置为1
this.hasSaved = true
this.$alert('保存成功', '保存成功', {
confirmButtonText: '确定',
callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
}
})
} else {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
}
})
}
}).catch(err => {
}).then(res => {
// console.log(res)
if (res.code === 1) {
// 保存标志置为1
this.hasSaved = true
this.$alert('保存成功', '保存成功', {
confirmButtonText: '确定',
callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
}
})
} else {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
......@@ -1030,36 +1041,47 @@
// });
}
})
}
}).catch(err => {
this.$alert('保存失败', '保存失败', {
confirmButtonText: '确定',
callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
}
})
},
get_height() {
this.height_res = document.body.clientHeight - 61
},
changeToolBar(val) {
this.activeIndex1 = val
},
/**
})
},
get_height () {
this.height_res = document.body.clientHeight - 61
},
changeToolBar (val) {
this.activeIndex1 = val
},
/**
* 这个是不需要的方法，没有问题会删除
*/
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
deleteAnnotation: function () {
this.$confirm('确定删除此标注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style scoped>
......
DAPlatform/views/imageAnnotation.py
......@@ -5,7 +5,7 @@ import zipfile
import os
import shapefile
from support import basedir
from flask import Blueprint, request, make_response, send_file
from flask import Blueprint, request, make_response, send_file, jsonify
from dao import Image, Relation
......@@ -61,16 +61,16 @@ def save_image():
# 获取图层中的每一个shp文件
def retGeoJson(relationId):
def retGeoNames(relationId):
urlList = Image.retURLList(relationId)
geoList = []
nameList = []
defaultList = [
{"name": "河流水系1-2级", "url": '1604321976.shp'}, # 河1-2
{"name": "河流水系3级", "url": '1604321548.shp'}, # 河3
# {"name": "河流水系4级", "url": '1604321993.shp'}, # 河4
{"name": "河流水系4级", "url": '1604321993.shp'}, # 河4
# {"name": "河流水系5级", "url": '1604322005.shp'}, #河5，文件太大，全部叠加后前端无法显示
{"name": "活动断裂分布", "url": '1604042749.shp'}, # 活动断裂
{"name": "全国降雨量站降雨数据", "url": '1604042339.shp'}, # 降雨量
# {"name": "活动断裂分布", "url": '1604042749.shp'}, # 活动断裂
# {"name": "全国降雨量站降雨数据", "url": '1604042339.shp'}, # 降雨量
]
allList = []
isExtended = False
......@@ -78,29 +78,65 @@ def retGeoJson(relationId):
url = item['url']
if url == "默认":
isExtended = True
urlList.remove(item)
if isExtended:
allList.extend(defaultList)
allList.extend(urlList)
for item in allList:
nameList.append(item['name'])
return nameList
# 获取图层中的每一个shp文件
def retGeoJson(all_list, index):
item = all_list[index]
url = item['url']
file_dir = os.path.join(basedir, UPLOAD_FOLDER, url)
print(file_dir)
shp = open(file_dir, 'rb')
name = item['name'].encode("utf-8").decode("latin1")
geoList = shp.read()
return geoList
# 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))
# geoList.append({"name": item['name'], "geojson": {"type": "FeatureCollection", "features": buffer}})
# 获取图层
@image.route("/layer/getGeojson", methods=["POST"])
def get_geo_list():
print("get_geo_list")
data = json.loads(request.data.decode('utf-8'))
relation_list = data['relationId']
index = data['index']
print(relation_list, index)
urlList = Image.retURLList(relation_list)
geoList = None
defaultList = [
{"name": "河流水系1-2级", "url": '1604321976.shp'}, # 河1-2
{"name": "河流水系3级", "url": '1604321548.shp'}, # 河3
{"name": "河流水系4级", "url": '1604321993.shp'}, # 河4
# {"name": "河流水系5级", "url": '1604322005.shp'}, #河5，文件太大，全部叠加后前端无法显示
# {"name": "活动断裂分布", "url": '1604042749.shp'}, # 活动断裂
# {"name": "全国降雨量站降雨数据", "url": '1604042339.shp'}, # 降雨量
]
allList = []
isExtended = False
for item in urlList:
url = item['url']
if url == "默认":
if isExtended == False:
defaultList.extend(urlList)
isExtended = True
else:
continue
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))
geoList.append({"name": item['name'], "geojson": {"type": "FeatureCollection", "features": buffer}})
return geoList
isExtended = True
urlList.remove(item)
if isExtended:
allList.extend(defaultList)
allList.extend(urlList)
geojson = retGeoJson(allList, index)
print("geojson")
return geojson
# 获取图层
......@@ -109,10 +145,10 @@ def get_layer():
data = json.loads(request.data.decode('utf-8'))
relation_list = data['relationId']
resLayer = Image.getLayer(relation_list)
geojson = retGeoJson(relation_list)
geoNames = retGeoNames(relation_list)
layer = resLayer.data
resdata = {
'geojson': geojson,
'geoNames': geoNames,
'layerInfo': layer['layerInfo'],
'landmarkList': layer['landmarkList'],
}
......
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