zhangzl
/
nsgk_mobile
2
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

确权调查地块地图

rongxin_prod
QI_YUJIE před 1 rokem
rodič
000fed4f25
revize
fccbea388b
2 změnil soubory, kde provedl 575 přidání a 17 odebrání
Jednotný pohled
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +8
    -0
      src/api/system/config.js
  2. +567
    -17
      src/views/contracted/village/map/map.vue

+ 8
- 0
src/api/system/config.js Zobrazit soubor

@@ -15,3 +15,11 @@ export function getSystemAttachmentUrl() {
method: 'get' method: 'get'
}) })
} }

// 根据参数键名查询参数值
export function getConfigKey(configKey) {
return request({
url: '/open/typz/configKey/' + configKey,
method: 'get'
})
}

+ 567
- 17
src/views/contracted/village/map/map.vue Zobrazit soubor

@@ -13,6 +13,7 @@
</div> </div>


<div style="position:relative;"> <div style="position:relative;">
<div class="mapBox" id="landMapBox"></div>
<div class="legend_main"> <div class="legend_main">
<div class="legend"> <div class="legend">
<p class="legend_tt">图例 <p class="legend_tt">图例
@@ -24,33 +25,560 @@
<div><i></i><p>开荒地</p></div> <div><i></i><p>开荒地</p></div>
<div><i></i><p>其他地</p></div> <div><i></i><p>其他地</p></div>
</div> </div>
<div class="legend_second">
<p class="legend_tt">
<div class="legend_second" >
<p class="legend_tt" id="drawLandPolygon">
<img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图 <img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图
</p> </p>
</div> </div>
</div> </div>
<div class="mapBox"></div>
</div>

<div class="landPopup">
<van-dialog v-model="open" :title="title" :show-confirm-button="false" :show-cancel-button="false">
<van-form ref="landForm">
<van-field v-model="form.dkbm" label="地块代码：" placeholder="请输入地块代码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" > <!-- :disabled="isDisabled" -->
<template #button v-if="!isDisabled">
<van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
</template>
</van-field>
<van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="syqxzText" label="所有权性质："
placeholder="请选择所有权性质"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showOwnership = true"
/>
<van-popup v-model="showOwnership" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="syqxzOptions"
value-key="dictLabel"
@confirm="onConfirmOwnershipOptions"
@cancel="showOwnership = false"
/>
</van-popup>
<van-field v-model="dklbText" label="地块类别："
placeholder="请选择地块类别"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandCategory = true"
/>
<van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="dklbOptions"
value-key="dictLabel"
@confirm="onConfirmLandCategoryOptions"
@cancel="showLandCategory = false"
/>
</van-popup>
<van-field v-model="tdlylxText" label="土地利用类型："
placeholder="请选择土地利用类型"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandType = true"
/>
<van-popup v-model="showLandType" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="tdlylxOptions"
value-key="dictLabel"
@confirm="onConfirmLandTypeOptions"
@cancel="showLandType = false"
/>
</van-popup>
<van-field v-model="dldjText" label="地力等级："
placeholder="请选择地力等级"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandGrade = true"
/>
<van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="dldjOptions"
value-key="dictLabel"
@confirm="onConfirmLandGradeOptions"
@cancel="showLandGrade = false"
/>
</van-popup>
<van-field v-model="tdytText" label="土地用途："
placeholder="请选择土地用途"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandPurpose = true"
/>
<van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="tdytOptions"
value-key="dictLabel"
@confirm="onConfirmLandPurposeOptions"
@cancel="showLandPurpose = false"
/>
</van-popup>
<van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >
<template #input>
<van-radio-group v-model="form.sfjbnt" direction="horizontal">
<!-- <van-radio name="1">是</van-radio>
<van-radio name="2">否</van-radio> -->
<van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" :border="false" input-align="right" />
</van-form>
<div class="footer_main">
<van-button type="default" hairline size="large" @click="closePopup">关闭弹窗</van-button>
<van-button type="danger" hairline size="large" @click="deleteLand(form.id)" v-if="showDeleteBtn">删除地块</van-button>
<van-button type="info" hairline size="large" @click="saveLand" v-if="showSaveBtn">保存信息</van-button>
</div>
</van-dialog>
</div> </div>


</div> </div>
</template> </template>
<script> <script>
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { getConfigKey } from "@/api/system/config";
import { getDept } from "@/api/contracted";
import { getDk, addDk, updateDk, deleteDk, generateLandCode } from "@/api/contracted/dk";
import $ from "jquery";

export default { export default {
name: "contractedVillageContractor", name: "contractedVillageContractor",
data() { data() {
return { return {
loading:false,
finished:true,
value:''
form: {}, // 地块信息表单参数
map: "", // 地图
mapGeoServerUrl: "", // geoserver地址
mapCenterLocation: [], // 地图中心坐标
landLayerName: "", // 地块图层名称
landLayer: "", // 地块图层
mapBorder: "", // 地图边界
villageBorderLayerName: "", // 乡镇边界图层名称
vectorLayer: "", // 绘制的矢量图层

title: "", // 弹出层标题
open: false, // 是否显示地块弹出层
syqxzOptions: [], // 所有权性质字典
syqxzText: null, // 所有权性质标签名
showOwnership: false, // 控制所有权性质字典弹出层的显示和隐藏
dklbOptions: [], // 地块类别字典
dklbText: null, // 地块类别标签名
showLandCategory: false, // 控制的地块类别字典弹出层的显示和隐藏
dldjOptions: [], // 地力等级字典
dldjText: null, // 地力等级标签名
showLandGrade: false, // 控制地力等级字典弹出层的显示和隐藏
tdytOptions: [], // 土地用途字典
tdytText: null, // 土地用途标签名
showLandPurpose: false, // 控制土地用途字典弹出层的显示和隐藏
tdlylxOptions: [], // 土地利用类型
tdlylxText: null, // 土地利用类型标签名
showLandType: false, // 控制土地利用类型字典弹出层的显示和隐藏
sfjbntOptions: [], // 是否基本农田字典
showSaveBtn: false, // 控制保存按钮的显示隐藏
showDeleteBtn: false, // 控制删除按钮的显示隐藏
isDisabled: false, // 是否禁用
}; };
}, },
created() { created() {

this.getDicts("land_ownership").then(response => {
this.syqxzOptions = response.data;
});
this.getDicts("land_type").then(response => {
this.dklbOptions = response.data;
});
this.getDicts("land_grade").then(response => {
this.dldjOptions = response.data;
});
this.getDicts("use_code").then(response => {
this.tdytOptions = response.data;
});
this.getDicts("land_use").then(response => {
this.tdlylxOptions = response.data;
});
this.getDicts("is_common").then(response => {
this.sfjbntOptions = response.data;
});
// 获取geoserver的地址
this.getGeoServerUrl();
// 获取地块图层名称
this.getLandLayerName();
// 获取村边界的图层名称
this.getVillageBorderLayerName();
},
mounted() {
// 初始化地图
setTimeout(() => {
this.initMap();
}, 500);
}, },
methods: { methods: {
// 获取geoserver的地址
getGeoServerUrl() {
getConfigKey("system.geoServer.url").then(response => {
this.mapGeoServerUrl = response.msg;
});
},
// 获取地块图层名称
getLandLayerName() {
getConfigKey("geoserver.layer.landCategory").then(response => {
this.landLayerName = response.msg;
});
},
// 获取村边界的图层名称
getVillageBorderLayerName() {
getConfigKey("geoserver.layer.villageBorder").then(response => {
this.villageBorderLayerName = response.msg;
});
},
// 初始化地图
initMap() {
getDept(this.$route.query.deptId).then(response => {
let dept = response.data;
if (dept.lng && dept.lat) {
this.mapCenterLocation = [dept.lng, dept.lat];
} else {
this.mapCenterLocation = [116.391458, 39.902377];
}
document.getElementById("landMapBox").innerHTML = "";
// 定义地图投影
let projection = new ol.proj.Projection({
code: "EPSG:3857",
units: "degrees",
});
// 定义地图图层
let aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/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: "卫星影像图",
});
let yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
this.map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
layers: [aerial, yingxzi],
projection: projection,
target: "landMapBox",
view: new ol.View({
center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
zoom: 15.5,
minZoom: 1, //地图缩小限制
maxZoom: 18, //地图放大限制
// extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
}),
});
// // 添加村边界
this.addVillageBorder();
// 添加地块图层
this.addLandLayer();
// 绘制地块
$("#drawLandPolygon").click(() => {
// 创建矢量数据源
let vectorSource = new ol.source.Vector({
wrapX: false,
});
// 创建矢量图层
this.vectorLayer = new ol.layer.Vector({
source: vectorSource,
});
// 添加图层
this.map.addLayer(this.vectorLayer);
// 地图交互-绘制图形
let drawInteraction = new ol.interaction.Draw({
source: vectorSource,
type: "Polygon",
});
// 添加交互
this.map.addInteraction(drawInteraction);
drawInteraction.on('drawend', (evt) => {
// 移除交互
this.map.removeInteraction(drawInteraction);
let coordinates = evt.feature.getGeometry().getCoordinates();
this.reset();
this.form.theGeom = JSON.stringify(coordinates);
this.title = "添加地块信息";
this.showSaveBtn = true;
this.showDeleteBtn = false;
this.isDisabled = false;
setTimeout(() => {
this.open = true;
}, 10);


});
});
// 地图点击事件
this.map.on("click", (evt) => {
// 点击宅基地查看详情
if (this.landLayer) {
const viewResolution = this.map.getView().getResolution();
const url = this.landLayer.getSource()
.getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
if (url) {
fetch(url)
.then(response => response.json())
.then(data => {
if (data.features.length > 0) {
let id = data.features[0].id.split(".")[1];
getDk(id).then(response => {
const data = response.data;
this.reset();
this.form = data;
this.syqxzText = this.selectDictLabel(this.syqxzOptions, data.syqxz);
this.dklbText = this.selectDictLabel(this.dklbOptions, data.dklb);
this.dldjText = this.selectDictLabel(this.dldjOptions, data.dldj);
this.tdytText = this.selectDictLabel(this.tdytOptions, data.tdyt);
this.tdlylxText = this.selectDictLabel(this.tdlylxOptions, data.tdlylx);
this.title = "查看地块信息";
this.showSaveBtn = false;
this.showDeleteBtn = true;
this.isDisabled = true;
setTimeout(() => {
this.open = true;
}, 10);
});

/* if (this.selectedHomesteadLayer) {
this.map.removeLayer(this.selectedHomesteadLayer);
this.selectedHomesteadLayer = "";
}
this.selectedHomesteadLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(data)
}),
name: 'selectedHomesteadLayer',
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "rgba(255, 84, 87, 0.3)",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#ff5457",
width: 3,
}),
})
});
// this.map.addLayer(this.selectedHomesteadLayer);
this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);*/
}
});
}
}
});
});
},
// 添加地块图层
addLandLayer() {
this.landLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.landLayerName,
cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
SRID: 3857,
abc: Math.random() // 无效参数，保证每次发送的请求都不一样
}
}),
name: 'landLayer'
});
this.map.getLayers().insertAt(3, this.landLayer);
// this.map.addLayer(this.landLayer);
},
// 添加村边界
addVillageBorder() {
this.mapBorder = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.villageBorderLayerName,
cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
SRID: 3857,
},
}),
name: 'villageBorderLayer'
});
this.map.getLayers().insertAt(2, this.mapBorder);
},
saveLand() {
this.$refs.landForm.validate().then(() => {
if (this.form.id) {
this.showSaveBtn = false;
updateDk(this.form).then(response => {
if (response.code == 200) {
this.$toast({
icon: 'success',
message: '保存成功',
duration:"1000",
onClose: () => {
this.open = false;
this.showSaveBtn = true;
}
});
}
});
} else {
this.form.deptId = this.$route.query.deptId;
this.showSaveBtn = false;
addDk(this.form).then(response => {
if (response.code == 200) {
this.$toast({
icon: 'success',
message: '保存成功',
duration:"1000",
onClose: () => {
this.open = false;
this.showSaveBtn = true;
// 移除矢量图层
this.map.removeLayer(this.vectorLayer);
this.vectorLayer = "";
// 移除地块图层重新加载
this.map.removeLayer(this.landLayer);
this.landLayer = "";
this.addLandLayer();
}
});
}
});
}
}).catch(() => {
this.$notify({ type: 'danger', message: '请填写完整的表单项' });
});
},
deleteLand(id) {
this.$dialog.confirm({
message: '是否确认删除此地块？',
}).then(() => {
// on confirm
this.showDeleteBtn = false;
deleteDk(id).then(res => {
if (res.code == 200) {
this.$toast({
icon: 'success',
message: '删除成功',
duration: "1000",
onClose: () => {
this.open = false;
this.showDeleteBtn = true;
// 移除地块图层重新加载
this.map.removeLayer(this.landLayer);
this.landLayer = "";
this.addLandLayer();
}
});
}
});
}).catch(() => {
// on cancel
});
},
onConfirmOwnershipOptions(value){
this.form.syqxz = value.dictValue;
this.syqxzText = value.dictLabel;
this.showOwnership = false;
},
onConfirmLandCategoryOptions(value){
this.form.dklb = value.dictValue;
this.dklbText = value.dictLabel;
this.showLandCategory = false;
},
onConfirmLandTypeOptions(value) {
this.form.tdlylx = value.dictValue;
this.tdlylxText = value.dictLabel;
this.showLandType = false;
},
onConfirmLandGradeOptions(value) {
this.form.dldj = value.dictValue
this.dldjText = value.dictLabel;
this.showLandGrade = false;
},
onConfirmLandPurposeOptions(value){
this.form.tdyt = value.dictValue;
this.tdytText = value.dictLabel;
this.showLandPurpose = false;
},
generateCode() {
generateLandCode({deptId: this.$route.query.deptId}).then(response => {
this.$set(this.form, 'dkbm', response.data);
});
},
closePopup() {
// 移除矢量图层
if (this.vectorLayer) {
this.map.removeLayer(this.vectorLayer);
this.vectorLayer = "";
}
this.open = false;
this.reset();
},
reset() {
this.form = {
deptId: null,
dkbm: null,
dkmc: null,
syqxz: null,
dklb: null,
tdlylx: null,
dldj: null,
tdyt: null,
sfjbnt: '1',
scmjm: null,
zjrxm: null,
dkdz: null,
dkxz: null,
dknz: null,
dkbz: null,
dkbzxx: null,
theGeom: null
};
this.syqxzText = null;
this.dklbText = null;
this.dldjText = null;
this.tdytText = null;
this.tdlylxText = null;
},
}, },
}; };
</script> </script>
@@ -74,6 +602,20 @@
border: none; border: none;
} }


/deep/ .van-field--disabled .van-field__label {
color: #646566;
}

/deep/ .landPopup .van-dialog {
width: 90%;
height: 85%;
overflow-y: auto;
}

/deep/ .landPopup .van-field__label {
width: 7em;
}

.head{ .head{
padding: 0 4vw; padding: 0 4vw;
} }
@@ -140,24 +682,24 @@
margin-right: 10PX; margin-right: 10PX;
} }
&:nth-child(2) i{ &:nth-child(2) i{
background: rgba(12,255,0,.5);
border-color: rgba(12,255,0,1);
background: rgba(22,233,15,.7);
border-color: rgba(22,233,15,1);
} }
&:nth-child(3) i{ &:nth-child(3) i{
background: rgba(255,137,5,.5);
border-color: rgba(255,137,5,1);
background: rgba(1,198,222,.7);
border-color: rgba(1,198,222,1);
} }
&:nth-child(4) i{ &:nth-child(4) i{
background: rgba(246,255,0,.5);
border-color: rgba(246,255,0,1);
background: rgba(238,238,0,.7);
border-color: rgba(238,238,0,1);
} }
&:nth-child(5) i{ &:nth-child(5) i{
background: rgba(168,0,255,.5);
border-color: rgba(168,0,255,1);
background: rgba(238,60,60,.7);
border-color: rgba(238,60,60,1);
} }
&:nth-child(6) i{ &:nth-child(6) i{
background: rgba(0,234,255,.5);
border-color: rgba(0,234,255,1);
background: rgba(235,134,0,.7);
border-color: rgba(235,134,0,1);
} }
} }
} }
@@ -169,4 +711,12 @@
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
} }


.footer_main {
flex: 0 0 120px;
background: #ccc;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
}

</style> </style>

Zapsat Náhled
Načítá se…
Zrušit
Uložit