|
|
|
@@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<van-nav-bar |
|
|
|
title="农村宅基地申请" |
|
|
|
title="用地建房申请" |
|
|
|
left-arrow |
|
|
|
fixed |
|
|
|
placeholder |
|
|
|
@@ -60,7 +60,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="applicationDetail.tHouseApplyFamilyMembers"> |
|
|
|
<div v-if="applicationDetail.tHouseApplyFamilyMembers && applicationDetail.tHouseApplyFamilyMembers!=''"> |
|
|
|
<p class="main_title">家庭成员信息<van-button icon="plus" size="mini" type="info" native-type="button" class="addFamily" @click="addFamily" v-if="!auditStatus" /></p> |
|
|
|
<van-collapse v-model="activeNames" v-if="auditStatus"> |
|
|
|
<van-collapse-item class="collapse" v-for="(item , index) in applicationDetail.tHouseApplyFamilyMembers" :key="index" :name="index+1"> |
|
|
|
@@ -156,90 +156,97 @@ |
|
|
|
<div v-if="applicationDetail.tHouseApplyProposedSituation"> |
|
|
|
<p class="main_title">拟申请宅基地及建房情况</p> |
|
|
|
<div class="main_box"> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.location" label="拟建位置" placeholder="拟建位置" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.east" label="东至" placeholder="东至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.west" label="西至" placeholder="西至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.south" label="南至" placeholder="南至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.north" label="北至" placeholder="北至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingFloors" label="建筑层数" placeholder="建筑层数" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingHight" label="建筑高度" placeholder="建筑高度" input-align="right"/> |
|
|
|
<van-cell title="是否征求相邻权利人意见"> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio-group :disabled="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.isAdvice" direction="horizontal"> |
|
|
|
<van-radio name="1">是</van-radio> |
|
|
|
<van-radio name="2">否</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
v-model="housingStructureValue" |
|
|
|
label="房屋构造" |
|
|
|
placeholder="选择房屋构造" |
|
|
|
@click=" auditStatus==true ? '' : showHousingStructure = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
<van-popup v-model="showHousingStructure" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="housingStructure" |
|
|
|
@confirm="onConfirmHousingStructure" |
|
|
|
@cancel="showHousingStructure = false" |
|
|
|
:readonly="auditStatus" |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.location" label="拟建位置" placeholder="拟建位置" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.east" label="东至" placeholder="东至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.west" label="西至" placeholder="西至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.south" label="南至" placeholder="南至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.north" label="北至" placeholder="北至" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingFloors" label="建筑层数" placeholder="建筑层数" input-align="right"/> |
|
|
|
<van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingHight" label="建筑高度" placeholder="建筑高度" input-align="right"/> |
|
|
|
<van-cell title="是否征求相邻权利人意见"> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio-group :disabled="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.isAdvice" direction="horizontal"> |
|
|
|
<van-radio name="1">是</van-radio> |
|
|
|
<van-radio name="2">否</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
v-model="housingStructureValue" |
|
|
|
label="房屋构造" |
|
|
|
placeholder="选择房屋构造" |
|
|
|
@click=" auditStatus==true ? '' : showHousingStructure = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
:value="buildingTypeValue" |
|
|
|
label="建房类型" |
|
|
|
placeholder="选择建房类型" |
|
|
|
@click=" auditStatus==true ? '' : showBuildingType = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
<van-popup v-model="showBuildingType" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="buildingType" |
|
|
|
@confirm="onConfirmBuildingType" |
|
|
|
@cancel="showBuildingType = false" |
|
|
|
<van-popup v-model="showHousingStructure" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="housingStructure" |
|
|
|
@confirm="onConfirmHousingStructure" |
|
|
|
@cancel="showHousingStructure = false" |
|
|
|
:readonly="auditStatus" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
:value="buildingTypeValue" |
|
|
|
label="建房类型" |
|
|
|
placeholder="选择建房类型" |
|
|
|
@click=" auditStatus==true ? '' : showBuildingType = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
<van-cell title="设计图纸"> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio-group :disabled="auditStatus" @change="designPaperChange" v-model="applicationDetail.tHouseApplyProposedSituation.designPaper" direction="horizontal"> |
|
|
|
<van-radio name="1">委托设计</van-radio> |
|
|
|
<van-radio name="2">选通用图</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
:value="houseTypeValue" |
|
|
|
placeholder="选择户型图" |
|
|
|
@click=" auditStatus==true ? '' : showHouseType = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
v-if="showHouse" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
<van-popup v-model="showHouseType" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="houseType" |
|
|
|
@confirm="onConfirmHouseType" |
|
|
|
@cancel="showHouseType = false" |
|
|
|
<van-popup v-model="showBuildingType" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="buildingType" |
|
|
|
@confirm="onConfirmBuildingType" |
|
|
|
@cancel="showBuildingType = false" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
<van-cell title="设计图纸"> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio-group :disabled="auditStatus" @change="designPaperChange" v-model="applicationDetail.tHouseApplyProposedSituation.designPaper" direction="horizontal"> |
|
|
|
<van-radio name="1">委托设计</van-radio> |
|
|
|
<van-radio name="2">选通用图</van-radio> |
|
|
|
</van-radio-group> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
:value="houseTypeValue" |
|
|
|
placeholder="选择户型图" |
|
|
|
@click=" auditStatus==true ? '' : showHouseType = true" |
|
|
|
input-align="right" |
|
|
|
right-icon="arrow-down" |
|
|
|
v-if="showHouse" |
|
|
|
:rules="[{ required: true }]" required |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
<van-popup v-model="showHouseType" position="bottom"> |
|
|
|
<van-picker |
|
|
|
show-toolbar |
|
|
|
:columns="houseType" |
|
|
|
@confirm="onConfirmHouseType" |
|
|
|
@cancel="showHouseType = false" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
<div class="mapBox"> |
|
|
|
<div id="mapWrap" style="height: 200px;"></div> |
|
|
|
<div class="mapBox_button"> |
|
|
|
<van-button id="drawPolygon" native-type="button" icon="../../../static/images/icon/icon_ht.png" type="default" block round size="small"></van-button> |
|
|
|
<van-button id="drawRemove" native-type="button" icon="cross" type="default" block round size="small" style="margin-top: 0.2rem"></van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="applicationDetail.tHouseApplyProposer"> |
|
|
|
@@ -386,12 +393,14 @@ |
|
|
|
|
|
|
|
</van-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { allInformation , treeSingleProcessView , attachmentFind , saveHouseBaseInfo , houseList , attach , removeFile , saveHouseBaseInfoThenSubmit} from "@/api/onlineHome/homestead/application"; |
|
|
|
export default { |
|
|
|
import $ from "jquery"; |
|
|
|
export default { |
|
|
|
name: "applicationForm", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@@ -552,6 +561,10 @@ export default { |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
var that = this ; |
|
|
|
setTimeout(function(){ |
|
|
|
that.pointDarw(); |
|
|
|
},2000) |
|
|
|
}); |
|
|
|
}, |
|
|
|
onConfirmApplyTime(date) { |
|
|
|
@@ -611,7 +624,6 @@ export default { |
|
|
|
}, |
|
|
|
//删除家庭成员 |
|
|
|
deleteFamily(index){ |
|
|
|
|
|
|
|
this.applicationDetail.tHouseApplyFamilyMembers.splice(index,1) |
|
|
|
}, |
|
|
|
//是否有宅基地选项改变 |
|
|
|
@@ -720,6 +732,265 @@ export default { |
|
|
|
},1000) |
|
|
|
|
|
|
|
}, |
|
|
|
pointDarw() { |
|
|
|
//地图只加载一次 |
|
|
|
this.landOpen = false; |
|
|
|
//加载地图编辑 |
|
|
|
var that = this; |
|
|
|
var map; |
|
|
|
//var hc_land; |
|
|
|
var draw; // global so we can remove it later |
|
|
|
var vector_drawing; |
|
|
|
var minMapZoom; |
|
|
|
var maxMapZoom; |
|
|
|
var zoomLook; |
|
|
|
if (this.formEditor) { |
|
|
|
zoomLook = 18 |
|
|
|
minMapZoom = 18 |
|
|
|
maxMapZoom = 18 |
|
|
|
} else { |
|
|
|
zoomLook = 16.9 |
|
|
|
minMapZoom = 16 |
|
|
|
maxMapZoom = 18.9 |
|
|
|
} |
|
|
|
if (this.applicationDetail.tHouseApplyProposedSituation.theGeom != null && this.applicationDetail.tHouseApplyProposedSituation.theGeom != "" |
|
|
|
&& this.applicationDetail.tHouseApplyProposedSituation.theGeom != undefined) { |
|
|
|
this.startDarw = true; |
|
|
|
this.openDarw = false; |
|
|
|
} else { |
|
|
|
this.startDarw = false; |
|
|
|
this.openDarw = true; |
|
|
|
} |
|
|
|
if (this.startDarw) { |
|
|
|
document.getElementById("mapWrap").innerHTML = ''; |
|
|
|
var hc_land; |
|
|
|
var draw; // global so we can remove it later |
|
|
|
var vector_drawing; |
|
|
|
var projection = new ol.proj.Projection({ |
|
|
|
//地图投影类型 |
|
|
|
code: "EPSG:3857", |
|
|
|
units: "degrees", |
|
|
|
//extent:extent |
|
|
|
}); |
|
|
|
|
|
|
|
var aerial = new ol.layer.Tile({ |
|
|
|
source: new ol.source.XYZ({ |
|
|
|
url: "http://t0.tianditu.gov.cn/img_w/wmts?" + |
|
|
|
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + |
|
|
|
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067", |
|
|
|
}), |
|
|
|
isGroup: true, |
|
|
|
name: "卫星影像图", |
|
|
|
}); |
|
|
|
|
|
|
|
var yingxzi = new ol.layer.Tile({ |
|
|
|
source: new ol.source.XYZ({ |
|
|
|
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067", |
|
|
|
}), |
|
|
|
isGroup: true, |
|
|
|
name: "天地图文字标注--卫星影像图", |
|
|
|
}); |
|
|
|
//加载地图 |
|
|
|
map = new ol.Map({ |
|
|
|
// interactions: ol.interaction.DragPan({ |
|
|
|
// onFocusOnly: false |
|
|
|
// }), |
|
|
|
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮 |
|
|
|
layers: [aerial, yingxzi], |
|
|
|
projection: projection, |
|
|
|
target: "mapWrap", |
|
|
|
view: new ol.View({ |
|
|
|
//center: ol.proj.fromLonLat([115.452752, 31.789033]), |
|
|
|
zoom: zoomLook, |
|
|
|
minZoom: minMapZoom, //地图缩小限制 |
|
|
|
maxZoom: maxMapZoom, //地图放大限制 |
|
|
|
}), |
|
|
|
}); |
|
|
|
if (this.formEditor) { |
|
|
|
let pan = getPan(); |
|
|
|
//false：当前地图不可拖动。true：可拖动 |
|
|
|
pan.setActive(false); |
|
|
|
|
|
|
|
function getPan() { |
|
|
|
let pan = ''; |
|
|
|
map.getInteractions().forEach(function (element, index, array) { |
|
|
|
if (element instanceof ol.interaction.DragPan) { |
|
|
|
pan = element; |
|
|
|
} |
|
|
|
}) |
|
|
|
return pan; |
|
|
|
} |
|
|
|
} |
|
|
|
//图层查询定位开始 ---------start |
|
|
|
hc_land = new ol.layer.Vector({ |
|
|
|
title: "add Layer", |
|
|
|
source: new ol.source.Vector({ |
|
|
|
projection: projection, |
|
|
|
features: new ol.format.GeoJSON().readFeatures("{\n" + |
|
|
|
" \"type\": \"Feature\",\n" + |
|
|
|
" \"geometry\":" + this.applicationDetail.tHouseApplyProposedSituation.theGeom + "}"), |
|
|
|
}), |
|
|
|
style: new ol.style.Style({ |
|
|
|
fill: new ol.style.Fill({ |
|
|
|
//矢量图层填充颜色，以及透明度 |
|
|
|
color: "rgba(204, 255, 204,0.3)", |
|
|
|
}), |
|
|
|
stroke: new ol.style.Stroke({ |
|
|
|
//边界样式 |
|
|
|
color: "#47c68f", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
map.addLayer(hc_land); |
|
|
|
var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX; |
|
|
|
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY; |
|
|
|
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX; |
|
|
|
var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY; |
|
|
|
//定位查询位置 |
|
|
|
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 |
|
|
|
map.getView().animate({ |
|
|
|
// 只设置需要的属性即可 |
|
|
|
center: center, // 中心点 |
|
|
|
zoom: 17.9, // 缩放级别 |
|
|
|
rotation: undefined, // 缩放完成view视图旋转弧度 |
|
|
|
duration: 1000, // 缩放持续时间，默认不需要设置 |
|
|
|
}); |
|
|
|
//图层查询定位结束 ---------end |
|
|
|
//开始绘制地图 |
|
|
|
$("#drawPolygon").click(function () { |
|
|
|
map.removeLayer(hc_land); |
|
|
|
map.removeLayer(vector_drawing); |
|
|
|
that.drawInsert = null; |
|
|
|
map.removeInteraction(draw); |
|
|
|
var source = new ol.source.Vector({wrapX: false}); |
|
|
|
vector_drawing = new ol.layer.Vector({ |
|
|
|
source: source, |
|
|
|
}); |
|
|
|
map.addLayer(vector_drawing); |
|
|
|
var typeSelect = "Polygon"; |
|
|
|
|
|
|
|
function addInteraction() { |
|
|
|
var value = typeSelect; |
|
|
|
draw = new ol.interaction.Draw({ |
|
|
|
source: source, |
|
|
|
type: typeSelect |
|
|
|
}); |
|
|
|
draw.on('drawend', function (evt) { |
|
|
|
console.log(that.drawInsert); |
|
|
|
if(that.drawInsert != null){ |
|
|
|
$("#drawRemove").trigger('click'); |
|
|
|
} |
|
|
|
var feature = evt.feature; |
|
|
|
var geometry = feature.getGeometry(); |
|
|
|
var coordinate = geometry.getCoordinates(); |
|
|
|
that.drawInsert = coordinate; |
|
|
|
map.removeInteraction(draw); |
|
|
|
}); |
|
|
|
map.addInteraction(draw); |
|
|
|
} |
|
|
|
addInteraction(); |
|
|
|
}); |
|
|
|
//清除画图鼠标点击事件 |
|
|
|
$("#drawRemove").click(function () { |
|
|
|
that.drawInsert = null; |
|
|
|
map.addLayer(hc_land); |
|
|
|
map.removeInteraction(draw); |
|
|
|
map.removeLayer(vector_drawing); |
|
|
|
}); |
|
|
|
} |
|
|
|
if (this.openDarw) { |
|
|
|
document.getElementById("mapWrap").innerHTML = ''; |
|
|
|
var projection = new ol.proj.Projection({ |
|
|
|
//地图投影类型 |
|
|
|
code: "EPSG:3857", |
|
|
|
units: "degrees", |
|
|
|
//extent:extent |
|
|
|
}); |
|
|
|
|
|
|
|
var aerial = new ol.layer.Tile({ |
|
|
|
source: new ol.source.XYZ({ |
|
|
|
url: "http://t0.tianditu.gov.cn/img_w/wmts?" + |
|
|
|
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + |
|
|
|
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067", |
|
|
|
}), |
|
|
|
isGroup: true, |
|
|
|
name: "卫星影像图", |
|
|
|
}); |
|
|
|
|
|
|
|
var yingxzi = new ol.layer.Tile({ |
|
|
|
source: new ol.source.XYZ({ |
|
|
|
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067", |
|
|
|
}), |
|
|
|
isGroup: true, |
|
|
|
name: "天地图文字标注--卫星影像图", |
|
|
|
}); |
|
|
|
//获取坐标是否存在 |
|
|
|
var Zb; |
|
|
|
if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null) { |
|
|
|
Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat] |
|
|
|
} else { |
|
|
|
Zb = [115.452752, 31.789033]; |
|
|
|
} |
|
|
|
//加载地图 |
|
|
|
map = new ol.Map({ |
|
|
|
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮 |
|
|
|
layers: [aerial, yingxzi], |
|
|
|
projection: projection, |
|
|
|
logo: 'false', |
|
|
|
target: "mapWrap", |
|
|
|
view: new ol.View({ |
|
|
|
center: ol.proj.fromLonLat(Zb), |
|
|
|
//center: ol.proj.fromLonLat([115.452752, 31.789033]), |
|
|
|
zoom: 16.9, |
|
|
|
minZoom: minMapZoom, //地图缩小限制 |
|
|
|
maxZoom: maxMapZoom, //地图放大限制 |
|
|
|
}), |
|
|
|
}); |
|
|
|
|
|
|
|
//图层查询定位结束 ---------end |
|
|
|
//开始绘制地图 |
|
|
|
$("#drawPolygon").click(function () { |
|
|
|
//map.removeLayer(hc_land); |
|
|
|
map.removeLayer(vector_drawing); |
|
|
|
that.drawInsert = null; |
|
|
|
map.removeInteraction(draw); |
|
|
|
var source = new ol.source.Vector({wrapX: false}); |
|
|
|
vector_drawing = new ol.layer.Vector({ |
|
|
|
source: source, |
|
|
|
}); |
|
|
|
map.addLayer(vector_drawing); |
|
|
|
var typeSelect = "Polygon"; |
|
|
|
|
|
|
|
function addInteraction() { |
|
|
|
var value = typeSelect; |
|
|
|
draw = new ol.interaction.Draw({ |
|
|
|
source: source, |
|
|
|
type: typeSelect |
|
|
|
}); |
|
|
|
draw.on('drawend', function (evt) { |
|
|
|
console.log(that.drawInsert); |
|
|
|
if(that.drawInsert != null){ |
|
|
|
$("#drawRemove").trigger('click'); |
|
|
|
} |
|
|
|
var feature = evt.feature; |
|
|
|
var geometry = feature.getGeometry(); |
|
|
|
var coordinate = geometry.getCoordinates(); |
|
|
|
that.drawInsert = coordinate; |
|
|
|
map.removeInteraction(draw); |
|
|
|
}); |
|
|
|
map.addInteraction(draw); |
|
|
|
} |
|
|
|
addInteraction(); |
|
|
|
}); |
|
|
|
//清除画图鼠标点击事件 |
|
|
|
$("#drawRemove").click(function () { |
|
|
|
that.drawInsert = null; |
|
|
|
map.removeInteraction(draw); |
|
|
|
map.removeLayer(vector_drawing); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
@@ -727,6 +998,21 @@ export default { |
|
|
|
<style scoped lang="scss"> |
|
|
|
.app-container { |
|
|
|
} |
|
|
|
#mapWrap{ |
|
|
|
width: 96%; |
|
|
|
margin: 0 auto; |
|
|
|
border-bottom-left-radius: 12px; |
|
|
|
border-bottom-right-radius: 12px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.mapBox{ |
|
|
|
position: relative; |
|
|
|
.mapBox_button{ |
|
|
|
position: absolute; |
|
|
|
top: 0.2rem; |
|
|
|
right: 2%; |
|
|
|
} |
|
|
|
} |
|
|
|
.van-steps{ |
|
|
|
padding: 2% 6% 0; |
|
|
|
} |
|
|
|
|
