zhangzl
/
nsgk_mobile
2
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

全图加载优化

wulanhaote
hbao 3 年之前
父節點
24f11c8bfb
當前提交
18acfcf54f
共有 1 個檔案被更改，包括 689 行新增 和 3 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +689
    -3
      src/views/homesteadSurvey/list.vue

+ 689
- 3
src/views/homesteadSurvey/list.vue 查看文件

@@ -388,6 +388,57 @@
</van-search>-->
<div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
<div id="info" style="display: none"></div>
<!--搜索栏目-->
<div class="searchBar_wrap">
<div class="searchBar_area">
<div class="bar_icon"></div>
<div class="bar_ipt">
<input
type="text"
v-model="seachText"
placeholder="请输入宗地或权利人信息"
/>
</div>
<div id="query" class="bar_text">搜索</div>
</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>
<!--图层-->
<div class="rightZoom_wrap">
<img src="../../assets/images/housesteadSurvey/tool1.png">
@@ -1109,6 +1160,12 @@
checkAllFlag: false,//全选判断标识
CheckedAllArr: [],//全选数组
dataList:[],
//搜索---start
seachText: "",
selectionIconShow: false,
//搜索栏目-操作栏显隐
searchBarOperVisbile: false,
//搜索---end
//地图使用 --end
};
},
@@ -1704,13 +1761,15 @@
// map.addLayer(zhenTc);
//镇边界查询开始 ------------------------------end
//村边界查询开始 ------------------------------start
console.log(that.$cookies.get("item").deptName);
var cql_filter = "ZLDWMC='" + that.$cookies.get("item").deptName + "'";
var cunTc= new ol.layer.Tile({
source: new ol.source.TileWMS({
url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: {
LAYERS: 'zjd_dc:t_house_survey_border_village',
TILED: true,
//cql_filter: cql_filter,
cql_filter: cql_filter,
SRID: 3857,
},
}),
@@ -1723,7 +1782,7 @@
request: "GetFeature",
typename: "zjd_dc:t_house_survey_border_village",
//featureNS: 'nsgk_hc',//命名空间 URI
//cql_filter: cql_filter,
cql_filter: cql_filter,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
@@ -1739,6 +1798,7 @@
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
console.log(res);
var geojsonmap = res.json();
return geojsonmap;
})
@@ -2277,6 +2337,227 @@
// });
//

//地图定义
var delete_map = ["mapZjd", "mapZrz","mapFsss"];
//按照查询条件人名 定位地图-----------------start
$("#query").on("click", function () {
/**
* @api wfs服务空间查询
* @param {*} wfsurl
* @param {*} srsName
* @param {*} typeName
* @param {*} drawType
* @param {option 可选} geometryField
*/
var val = that.seachText;
if (val == "") {
alert("请填写查询条件在查询");
} else {
//分类查询查询农地、农房
var difang;
//查询条件
var cql_filter;

console.log(this.$cookies);
//var cun = _this.villageDataObj.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 = "XH='" + val + "'" + "and dept_name='" + cun + "'";
} else {
//循环判断查询条件
if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
cql_filter = "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://192.168.31.150:8888/geoserver/mywork_mysql/wms',
url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms",
//url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
//url: 'http://localhost:8888/geoserver/new_shp/wms',
params: {
LAYERS: difang[i],
//'LAYERS': 'new_shp:new_shp_all',
TILED: true,
cql_filter: cql_filter,
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,
//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/nsgk_hc/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.bbox;
var datamap = data.features[0].bbox;
map.getView().animate({
// 只设置需要的属性即可
center: datamap, // 中心点
zoom: 17, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//特效动画实现 -----------------------------start
if (tach == 1 && once == 0) {
texiao_layer_fang = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(texiao_layer_fang);
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') //投影坐标转为地理坐标
});

//var out =new ol.coordinate.Coordinate(datamap);
//var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
//var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
//map.getView().setCenter(center); //设置当前地图的显示中心位置
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 0,
stroke: new ol.style.Stroke({
color: "yellow",
size: 1,
}),
}),
})
);
texiao_layer_fang.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 {
texiao_layer_di = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(texiao_layer_di);
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') //投影坐标转为地理坐标
});

//var out =new ol.coordinate.Coordinate(datamap);
//var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
//var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
//map.getView().setCenter(center); //设置当前地图的显示中心位置
circle.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 0,
stroke: new ol.style.Stroke({
color: "yellow",
size: 1,
}),
}),
})
);
texiao_layer_di.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
} else if (tach == 1) {
once = once + 1;
} else {
if (tach == 2 && once == 1) {
alert("没有找到相关人员农房农地信息");
}
}
})
.catch((error) => {
console.log("【异常】", error);
});
map.addLayer(delete_map[i]);
}
}
});
//按照查询 定位地图-----------------end


// //获取类型开始 侧面-----------------------------------------------------------------start
$("#area").click(function () {
console.log("进入测面");
@@ -2554,7 +2835,7 @@
request: "GetFeature",
typename: "zjd_dc:t_house_survey_border_village",
//featureNS: 'nsgk_hc',//命名空间 URI
//cql_filter: cql_filter,
cql_filter: cql_filter,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
@@ -2792,6 +3073,7 @@
}
});
let cloneObj = JSON.parse(JSON.stringify(obj));
that.dataSj =
that.mapZjdData = cloneObj;
} else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){
let obj = {};
@@ -3449,7 +3731,82 @@
}
}
},
//地图查询
toggleSearch() {
$("#query").trigger("click");
},
//显示和隐藏详情
houseLandLookInfo(type, status) {
if (type == "show") {
this.houseLandLookAnmitFun("show");
} else {
this.houseLandLookAnmitFun("hide");
}
},
//显示农地\农房详情 动画
houseLandLookAnmitFun(type) {
if (type == "show") {
this.landHomesteadDetailsVisibile = true;
$(".landHomesteadDetails_wrap").css({ bottom: "-100vh" });
$(".landHomesteadDetails_wrap").animate(
{
bottom: "0",
},
300
);
} else {
$(".landHomesteadDetails_wrap").css({ bottom: "0" });
$(".landHomesteadDetails_wrap").animate(
{
bottom: "-100vh",
},
300
);
setTimeout(() => {
this.landHomesteadDetailsVisibile = false;
}, 300);
}
},

//编辑农地信息
editnfdInfo(type) {
this.currentType = 1;
this.farmlandEditSwitchVisbuleFun("hide");
this.landHomesteadEditVisbileFun("show");
},
//删除农地信息
deletefdInfo() {
this.$dialog
.confirm({
title: "确认执行删除操作？",
message: "删除后内容不可恢复",
})
.then(() => {
console.log(this.farmhouseStatus);
if (this.farmhouseStatus == 0) {
//农房
// houseRemove(this.houseInfoList.id).then((res) => {
// if (res.code == 200) {
// this.hideEditNav();
// // this.tGeoOrganization.orgCode = this.houseInfoList.orgCode;
// // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {});
// }
// });
} else {
//农地
// landRemove(this.landInfoList.id).then((res) => {
// if (res.code == 200) {
// this.hideEditNav();
// // this.tGeoOrganization.orgCode = this.landInfoList.orgCode;
// // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {});
// }
// });
}
})
.catch(() => {
// on cancel
});
},
}
}
</script>
@@ -3764,4 +4121,333 @@
border: 1px solid darkgray;
}
.van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;}

.searchBar_wrap {
// display: none;
display: flex;
position: fixed;
bottom: 0%;
left: 0;
width: 100%;
padding: 28px 16px 28px 13px;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.actionBar_wrap {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.m_list {
flex: 1;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */

.tensile,
.positioning,
.spacing,
.scale {
width: 76px;
height: 72px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
.icon {
width: 76px;
height: 72px;
}
&.active {
background: #333;
&.tensile {
.icon {
background: url("../../assets/images/homestead/operation/tensile_active.png")
center center no-repeat;
background-size: 38px 50px;
}
}
&.positioning {
.icon {
background: url("../../assets/images/homestead/operation/positioning_active.png")
center center no-repeat;
background-size: 38px 48px;
}
}
&.spacing {
.icon {
background: url("../../assets/images/homestead/operation/spacing_active.png")
center center no-repeat;
background-size: 46px 46px;
}
}
&.scale {
.icon {
background: url("../../assets/images/homestead/operation/scale_active.png")
center center no-repeat;
background-size: 48px 48px;
}
}
}
}
.tensile {
.icon {
background: url("../../assets/images/homestead/operation/tensile.png")
center center no-repeat;
background-size: 38px 50px;
}
}
.positioning {
.icon {
background: url("../../assets/images/homestead/operation/positioning.png")
center center no-repeat;
background-size: 38px 48px;
}
}
.spacing {
.icon {
background: url("../../assets/images/homestead/operation/spacing.png")
center center no-repeat;
background-size: 46px 46px;
}
}
.scale {
.icon {
background: url("../../assets/images/homestead/operation/scale.png")
center center no-repeat;
background-size: 48px 48px;
}
}
.closes {
background: url("../../assets/images/homestead/searchBar_close.png")
no-repeat;
background-size: 100% 100%;
width: 72px;
height: 72px;
&.gray {
background: url("../../assets/images/homestead/searchBar_close_gray.png")
no-repeat;
background-size: 100% 100%;
}
}
.correct {
background: url("../../assets/images/homestead/searchBar_save.png")
no-repeat;
background-size: 100% 100%;
width: 72px;
height: 72px;
}
}
}
.searchBar_area {
flex: 1;
height: 80px;
background: #f1f1f1;
border: 1px solid #dfdfdf;
border-radius: 10px;
padding: 0 28px;
display: flex;
.bar_icon {
width: 50px;
height: 50px;
background: url("../../assets/images/homestead/searchBar_bar.png")
center center no-repeat;
background-size: 100% 100%;
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; /* 子元素相对父元素垂直居中 */
}
}
.searchBar_more {
flex: 0 0 80px;
background: url("../../assets/images/homestead/searchBar_add.png") center
center no-repeat;
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>

Write Preview
Loading…
取消
儲存