zhangzl
/
nsgk_mobile
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

切换地图搜索功能添加

wulanhaote
hbao 3 лет назад
Родитель
af8d586d9f
Сommit
97c1171b7e
1 измененных файлов: 332 добавлений и 340 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +332
    -340
      src/views/homesteadSurvey/list.vue

+ 332
- 340
src/views/homesteadSurvey/list.vue Просмотреть файл

@@ -401,68 +401,18 @@
</template>
</van-search>
<div class="searchBox">
<van-cell center >
<van-cell center v-for="(item,index) in mapDataAll">
<template #title>
<p><van-icon name="manager" /><span>刘茂强</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">已核查</span></p>
<p><van-icon name="manager" /><span>{{item.syqr}}</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">{{item.houseDataConfirmStatus}}</span></p>
</template>
<template #default>
<p style="border: 1px solid #7ac943;color:#7ac943;">查看详情</p>
</template>
<template #label>
<p style="font-size: 0.25rem;color: #666666;">宅基地代码 230381199705255117</p>
<p style="font-size: 0.25rem;color: #666666;">宗地面积 113.87㎡</p>
<p style="font-size: 0.25rem;color: #666666;">宅基地代码 {{item.zjddm}}</p>
<p style="font-size: 0.25rem;color: #666666;">宗地面积 {{item.zdmj}}㎡</p>
</template>
</van-cell>

<van-cell center >
<template #title>
<p><van-icon name="manager" /><span>刘茂强</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">已核查</span></p>
</template>
<template #default>
<p style="border: 1px solid #7ac943;color:#7ac943;">查看详情</p>
</template>
<template #label>
<p style="font-size: 0.25rem;color: #666666;">宅基地代码 230381199705255117</p>
<p style="font-size: 0.25rem;color: #666666;">宗地面积 113.87㎡</p>
</template>
</van-cell>
</div>
</div>
<!--点击显示的搜索--->
<div class="landHomestead_wrap">
<div class="landHomestead_search">
<div class="bar_icon"></div>
<div class="bar_ipt">
<input
type="text"
v-model="seachText"
placeholder="请输入宗地或权利人信息"
/>
</div>
<div class="bar_text" @click="toggleSearch">搜索</div>
</div>
<div class="landHomestead_body">
<!--0-农房-->
<div class="body_flex">
<div class="attribute" @click="houseLandLookInfo('show', 'house')">
<div class="names">1111</div>
<div class="address">1111</div>
<div class="nature">性质：1111</div>
</div>
<div class="distance" @click="houseLandLookInfo('show', 'house')">
<div class="size">1111</div>
<div class="probably">大约111㎡</div>
</div>
<div class="others">
<div class="information">
<div class="status_text">111</div>
</div>
<div class="editor">
<div class="editor_icon" @click="editnfdInfo"></div>
<div class="delete_icon" @click="deletefdInfo"></div>
</div>
</div>
</div>
</div>
</div>
<!--图层-->
@@ -1257,7 +1207,7 @@
selectionIconShow: false,
//搜索栏目-操作栏显隐
searchBarOperVisbile: false,
mapDataAll: [],
mapDataAll: "",
showSearch:false,
bottomHeight:'0px',
//搜索---end
@@ -1877,6 +1827,7 @@
zoom: 10,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
pinchRotate: false, //禁止地图旋转
}),
});

@@ -2475,8 +2426,90 @@

//地图定义
var delete_map = ["mapZjd", "mapZrz","mapFsss"];
var texiao_layer_zjd;
var texiao_layer_zrz;
var texiao_layer_fsss;
//按照查询条件人名 定位地图-----------------start
$("#query").on("click", function () {
//数据库查询数据------------------------------------------------------start
var val = that.seachText;
if (val == "") {
that.$toast('请填写查询条件再查询');
} else {
var styleZjd = new ol.style.Style({
stroke: new ol.style.Stroke({
//边界样式
color: "#CCFF66",
width: 6,
}),
});
let params = {
"deptId" : that.$cookies.get("item").deptId,
"zjddm" : val,
"syqr" : val,
"pageSize":20,
}
listZjdzd(params).then((response) => {
if(response.rows.length>=0){
that.mapDataAll = response.rows;
for(var hg=0; that.mapDataAll.length >0; hg++){
var mapNum = that.mapDataAll[hg].houseDataConfirmStatus;
if(mapNum == "UNCONFIRMED"){
that.mapDataAll[hg].houseDataConfirmStatus = "未核查";
} else if (mapNum == "CONFIRMED"){
that.mapDataAll[hg].houseDataConfirmStatus = "已核查";
}else{
that.mapDataAll[hg].houseDataConfirmStatus = "";
}
if (that.mapDataAll[hg] !=null && that.mapDataAll[hg].theGeom != null && that.mapDataAll[hg].theGeom != "") {
that.mapDataAll[hg].createBy = 'mapTheGeomZjdId';
var 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\":" + that.mapDataAll[hg].theGeom + ", \"properties\":" + JSON.stringify(that.mapDataAll[hg]) + "}"),
}),
style: styleZjd
});
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: 15.8, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
}
}
setTimeout(function () {
console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true))
that.showSearch = true ;
var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
document.styleSheets[0].insertRule(
"@keyframes test" +
"{" +
"0%{bottom: -" + height + "px;}" +
"100%{bottom: 0px;}" +
"}"
)
$('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'});
//}
},500);
} else {
that.$toast("暂无数据")
}
});
}
//数据库查询数据------------------------------------------------------end
//地图查询------------------------------------------------------------start
/**
* @api wfs服务空间查询
* @param {*} wfsurl
@@ -2485,130 +2518,248 @@
* @param {*} drawType
* @param {option 可选} geometryField
*/
var val = that.seachText;
if (val == "") {
that.$toast('请填写查询条件再查询');
} else {
//清除之前查询数据
that.mapDataAll =[];
//分类查询查询农地、农房
var difang;
//查询条件
var cql_filter_cun;
var cun = that.$cookies.get("item").deptName;
difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
var tach = 0;
var once = 0;
for (var i = 0; i < difang.length; i++) {
map.removeLayer(delete_map[i]);
// 数字验证！
var reg = /\d/;
//验证汉子
//var han = /^[\u4e00-\u9fa5]+$/;
if (reg.test(val)) {
//循环判断查询条件
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else {
//循环判断查询条件
if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
console.log("hhhhhh");
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
}
}
//for(var i=0; i< difang.length; i++){
//cql_filter = "CM='"+cun +"'"+ "and XZQK='待流转待盘活'";

//图层加载

//业务图层 wms服务
delete_map[i] = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: {
LAYERS: difang[i],
//'LAYERS': 'new_shp:new_shp_all',
TILED: true,
cql_filter: cql_filter_cun,
SRID: 3857,
},
}),
});

//}
//定位查询位置
let param_dw = {
srsName: "EPSG:3857",
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typename: difang[i],
//featureNS: 'nsgk_hc',//命名空间 URI
cql_filter: cql_filter_cun,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
};
let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
url_dw = url_dw + "?";
for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&";
}
url_dw = url_dw.substr(0, url_dw.length - 1);
fetch(url_dw, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
var geojsonmap = res.json();
return geojsonmap;
})
.then((data) => {
tach = tach + 1;
if (data.features != null && data.features != "") {
// var datamap = data.features[0].bbox;
// map.getView().animate({
// // 只设置需要的属性即可
// center: datamap, // 中心点
// zoom: 17, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// });
var exfor = 0;
for(exfor;data.features.length > exfor; exfor++){
that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[exfor].properties)));
}
let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
map.getView().fit(data.bbox);
map.getView().setResolution(resolution);
} else if (tach == 1) {
once = once + 1;
} else {
if (once == 1 && tach == 3) {
that.$toast("没有找到相关人员信息");
}
}
})
.catch((error) => {
console.log("【异常】", error);
});
map.addLayer(delete_map[i]);
}
console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true))
that.showSearch = true ;
var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
document.styleSheets[0].insertRule(
"@keyframes test" +
"{" +
"0%{bottom: -" + height + "px;}" +
"100%{bottom: 0px;}" +
"}"
)
$('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'});
}
// var val = that.seachText;
// if (val == "") {
// that.$toast('请填写查询条件再查询');
// } else {
// //清除之前查询数据
// that.mapDataAll =[];
// //分类查询查询农地、农房
// var difang;
// //查询条件
// var cql_filter_cun;
// var cun = that.$cookies.get("item").deptId;
// difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
// var tach = 0;
// var once = 0;
// for (var i = 0; i < difang.length; i++) {
// map.removeLayer(delete_map[i]);
// // 数字验证！
// var reg = /\d/;
// //验证汉子
// //var han = /^[\u4e00-\u9fa5]+$/;
// if (reg.test(val)) {
// //循环判断查询条件
// cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
// } else {
// //循环判断查询条件
// if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
// cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
// } else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
// cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
// } else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
// cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'";
// }
// }
// //for(var i=0; i< difang.length; i++){
// //cql_filter = "CM='"+cun +"'"+ "and XZQK='待流转待盘活'";
//
// //图层加载
//
// //业务图层 wms服务
// delete_map[i] = new ol.layer.Tile({
// source: new ol.source.TileWMS({
// url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
// params: {
// LAYERS: difang[i],
// //'LAYERS': 'new_shp:new_shp_all',
// TILED: true,
// cql_filter: cql_filter_cun,
// SRID: 3857,
// },
// }),
// });
//
// //}
// //定位查询位置
// let param_dw = {
// srsName: "EPSG:3857",
// service: "WFS",
// version: "1.0.0",
// request: "GetFeature",
// typename: difang[i],
// //featureNS: 'nsgk_hc',//命名空间 URI
// cql_filter: cql_filter_cun,
// //featurePrefix: 'nationalwater',//工作区名称
// //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
// outputFormat: "application/json",
// //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
// };
// let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
// url_dw = url_dw + "?";
// for (let key in param_dw) {
// url_dw = url_dw + key + "=" + param_dw[key] + "&";
// }
// url_dw = url_dw.substr(0, url_dw.length - 1);
// fetch(url_dw, {
// method: "POST", // *GET, POST, PUT, DELETE, etc.
// })
// .then((res) => {
// var geojsonmap = res.json();
// return geojsonmap;
// })
// .then((data) => {
// tach = tach + 1;
// if (data.features != null && data.features != "") {
// for(var i=0; data.features.length >i; i++) {
// //特效动画实现 -----------------------------start
// console.log(tach,"++++++++++++++++++",once)
// var datamap = data.features[0].bbox;
// if (tach == 1 && once == 0) {
// console.log("zrz")
// texiao_layer_zjd = new ol.layer.Vector({
// source: new ol.source.Vector(),
// });
// map.addLayer(texiao_layer_zjd);
// var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
// var circle = new ol.Feature({
// geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
// });
//
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: 0,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// texiao_layer_zjd.getSource().addFeature(circle);
//
// // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
// var radius = 0;
// map.on("postcompose", function () {
// // 增大半径，最大20
// radius++;
// radius = radius % 10;
// // 设置样式
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: radius,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// });
// } else if(tach == 2) {
// console.log("zrz")
// texiao_layer_zrz = new ol.layer.Vector({
// source: new ol.source.Vector(),
// });
// map.addLayer(texiao_layer_zrz);
// var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
// var circle = new ol.Feature({
// geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
// });
//
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: 0,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// texiao_layer_zrz.getSource().addFeature(circle);
//
// // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
// var radius = 0;
// map.on("postcompose", function () {
// // 增大半径，最大20
// radius++;
// radius = radius % 10;
// // 设置样式
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: radius,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// });
// } else {
// console.log("fsss")
// texiao_layer_fsss = new ol.layer.Vector({
// source: new ol.source.Vector(),
// });
// map.addLayer(texiao_layer_fsss);
// var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
// var circle = new ol.Feature({
// geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
// });
//
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: 0,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// texiao_layer_fsss.getSource().addFeature(circle);
//
// // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
// var radius = 0;
// map.on("postcompose", function () {
// // 增大半径，最大20
// radius++;
// radius = radius % 10;
// // 设置样式
// circle.setStyle(
// new ol.style.Style({
// image: new ol.style.Circle({
// radius: radius,
// stroke: new ol.style.Stroke({
// color: "yellow",
// size: 1,
// }),
// }),
// })
// );
// });
// }
// //特效动画实现 -----------------------------end
// that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[i].properties)));
// }
// //定位实现
// let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize());
// map.getView().fit(data.bbox);
// map.getView().setResolution(resolution);
// console.log(that.mapDataAll);
// } else if (tach == 1) {
// once = once + 1;
// } else {
// if (once == 1 && tach == 3) {
// that.$toast("没有找到相关人员信息");
// //that.showSearch = false ;
// }else {
//
// }
// }
// })
// .catch((error) => {
// console.log("【异常】", error);
// });
// map.addLayer(delete_map[i]);
// }
//地图查询------------------------------------------------------------end
});
//按照查询 定位地图-----------------end

@@ -4284,7 +4435,7 @@
}
.van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;}

searchBar_wrap {
.searchBar_wrap {
// display: none;
position: fixed;
left: 0;
@@ -4295,6 +4446,7 @@
border-top-left-radius: 15px;
border-top-right-radius: 15px;
z-index: 9;

.searchBox{
.van-cell{
/*&:first-child{*/
@@ -4490,165 +4642,5 @@
background-size: 80% 80%;
margin-left: 15px;
}

.landHomestead_wrap {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
padding: 0 16px;
.landHomestead_search {
height: 80px;
background: #f1f1f1;
border: 1px solid #dfdfdf;
border-radius: 10px;
padding: 0 28px;
display: flex;
margin-bottom: 10px;
.bar_icon {
width: 50px;
height: 50px;
background: url("../../assets/images/homestead/searchBar_bar.png")
center center no-repeat;
background-size: 95% 95%;
margin-top: 14px;
margin-right: 15px;
}
.bar_ipt {
flex: 1;
input {
width: 100%;
height: 100%;
background: none;
border: 0 none;
font-size: 32px;
}
}
.bar_text {
flex: 0 0 80px;
font-size: 32px;
color: #333333;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
}
}
.landHomestead_body {
background: #fff;
padding: 30px 20px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
.body_flex {
display: block;
overflow: hidden;
.attribute {
width: 42%;
float: left;

.names {
height: 54px;
padding-left: 46px;
background: url("../../assets/images/homestead/landHomestead_home.png")
left center no-repeat;
background-size: 38px 36px;
font-size: 32px;
line-height: 54px;
color: #333333;
margin-bottom: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.address {
height: 48px;
line-height: 48px;
font-size: 28px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
margin-right: 8px;
}
.nature {
height: 48px;
font-size: 28px;
}
}
.distance {
width: 29%;
float: left;
.size {
height: 54px;
line-height: 54px;
font-size: 40px;
color: #333333;
margin-bottom: 12px;
}
.probably {
line-height: 48px;
font-size: 28px;
height: 48px;
}
}
.others {
width: 29%;
float: left;
.information {
height: 54px;
margin-bottom: 12px;
.status_text {
color: #fff;
font-size: 24px;
background: #3cbf5b;
border-radius: 20px;
padding: 8px 15px;
float: right;
max-width: calc(100% - 56px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location {
width: 36px;
height: 36px;
background: url("../../assets/images/homestead/others_location.png")
no-repeat;
float: right;
margin: 8px 0 0 20px;
}
}
.editor {
height: 96px;
.editor_icon {
width: 72px;
height: 72px;
float: right;
background: url("../../assets/images/homestead/edit_icon.png")
no-repeat;
background-size: 100% 100%;
margin-top: 14px;
box-shadow: 3px 3px 5px rgba(60, 191, 91, 0.3);
border-radius: 50%;
}
.delete_icon {
width: 72px;
height: 72px;
float: right;
background: url("../../assets/images/homestead/delete_icon.png")
no-repeat;
background-size: 100% 100%;
margin-top: 14px;
margin-right: 20px;
box-shadow: 3px 3px 5px rgba(212, 42, 42, 0.3);
border-radius: 50%;
}
}
}
}
}
}
}
</style>

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить