diff --git a/src/views/homestead/index.vue b/src/views/homestead/index.vue
index 22982068..060ac5f3 100644
--- a/src/views/homestead/index.vue
+++ b/src/views/homestead/index.vue
@@ -243,7 +243,7 @@
-
+
@@ -1470,11 +1470,11 @@ export default {
housingSerial(item, index) {
this.selectChooseOrder = index;
if (item.type == "house") {
- // $("#texiao_fang").val(item.name);
- // $("#texiao_fang").trigger("click");
+ $("#texiao_fang").val(item.name);
+ $("#texiao_fang").trigger("click");
} else {
- // $("#texiao_di").val(item.name);
- // $("#texiao_di").trigger("click");
+ $("#texiao_di").val(item.name);
+ $("#texiao_di").trigger("click");
}
},
@@ -1512,6 +1512,67 @@ export default {
maxZoom: 18.9, //地图放大限制
}),
});
+ //业务图层 wfs服务 属性查询开始 ------------------start
+ /**
+ * @api wfs服务空间查询
+ * @param {*} wfsurl
+ * @param {*} srsName
+ * @param {*} typeName
+ * @param {*} drawType
+ * @param {option 可选} geometryField
+ */
+
+ var wmsSource = new ol.source.TileWMS({
+ //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
+ url: 'http://116.255.135.38:8080/geoserver/nsgk_hc/wms',
+ //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
+ params: {
+ 'LAYERS': 'nsgk_hc:nsgk_hc_all',
+ //'LAYERS': 'mywork_mysql:t_geo_hc_land',
+ 'TILED':true,
+ SRID:3857,
+ serverType: 'geoserver',
+ crossOrigin: 'anonymous',
+ },
+ })
+
+ map.on('singleclick', function (evt) {
+ var aa = evt.coordinate;
+ map.getView().animate({
+ // 只设置需要的属性即可
+ center: [aa[0],aa[1]], // 中心点
+ zoom: 15, // 缩放级别
+ rotation: undefined, // 缩放完成view视图旋转弧度
+ duration: 1000, // 缩放持续时间，默认不需要设置
+ });
+ document.getElementById('info').innerHTML = '';
+ var viewResolution = map.getView().getResolution();///** @type {number} */ (view.getResolution());
+ var url = wmsSource.getFeatureInfoUrl(
+ evt.coordinate,
+ viewResolution,
+ 'EPSG:3857',
+ {'INFO_FORMAT': 'text/html'}
+ );
+ if (url) {
+ fetch(url)
+ .then(function (response) { return response.text(); })
+ .then(function (html) {
+ document.getElementById('info').innerHTML = html;
+ });
+ }
+ });
+
+ map.on('pointermove', function (evt) {
+ if (evt.dragging) {
+ return;
+ }
+ var pixel = map.getEventPixel(evt.originalEvent);
+ var hit = map.forEachLayerAtPixel(pixel, function () {
+ return true;
+ });
+ map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+ });
+ //属性查询结束 ------------------end
var shitu = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
@@ -2054,6 +2115,9 @@ export default {
} else {
cun = "";
}
+ //定位个人地图
+ map.removeLayer(texiao_layer_fang);
+ map.removeLayer(texiao_layer_di);
//删除之前加载的图层
if (cun != "全部") {
let currObjNum = currObj[0];
@@ -2206,6 +2270,331 @@ export default {
});
//开始绘制地图 ------------------- end
+
+ //特效实现
+ $("#texiao_fang").on("click", function () {
+ /**
+ * @api wfs服务空间查询
+ * @param {*} wfsurl
+ * @param {*} srsName
+ * @param {*} typeName
+ * @param {*} drawType
+ * @param {option 可选} geometryField
+ */
+
+ //alert("进入分类");
+ //删除之前加载的图层
+ map.removeLayer(texiao_layer_fang);
+ var cunmap = _this.focusVillageOptions[0].orgCode;
+ var cun;
+ let currObj = _this.villageOptions.filter((v) => {
+ return v.orgCode == cunmap;
+ });
+ if (currObj.length == 1) {
+ cun = currObj[0].deptName;
+ } else {
+ cun = "";
+ }
+ //删除之前加载的图层
+ //map.removeLayer(dishitu);
+ //map.removeLayer(cunshitu);
+ //分类查询查询农地、农房
+ var difang;
+ //地的数据判断
+ difang = "nsgk_hc:t_geo_hc_house";
+ //查询条件
+ var cql_filter;
+ //村的数据判断
+ var val = $("#texiao_fang").val();
+ if (val == "") {
+ alert("请填写查询条件在查询");
+ }
+ //for(var i=0; i< difang.length; i++){
+ //cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
+ cql_filter = "FWSYRMC='" + val + "' and CM='" + cun + "'";
+ //图层加载
+ //地的数据判断
+
+ //定位查询位置
+ let param_dw = {
+ srsName: "EPSG:3857",
+ service: "WFS",
+ version: "1.0.0",
+ request: "GetFeature",
+ typename: difang,
+ //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.135.38: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) => {
+ //关联查询农房信息---------------start
+ // document.getElementById("info").innerHTML = "";
+ // var select_fang = (document.getElementById("info").innerHTML =
+ // data.features[0].properties);
+ // _this.hasTable = true;
+ // _this.hasDateStatus = 1;
+ // let obj = {};
+ // //let trs = $("#info .featureInfo").find("tr:eq(1)");
+ // obj.FWSYRMC = select_fang.FWSYRMC; //房屋所有人名称
+ // obj.CM = select_fang.CM; //村名
+ // obj.CDM = select_fang.CDM; //村代码
+ // obj.DZ = select_fang.DZ; //地址
+ // obj.SFYSPSX = select_fang.SFYSPSX; //是否有审批手续
+ // obj.FWSYQH = select_fang.FWSYQH; //房屋所有权证号
+ // obj.JZMJ = select_fang.JZMJ; //建筑面积
+ // obj.TDZH = select_fang.TDZH; //土地证号
+ // obj.TDXZ = select_fang.TDXZ; //土地性质
+ // obj.TDMJ = select_fang.TDMJ; //土地面积
+ // obj.XZQK = select_fang.XZQK; //现状情况
+ // obj.ZLRXM = select_fang.ZLRXM; //租赁人姓名
+ // obj.ZLHTJZRQ = select_fang.ZLHTJZRQ; //租赁合同截止时间
+ // obj.ZLSYNX = select_fang.ZLSYNX; //租赁剩余年现
+ // obj.XZFWSFYLZY = select_fang.XZFWSFYLZY; //是否流转意向
+ // obj.XH = select_fang.XH; //农房编号
+ // _this.hasData = obj;
+ //关联查询农房信息---------------end
+ //定位结束 --------------start
+ //var datamap = data.bbox;
+ var datamap = data.features[0].bbox;
+ map.getView().animate({
+ // 只设置需要的属性即可
+ center: datamap, // 中心点
+ zoom: 18, // 缩放级别
+ rotation: undefined, // 缩放完成view视图旋转弧度
+ duration: 1000, // 缩放持续时间，默认不需要设置
+ });
+ //定位结束 --------------end
+ //特效动画实现 -----------------------------start
+ 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,
+ }),
+ }),
+ })
+ );
+ });
+ //特效动画实现 -----------------------------end
+ })
+ .catch((error) => {
+ console.log("【异常】", error);
+ });
+ });
+ //-----------------------------------------------------------------------------特效农房加载结束 end
+
+ //-----------------------------------------------------------------------------特效农地加载开始 start
+ //特效实现
+ $("#texiao_di").on("click", function () {
+ /**
+ * @api wfs服务空间查询
+ * @param {*} wfsurl
+ * @param {*} srsName
+ * @param {*} typeName
+ * @param {*} drawType
+ * @param {option 可选} geometryField
+ */
+ //alert("进入分类");
+ //删除之前加载的图层
+ map.removeLayer(texiao_layer_di);
+ var cunmap = _this.focusVillageOptions[0].orgCode;
+ var cun;
+ let currObj = _this.villageOptions.filter((v) => {
+ return v.orgCode == cunmap;
+ });
+ if (currObj.length == 1) {
+ cun = currObj[0].deptName;
+ } else {
+ cun = "";
+ }
+ //删除之前加载的图层
+ //map.removeLayer(dishitu);
+ //map.removeLayer(cunshitu);
+ //分类查询查询农地、农房
+ var difang;
+ //地的数据判断
+ difang = "nsgk_hc:t_geo_hc_land";
+ //查询条件
+ var cql_filter;
+ //村的数据判断
+ var val = $("#texiao_di").val();
+ if (val == "") {
+ alert("请填写查询条件在查询");
+ }
+ //for(var i=0; i< difang.length; i++){
+ //cql_filter = "CM='"+cun +"'"+ "and FWSYRMC='"+query_mz.value;
+ cql_filter = "SYRMC='" + val + "' and CM='" + cun + "'";
+ //图层加载
+
+ //定位查询位置
+ let param_dw = {
+ srsName: "EPSG:3857",
+ service: "WFS",
+ version: "1.0.0",
+ request: "GetFeature",
+ typename: difang,
+ INFO_FORMAT: "text/html",
+ //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.135.38: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) => {
+ //关联查询农地信息 ----------start
+ // document.getElementById("info").innerHTML = "";
+ // var select_di = (document.getElementById("info").innerHTML =
+ // data.features[0].properties);
+ // _this.hasTable = true;
+ // _this.hasDateStatus = 0;
+ // let obj = {};
+ // //let trs = $("#info").find("tr:eq(1)");
+ // obj.XH = select_di.XH; //序号
+ // obj.CM = select_di.CM; //村名
+ // obj.CBRMC = select_di.CBRMC; //承包人名称
+ // obj.SYRMC = select_di.SYRMC; //使用人名称
+ // obj.NYDLX = select_di.NYDLX; //农用地类型
+ // obj.MJ = select_di.MJ; //面积
+ // obj.XZQK = select_di.XZQK; //现状情况
+ // obj.LZHTJZRQ = select_di.LZHTJZRQ; //流转合同截止时间
+ // obj.LZSYNX = select_di.LZSYNX; //流转剩余年限
+ // obj.SFYLZYX = select_di.SFYLZYX; //是否流转意向
+ // obj.CDM = select_di.CDM; //村代码
+ // obj.org_code = select_di.org_code; //行政区化代码
+ // _this.hasData = obj;
+ //关联查询农地信息 ----------end
+ //获取坐标定位开始----------start
+ //var datamap = data.bbox;
+ var datamap = data.features[0].bbox;
+ map.getView().animate({
+ // 只设置需要的属性即可
+ center: datamap, // 中心点
+ zoom: 16, // 缩放级别
+ rotation: undefined, // 缩放完成view视图旋转弧度
+ duration: 1000, // 缩放持续时间，默认不需要设置
+ });
+ //获取坐标定位开始----------end
+ //特效动画实现 -----------------------------start
+ 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: "#ef5b9c",
+ 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: "#ef5b9c",
+ size: 1,
+ }),
+ }),
+ })
+ );
+ });
+ //特效动画实现 -----------------------------end
+ })
+ .catch((error) => {
+ console.log("【异常】", error);
+ });
+ });
+
+ //-----------------------------------------------------------------------------特效农地加载结束 end
},
//农房 - 农房权属 选择值