|
|
|
@ -1,49 +1,154 @@ |
|
|
|
<template> |
|
|
|
<div style="position: relative"> |
|
|
|
|
|
|
|
<div class="div_search"> |
|
|
|
|
|
|
|
<el-select v-model="selAgencyId" |
|
|
|
placeholder="请选择或点击区域选择"> |
|
|
|
<el-option @click.native="orgChange(index)" |
|
|
|
v-for="(item,index) in subAgencyArray" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<div v-if="selAgencyId && subAgencyArray.length>0"> |
|
|
|
<el-button v-if="showBtn&&!hasPolygon" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-plus" |
|
|
|
@click="handleAddPolygon">{{method==='mAddPolygon'?'取消绘制':'绘制区域'}}</el-button> |
|
|
|
<el-button v-if="showBtn&&hasPolygon" |
|
|
|
<div> |
|
|
|
<div style="position: relative"> |
|
|
|
|
|
|
|
<div class="div_search"> |
|
|
|
|
|
|
|
<el-select v-model="selAgencyId" |
|
|
|
size="small" |
|
|
|
placeholder="请选择或点击区域选择"> |
|
|
|
<el-option @click.native="orgChange(index)" |
|
|
|
v-for="(item,index) in subAgencyArray" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<div v-if="selAgencyId && subAgencyArray.length>0"> |
|
|
|
<el-button v-if="showBtn&&!hasPolygon" |
|
|
|
size="small" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-plus" |
|
|
|
@click="handleAddPolygon">{{method==='mAddPolygon'?'取消绘制':'绘制区域'}}</el-button> |
|
|
|
<el-button v-if="showBtn&&hasPolygon" |
|
|
|
size="small" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-edit" |
|
|
|
@click="handleEditPolygon">{{method==='mEditPolygon'?'取消绘制':'重新绘制'}}</el-button> |
|
|
|
<!-- <el-button v-if="showBtn&&hasPolygon" |
|
|
|
size="small" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="handleDelPolygon">删除区域</el-button> --> |
|
|
|
<el-button v-if="showBtn" |
|
|
|
size="small" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-upload2" |
|
|
|
@click="handleManually">手动录入</el-button> |
|
|
|
<!-- <el-button v-if="showBtn" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="handleSetOffset">设置偏差</el-button> --> |
|
|
|
<span v-if="showBtn&&hasPolygon"> 经度偏差：</span> |
|
|
|
<el-input-number v-if="showBtn&&hasPolygon" |
|
|
|
resize="none" |
|
|
|
size="small" |
|
|
|
style="width:200px" |
|
|
|
:precision="5" |
|
|
|
:step="0.0001" |
|
|
|
placeholder='请输入经度偏差' |
|
|
|
v-model="xOffset"> |
|
|
|
</el-input-number> |
|
|
|
<span v-if="showBtn&&hasPolygon"> 纬度偏差：</span> |
|
|
|
<el-input-number v-if="showBtn&&hasPolygon" |
|
|
|
resize="none" |
|
|
|
size="small" |
|
|
|
:precision="5" |
|
|
|
:step="0.0001" |
|
|
|
style="width:200px" |
|
|
|
placeholder='请输入维度偏差' |
|
|
|
v-model="yOffset"> |
|
|
|
</el-input-number> |
|
|
|
|
|
|
|
<el-button v-if="showBtn&&hasPolygon" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
icon="el-icon-folder-add" |
|
|
|
@click="handleOffsetOk">保存</el-button> |
|
|
|
<!-- <el-button v-if="showBtn" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="handleOffsetCancel">预览</el-button> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="div_back"> |
|
|
|
<el-button v-if="runNum>0" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-edit" |
|
|
|
@click="handleEditPolygon">{{method==='mEditPolygon'?'取消绘制':'重新绘制'}}</el-button> |
|
|
|
<!-- <el-button v-if="showBtn&&hasPolygon" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="handleDelPolygon">删除区域</el-button> --> |
|
|
|
icon="el-icon-back" |
|
|
|
@click="handleBack">返回上一级</el-button> |
|
|
|
</div> |
|
|
|
<div class="div_tip"> |
|
|
|
<span>按住alt键单击标注，可以进入下一级地图</span> |
|
|
|
</div> |
|
|
|
<div id="map" |
|
|
|
class="div_map" |
|
|
|
:style="{height:mapHeight+'px'}"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="div_back"> |
|
|
|
<el-button v-if="runNum>0" |
|
|
|
style="margin-left:10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-back" |
|
|
|
@click="handleBack">返回上一级</el-button> |
|
|
|
</div> |
|
|
|
<div class="div_tip"> |
|
|
|
<span>按住alt键单击标注，可以进入下一级地图</span> |
|
|
|
</div> |
|
|
|
<div id="map" |
|
|
|
class="div_map" |
|
|
|
:style="{height:mapHeight+'px'}"></div> |
|
|
|
<el-dialog title="手动录入" |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="50%" |
|
|
|
:before-close="handleClose"> |
|
|
|
<div class="div_textarea"> |
|
|
|
<div style="margin-top:10px"> |
|
|
|
<span> 中心点经度：</span> |
|
|
|
<el-input-number size="small" |
|
|
|
style="width:250px" |
|
|
|
v-model="longitude"> |
|
|
|
</el-input-number> |
|
|
|
<span style="margin-left:15px"> 中心点纬度：</span> |
|
|
|
<el-input-number size="small" |
|
|
|
style="width:250px" |
|
|
|
v-model="latitude"> |
|
|
|
</el-input-number> |
|
|
|
</div> |
|
|
|
<div style="margin-top:20px"> |
|
|
|
<el-input type="textarea" |
|
|
|
:rows="15" |
|
|
|
style="width:600px;max-height:500px" |
|
|
|
placeholder='请复制坐标数据' |
|
|
|
v-model="polygonManullyString"> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<div style="margin-top:20px"> |
|
|
|
<span> 经度偏差：</span> |
|
|
|
<el-input-number resize="none" |
|
|
|
size="small" |
|
|
|
style="width:200px" |
|
|
|
:precision="5" |
|
|
|
:step="0.0001" |
|
|
|
placeholder='请输入经度偏差' |
|
|
|
v-model="xOffset_customize"> |
|
|
|
</el-input-number> |
|
|
|
<span style="margin-left:15px"> 纬度偏差：</span> |
|
|
|
<el-input-number resize="none" |
|
|
|
size="small" |
|
|
|
:precision="5" |
|
|
|
:step="0.0001" |
|
|
|
style="width:200px" |
|
|
|
placeholder='请输入维度偏差' |
|
|
|
v-model="yOffset_customize"> |
|
|
|
</el-input-number> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span slot="footer" |
|
|
|
class="dialog-footer"> |
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
@click="handleManuallyOk">确 定</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
@ -67,7 +172,7 @@ import { Loading } from 'element-ui'; //引入Loading服务 |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
import { altKeyOnly, click, pointerMove } from 'ol/events/condition'; |
|
|
|
|
|
|
|
var centerPointGlobal = [120.38945519, 36.0722275] |
|
|
|
var centerPointGlobal = [120.664619, 36.504963] |
|
|
|
let loading;//加载动画 |
|
|
|
|
|
|
|
let x = 1500 |
|
|
|
@ -85,15 +190,15 @@ let mapView; |
|
|
|
let gaodeMapLayer;//背景地图图层 |
|
|
|
let parentLayer;//上级组织图层 |
|
|
|
let parentSource;//上级组织多边形 |
|
|
|
let polygonLayer;//变电站标注图层 |
|
|
|
let polygonSource;//变电站标注多边形 |
|
|
|
let polygonLayer;//标注图层 |
|
|
|
let polygonSource;//标注多边形 |
|
|
|
|
|
|
|
let draw;//绘制handle |
|
|
|
let select;//选中标注 |
|
|
|
let selectAltClick; |
|
|
|
let selectedFeatures; |
|
|
|
|
|
|
|
//变电站标注的文字样式 |
|
|
|
//标注的文字样式 |
|
|
|
var createTextStyle = function (feature) { |
|
|
|
return new Text({ |
|
|
|
textAlign: undefined, |
|
|
|
@ -101,7 +206,7 @@ var createTextStyle = function (feature) { |
|
|
|
//fontFamily: "Courier New, monospace", |
|
|
|
fontWeight: "bold", |
|
|
|
text: feature.values_.name, |
|
|
|
//text: "变电站名称", |
|
|
|
//text: "名称", |
|
|
|
fill: new Fill({ color: "#007ab9" }), |
|
|
|
stroke: new Stroke({ color: "#ffffff", width: 3 }), |
|
|
|
offsetY: 0, |
|
|
|
@ -172,6 +277,21 @@ const vueGis = { |
|
|
|
zoom: null, |
|
|
|
parentPolygon: [], |
|
|
|
|
|
|
|
//手动录入弹出框 |
|
|
|
dialogVisible: false, |
|
|
|
showOffset: false, |
|
|
|
// polygonManullyString: "POLYGON (( 120.33902844 36.10290786, 120.33928218 36.10292997, 120.33956336 36.10316381, 120.34016675 36.10367715, 120.34044913 36.10391476, 120.34045707 36.10392145, 120.34068696 36.10411489, 120.34103181 36.10436285, 120.34117309 36.10441824, 120.34134613 36.10447927, 120.34164715 36.10465122, 120.34124679 36.10507284, 120.34088128 36.10538902, 120.34076198 36.10549222, 120.34053890 36.10520966, 120.34044967 36.10507284, 120.34030632 36.10494761, 120.34019091 36.10484679, 120.33976558 36.10448095, 120.33966658 36.10439980, 120.33947147 36.10425822, 120.33932037 36.10417613, 120.33913002 36.10411307, 120.33895751 36.10406073, 120.33879451 36.10403693, 120.33864104 36.10403158, 120.33864031 36.10395235, 120.33863211 36.10305897, 120.33902175 36.10290728, 120.33902844 36.10290786))", |
|
|
|
polygonManullyString: "", |
|
|
|
|
|
|
|
xOffset: 0, |
|
|
|
yOffset: 0, |
|
|
|
xOffset_customize: 0, |
|
|
|
yOffset_customize: 0, |
|
|
|
// xOffset_customize: 0.0051,//市北默认偏移 |
|
|
|
// yOffset_customize: 0.0002,//市北默认偏移 |
|
|
|
|
|
|
|
longitude: undefined, |
|
|
|
latitude: undefined, |
|
|
|
} |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
@ -292,7 +412,7 @@ const vueGis = { |
|
|
|
|
|
|
|
//加载父级组织多边形 |
|
|
|
loadParentPolygon () { |
|
|
|
parentSource.clear()//清空变电站标注 |
|
|
|
parentSource.clear()//清空标注 |
|
|
|
|
|
|
|
let featureData = []//标注数据 |
|
|
|
if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注 |
|
|
|
@ -348,7 +468,7 @@ const vueGis = { |
|
|
|
}, |
|
|
|
//加载当前园区的标注 |
|
|
|
loadPolygon (subAgencyArray) { |
|
|
|
polygonSource.clear()//清空变电站标注 |
|
|
|
polygonSource.clear()//清空标注 |
|
|
|
|
|
|
|
let featureData = []//标注数据 |
|
|
|
if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注 |
|
|
|
@ -464,9 +584,15 @@ const vueGis = { |
|
|
|
if (element.id_ === this.selAgencyId) { |
|
|
|
|
|
|
|
selectedFeatures.push(element) |
|
|
|
let polygon = element.getGeometry(); |
|
|
|
map.getView().fit(polygon, map.getSize()); |
|
|
|
this.zoom = map.getView().getZoom() - 2 |
|
|
|
mapView.setZoom(this.zoom); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
//设置地图定位的中心点和缩放级别 |
|
|
|
setMapLocation () { |
|
|
|
@ -548,7 +674,7 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//添加变电站标注图层 |
|
|
|
//添加标注图层 |
|
|
|
addParentLayer () { |
|
|
|
parentSource = new VectorSource({ |
|
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject) |
|
|
|
@ -565,7 +691,7 @@ const vueGis = { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
//添加变电站标注图层 |
|
|
|
//添加标注图层 |
|
|
|
addPolygonLayer () { |
|
|
|
polygonSource = new VectorSource({ |
|
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject) |
|
|
|
@ -628,6 +754,114 @@ const vueGis = { |
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
//点击【手动录入】 |
|
|
|
handleManually () { |
|
|
|
this.dialogVisible = true |
|
|
|
this.polygonManullyString = '' |
|
|
|
this.longitude = undefined |
|
|
|
this.latitude = undefined |
|
|
|
if (this.selAgency) { |
|
|
|
if (this.selAgency.longitude) { |
|
|
|
this.longitude = this.selAgency.longitude |
|
|
|
} |
|
|
|
if (this.selAgency.latitude) { |
|
|
|
this.latitude = this.selAgency.latitude |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//点击【手动录入】 |
|
|
|
handleClose () { |
|
|
|
this.dialogVisible = false |
|
|
|
}, |
|
|
|
|
|
|
|
handleManuallyOk () { |
|
|
|
|
|
|
|
if (this.longitude || this.latitude) { |
|
|
|
if (!(this.longitude && this.latitude)) { |
|
|
|
this.$message({ |
|
|
|
type: "warning", |
|
|
|
message: "请同时填写中心点经纬度，或不填写" |
|
|
|
}); |
|
|
|
return false |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
//转化成需要的格式 |
|
|
|
//120.54033616308595,36.53603370922851,120.69620469335939,36.5408402277832,120.63166001562502,36.46771248120117,120.52728989843752,36.458786089599606,120.54033616308595,36.53603370922851 |
|
|
|
//中国经纬度范围 |
|
|
|
// 经度范围：73°33′E至135°05′E 东经 |
|
|
|
// 纬度范围：3°51′N至53°33′N 北纬 |
|
|
|
|
|
|
|
const arrayString = this.polygonManullyString |
|
|
|
let array = arrayString.split(/[, ()]/) |
|
|
|
console.log(array) |
|
|
|
let polygonStringResult = '' |
|
|
|
|
|
|
|
|
|
|
|
array.forEach(element => { |
|
|
|
let num = Number(element) |
|
|
|
if (num) { |
|
|
|
polygonStringResult = polygonStringResult + element + ',' |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
polygonStringResult = polygonStringResult.substring(0, polygonStringResult.length - 1) |
|
|
|
|
|
|
|
if (this.xOffset_customize !== 0 || this.yOffset_customize !== 0) { |
|
|
|
this.saveOffset(this.xOffset_customize, this.yOffset_customize, polygonStringResult) |
|
|
|
} else { |
|
|
|
this.addPolygon(polygonStringResult) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
handleSetOffset () { |
|
|
|
this.showOffset = true |
|
|
|
}, |
|
|
|
handleOffsetOk () { |
|
|
|
let selPolygonString = "" |
|
|
|
|
|
|
|
this.subAgencyArray.forEach(element => { |
|
|
|
if (element.id === this.selAgencyId && element.coordinates && element.coordinates.length > 0) { |
|
|
|
selPolygonString = element.coordinates |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
if (selPolygonString) { |
|
|
|
this.saveOffset(tyhis.xOffset, this.yOffset, selPolygonString) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
saveOffset (xOffset, yOffset, selPolygonString) { |
|
|
|
let offsetPolygonString = ''//偏移后的坐标字符串 |
|
|
|
let tempArray = selPolygonString.split(',') |
|
|
|
|
|
|
|
tempArray.forEach((element, index) => { |
|
|
|
let aaa = 0 |
|
|
|
|
|
|
|
if (index % 2 === 0) {//偶数 |
|
|
|
aaa = parseFloat(element) + parseFloat(xOffset) |
|
|
|
} else { |
|
|
|
aaa = parseFloat(element) + parseFloat(yOffset) |
|
|
|
} |
|
|
|
|
|
|
|
if (index % 2 !== 0) {//奇数 |
|
|
|
|
|
|
|
} |
|
|
|
offsetPolygonString = offsetPolygonString + aaa + ',' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
offsetPolygonString = offsetPolygonString.substring(0, offsetPolygonString.length - 1) |
|
|
|
this.addPolygon(offsetPolygonString) |
|
|
|
}, |
|
|
|
handleSetOffset () { |
|
|
|
this.handleOffsetCancel = false |
|
|
|
}, |
|
|
|
|
|
|
|
//点击【绘制区域】 |
|
|
|
handleAddPolygon () { |
|
|
|
@ -732,6 +966,7 @@ const vueGis = { |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
this.addPolygon(coorString) |
|
|
|
|
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
this.loadPolygon(this.subAgencyArray) |
|
|
|
@ -751,12 +986,15 @@ const vueGis = { |
|
|
|
|
|
|
|
//新增标注 |
|
|
|
async addPolygon (coorString) { |
|
|
|
console.log(coorString) |
|
|
|
const url = "/gov/org/agency/mapaddarea" |
|
|
|
|
|
|
|
let params = { |
|
|
|
orgId: this.selAgency.id, |
|
|
|
level: this.selAgency.level, |
|
|
|
coordinates: coorString |
|
|
|
coordinates: coorString, |
|
|
|
longitude: this.longitude, |
|
|
|
latitude: this.latitude |
|
|
|
} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
@ -766,7 +1004,10 @@ const vueGis = { |
|
|
|
type: "success", |
|
|
|
message: "绘制成功" |
|
|
|
}); |
|
|
|
|
|
|
|
if (this.dialogVisible) { |
|
|
|
this.polygonManullyString = '' |
|
|
|
this.dialogVisible = false |
|
|
|
} |
|
|
|
this.refreshMap(false) |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
@ -846,7 +1087,7 @@ const vueGis = { |
|
|
|
}, |
|
|
|
mapHeight () { |
|
|
|
|
|
|
|
return this.clientHeight - 120; |
|
|
|
return this.clientHeight - 170; |
|
|
|
|
|
|
|
}, |
|
|
|
// zoom: { |
|
|
|
@ -872,16 +1113,14 @@ export default vueGis; |
|
|
|
<style scoped> |
|
|
|
.div_search { |
|
|
|
z-index: 10; |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
left: 20px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.div_back { |
|
|
|
z-index: 10; |
|
|
|
right: 10px; |
|
|
|
top: 1px; |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
right: 20px; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.div_tip { |
|
|
|
@ -894,8 +1133,12 @@ export default vueGis; |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
.div_map { |
|
|
|
margin-top: 15px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.div_textarea { |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.ol-overlaycontainer-stopevent { |
|
|
|
|
dai
3 years ago