zhangzl
/
nsgk_mobile
2
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

总村地图优化

wulanhaote
hbao 3年前
親
7ba07c2f2d
コミット
d6d72502cd
1個のファイルの変更、259行の追加、152行の削除
ユニファイド表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +259
    -152
      src/views/homesteadSurvey/list.vue

+ 259
- 152
src/views/homesteadSurvey/list.vue ファイルの表示

@@ -382,27 +382,53 @@
</van-form> </van-form>
</div> </div>
<div v-if="activeBtn==4"> <div v-if="activeBtn==4">
<!-- <van-search placeholder="请输入宅基地号查询" v-if="false">
<template #action>
</template>
</van-search>-->
<!-- <van-search placeholder="请输入宅基地号查询" v-if="false">
<template #action>
</template>
</van-search>-->
<div id="mapWrapAll" style="width: 100%;height: 100vh"></div> <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
<div id="info" style="display: none"></div> <div id="info" style="display: none"></div>
<van-overlay :show="showSearch" @click="closeSearchBox" />
<!--搜索栏目--> <!--搜索栏目-->
<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 class="searchBar_wrap" :style="{bottom : bottomHeight}">
<van-search
v-model="seachText"
show-action
placeholder="请输入宗地或权利人信息"
>
<template #action>
<div id="query">搜索</div>
</template>
</van-search>
<div class="searchBox">
<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>

<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> </div>
<!--点击房地-显示的搜索--->
<!--点击显示的搜索--->
<div class="landHomestead_wrap"> <div class="landHomestead_wrap">
<div class="landHomestead_search"> <div class="landHomestead_search">
<div class="bar_icon"></div> <div class="bar_icon"></div>
@@ -1231,7 +1257,14 @@
selectionIconShow: false, selectionIconShow: false,
//搜索栏目-操作栏显隐 //搜索栏目-操作栏显隐
searchBarOperVisbile: false, searchBarOperVisbile: false,
mapDataAll: [],
showSearch:false,
bottomHeight:'0px',
//搜索---end //搜索---end
//测面
textMjAll:"",
clickBbox:"",
textMjAllNum:"",
//地图使用 --end //地图使用 --end
}; };
}, },
@@ -1792,6 +1825,12 @@
setTimeout(() => { setTimeout(() => {
this.GetMapsInit(); this.GetMapsInit();
}, 300); }, 300);
var that = this;
setTimeout(function () {
var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
console.log($('.searchBox').outerHeight(true)+'px')
that.bottomHeight = -height+'px'
},500)
}, },
//地图加载 -----start //地图加载 -----start
GetMapsInit() { GetMapsInit() {
@@ -1916,13 +1955,14 @@
map.addLayer(cunTc); map.addLayer(cunTc);
//村边界查询开始 ------------------------------end //村边界查询开始 ------------------------------end
//宅基地图层查询开始 ------------------start //宅基地图层查询开始 ------------------start
var cql_filter_all = "dept_name='" + that.$cookies.get("item").deptName + "'";
var zjdTc= new ol.layer.Tile({ var zjdTc= new ol.layer.Tile({
source: new ol.source.TileWMS({ source: new ol.source.TileWMS({
url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms", url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: { params: {
LAYERS: 'zjd_dc:t_house_survey_zjdzd', LAYERS: 'zjd_dc:t_house_survey_zjdzd',
TILED: true, TILED: true,
//cql_filter: cql_filter,
cql_filter: cql_filter_all,
SRID: 3857, SRID: 3857,
}, },
}), }),
@@ -1937,6 +1977,7 @@
params: { params: {
LAYERS: 'zjd_dc:t_house_survey_zrz', LAYERS: 'zjd_dc:t_house_survey_zrz',
TILED: true, TILED: true,
cql_filter: cql_filter_all,
SRID: 3857, SRID: 3857,
}, },
}), }),
@@ -1951,6 +1992,7 @@
params: { params: {
LAYERS: 'zjd_dc:t_house_survey_fsss', LAYERS: 'zjd_dc:t_house_survey_fsss',
TILED: true, TILED: true,
cql_filter: cql_filter_all,
SRID: 3857, SRID: 3857,
}, },
}), }),
@@ -2447,16 +2489,15 @@
*/ */
var val = that.seachText; var val = that.seachText;
if (val == "") { if (val == "") {
alert("请填写查询条件在查询");
that.$toast('请填写查询条件再查询');
} else { } else {
//清除之前查询数据
that.mapDataAll =[];
//分类查询查询农地、农房 //分类查询查询农地、农房
var difang; var difang;
//查询条件 //查询条件
var cql_filter;

console.log(this.$cookies);
//var cun = _this.villageDataObj.deptName;

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"]; difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
var tach = 0; var tach = 0;
var once = 0; var once = 0;
@@ -2468,15 +2509,16 @@
//var han = /^[\u4e00-\u9fa5]+$/; //var han = /^[\u4e00-\u9fa5]+$/;
if (reg.test(val)) { if (reg.test(val)) {
//循环判断查询条件 //循环判断查询条件
cql_filter = "XH='" + val + "'" + "and dept_name='" + cun + "'";
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else { } else {
//循环判断查询条件 //循环判断查询条件
if (difang[i] == "zjd_dc:t_house_survey_zjdzd") { if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
console.log("hhhhhh");
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_zrz") { } else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_fsss") { } else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} }
} }
//for(var i=0; i< difang.length; i++){ //for(var i=0; i< difang.length; i++){
@@ -2487,15 +2529,12 @@
//业务图层 wms服务 //业务图层 wms服务
delete_map[i] = new ol.layer.Tile({ delete_map[i] = new ol.layer.Tile({
source: new ol.source.TileWMS({ 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',
url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: { params: {
LAYERS: difang[i], LAYERS: difang[i],
//'LAYERS': 'new_shp:new_shp_all', //'LAYERS': 'new_shp:new_shp_all',
TILED: true, TILED: true,
cql_filter: cql_filter,
cql_filter: cql_filter_cun,
SRID: 3857, SRID: 3857,
}, },
}), }),
@@ -2510,13 +2549,13 @@
request: "GetFeature", request: "GetFeature",
typename: difang[i], typename: difang[i],
//featureNS: 'nsgk_hc',//命名空间 URI //featureNS: 'nsgk_hc',//命名空间 URI
cql_filter: cql_filter,
cql_filter: cql_filter_cun,
//featurePrefix: 'nationalwater',//工作区名称 //featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json", outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
}; };
let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
url_dw = url_dw + "?"; url_dw = url_dw + "?";
for (let key in param_dw) { for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&"; url_dw = url_dw + key + "=" + param_dw[key] + "&";
@@ -2532,115 +2571,26 @@
.then((data) => { .then((data) => {
tach = tach + 1; tach = tach + 1;
if (data.features != null && data.features != "") { 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,
}),
}),
})
);
});
// 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)));
} }
//特效动画实现 -----------------------------end
let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
map.getView().fit(data.bbox);
map.getView().setResolution(resolution);
} else if (tach == 1) { } else if (tach == 1) {
once = once + 1; once = once + 1;
} else { } else {
if (tach == 2 && once == 1) {
alert("没有找到相关人员农房农地信息");
if (once == 1 && tach == 3) {
that.$toast("没有找到相关人员信息");
} }
} }
}) })
@@ -2649,15 +2599,88 @@
}); });
map.addLayer(delete_map[i]); 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'});
} }
}); });
//按照查询 定位地图-----------------end //按照查询 定位地图-----------------end



// //获取类型开始 侧面-----------------------------------------------------------------start // //获取类型开始 侧面-----------------------------------------------------------------start
//样式加载定义
var vector_drawing_delete;
$("#area").click(function () { $("#area").click(function () {
console.log("进入测面"); console.log("进入测面");

if(that.textMjAll != "" && that.clickBbox !=""){
// var styleFsss = new ol.style.Style({
// text: new ol.style.Text({
// text: that.textMjAll+"㎡",
// font: '30px sans-serif',
// textAlign: "center",
// textBaseline: "middle",
// //font: 'verdana',
// fill: new ol.style.Fill({
// color: "#ff00ff"
// }),
// // backgroundFill: new ol.style.Fill({
// // color: "#ff0000"
// // }),
// font: "30px sans-serif",
// stroke: new ol.style.Stroke({
// color: "#ffffff"
// // width: 3
// }),
// offsetX: parseInt(0, 10),
// offsetY: parseInt(0, 10),
// placement: "point", //point 则自动计算面的中心k点然后标注 line 则根据面要素的边进行标注
// overflow: false //超出面的部分不显示
// }),
// });
map.removeLayer(vector_drawing_delete);
function createLabelStyle() {
return new ol.style.Style({
text: new ol.style.Text({
text: that.textMjAll+"㎡",
textAlign: "center", //位置
textBaseline: "middle", //基准线
font: "normal 12px 微软雅黑", //文字样式
//text: "标注点", //文本内容
fill: new ol.style.Fill({
//文本填充样式（即文字颜色)
color: "#FF6666",
}),
overflow: false //超出面的部分不显示
}),
zIndex: 9999,
});
}
var newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(that.clickBbox), //几何信息
//name: "标注点",
});
var sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing_delete = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing_delete);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
that.clickBbox ="";
that.textMjAll = "";
//map.addLayer(styleFsss);
} else if(that.textMjAllNum == "1"){
that.$toast("该图层面积暂无信息");
} else {
that.$toast("选择图层进行面积显示");
}
}); });
// $("#area").click(function () { // $("#area").click(function () {
// console.log("进入测面") // console.log("进入测面")
@@ -3013,6 +3036,25 @@
"EPSG:3857", "EPSG:3857",
{ INFO_FORMAT: "text/html" } { INFO_FORMAT: "text/html" }
); );
var url_bbox = wmsSource.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
"EPSG:3857",
{ INFO_FORMAT: "application/json" }
);
if (url_bbox) {
fetch(url_bbox).then((res) => {
var geojsonmap = res.json();
return geojsonmap;
})
.then((data) => {
var center = ol.extent.getCenter(data.bbox); //获取边界区域的中心位置
that.clickBbox = center;
})
.catch((error) => {
console.log("【异常】", error);
});
}
if (url) { if (url) {
fetch(url) fetch(url)
.then(function (response) { .then(function (response) {
@@ -3169,7 +3211,11 @@
} }
}); });
let cloneObj = JSON.parse(JSON.stringify(obj)); let cloneObj = JSON.parse(JSON.stringify(obj));
that.dataSj =
if(obj.zdmj != ""){
that.textMjAll = obj.zdmj;
} else {
that.textMjAllNum = "1";
}
that.mapZjdData = cloneObj; that.mapZjdData = cloneObj;
} else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){ } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){
let obj = {}; let obj = {};
@@ -3222,6 +3268,11 @@
}); });
let cloneObj = JSON.parse(JSON.stringify(obj)); let cloneObj = JSON.parse(JSON.stringify(obj));
that.mapZrzData = cloneObj; that.mapZrzData = cloneObj;
if(obj.scjzmj != ""){
that.textMjAll = obj.scjzmj;
} else {
that.textMjAllNum = "1";
}
} else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_fsss"){ } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_fsss"){
let obj = {}; let obj = {};
that.mapHasDateStatus = 0; that.mapHasDateStatus = 0;
@@ -3367,6 +3418,11 @@
}); });
let cloneObj = JSON.parse(JSON.stringify(obj)); let cloneObj = JSON.parse(JSON.stringify(obj));
that.mapFsssData = cloneObj; that.mapFsssData = cloneObj;
if(obj.jzmj != ""){
that.textMjAll = obj.jzmj;
} else {
that.textMjAllNum = "1";
}
} else { } else {


} }
@@ -3870,6 +3926,18 @@
this.farmlandEditSwitchVisbuleFun("hide"); this.farmlandEditSwitchVisbuleFun("hide");
this.landHomesteadEditVisbileFun("show"); this.landHomesteadEditVisbileFun("show");
}, },
closeSearchBox(){
this.showSearch = false ;
var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
document.styleSheets[0].insertRule(
"@keyframes test2" +
"{" +
"0%{bottom: 0px}" +
"100%{bottom: -" + height + "px;}" +
"}"
)
$('.searchBar_wrap').css({'animation':'test2 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test2 0.5s ease-in-out 0s 1 alternate forwards'});
} ,
//删除农地信息 //删除农地信息
deletefdInfo() { deletefdInfo() {
this.$dialog this.$dialog
@@ -3945,12 +4013,12 @@
margin:0 10px; margin:0 10px;
box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16); box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
} }
.van-cell__label{
color: #969799;
font-size: 12px;
line-height: 20px;
margin:0
}
/*.van-cell__label{*/
/* color: #969799;*/
/* font-size: 12px;*/
/* line-height: 20px;*/
/* margin:0*/
/*}*/
.map_area { .map_area {
width: 50vw; width: 50vw;
height: 50vh; height: 50vh;
@@ -4218,17 +4286,56 @@
} }
.van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;} .van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;}


.searchBar_wrap {
searchBar_wrap {
// display: none; // display: none;
display: flex;
position: fixed; position: fixed;
bottom: 0%;
left: 0; left: 0;
bottom: 0;
width: 100%; width: 100%;
padding: 28px 16px 28px 13px;
padding: 0px 16px 0px 13px;
background: #fff; background: #fff;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
z-index: 9;
.searchBox{
.van-cell{
/*&:first-child{*/
/* box-shadow: none;*/
/* margin:0;*/
/*}*/
box-shadow: 0px 0px 5px #cccccc;
border-radius: 15PX;
margin-bottom: 0.35rem;
}
.van-cell__title{
flex: 0.8;
p{
color: rgb(34, 183, 242);
.van-icon{
vertical-align: middle;
}
span{
vertical-align: middle;
&:nth-child(3){
font-size: 0.25rem;
border-radius: 5PX;
padding: 5PX 15PX;
margin-left: 50%;
}
}
}
}
.van-cell__value{
flex: 0.2;
p{
font-size: 0.25rem;
display: inline-block;
border-radius: 1rem;
line-height: 1;
padding: 15PX 20PX;
}
}
}
.actionBar_wrap { .actionBar_wrap {
display: flex; display: flex;
position: absolute; position: absolute;


書き込み プレビュー
読み込み中…
キャンセル
保存