-
+
租房编号：
{{nfItem.id}}
@@ -235,6 +235,7 @@ export default {
landLayer: "", // 地块图层
homesteadLayer: "", // 宅基地图层
+ selectedLayer: "", // 选中的图层
deptInfo: {
leader: null, // 联系人
phone: null // 电话
@@ -280,6 +281,7 @@ export default {
getData(){
plotPremisesStatistics({deptId:this.deptId}).then(response => {
this.detail = response.data;
+ console.log(this.detail);
});
},
onConfirmDept({ selectedOptions }){
@@ -287,6 +289,13 @@ export default {
this.deptName = selectedOptions.map((option) => option.label).join('/');
this.getData();
this.showAddress = false;
+ this.drawMap(selectedOptions);
+ this.deptInfo.leader = null;
+ this.deptInfo.phone = null;
+ getDept(this.deptId).then(res => {
+ this.deptInfo.leader = res.data.leader;
+ this.deptInfo.phone = res.data.phone;
+ });
},
tabChange(name){
@@ -294,12 +303,53 @@ export default {
this.selectChooseOrder = -1;
},
listChange(id,type,data){
+ console.log(data);
this.selectChooseOrder = id;
this.show = false;
this.showZF = false;
this.showZD = false;
- if (type=='nf'){this.showZF = true;this.nfItem = data;}
- if (type=='nd'){this.showZD = true;this.ndItem = data;}
+ if (type=='nf') {
+ this.showZF = true;
+ this.nfItem = data;
+ }
+ if (type=='nd') {
+ this.showZD = true;
+ this.ndItem = data;
+ }
+
+ if (this.selectedLayer) {
+ this.map.removeLayer(this.selectedLayer);
+ this.selectedLayer = '';
+ }
+ if (data.theGeom) {
+ this.selectedLayer = new ol.layer.Vector({
+ source: new ol.source.Vector({
+ features: new ol.format.GeoJSON().readFeatures("{\n" +
+ " \"type\": \"Feature\",\n" +
+ " \"geometry\":" + data.theGeom + ", \"properties\":" + JSON.stringify(data.id) + "}"),
+ }),
+ name: 'selectedLayer',
+ style: new ol.style.Style({
+ fill: new ol.style.Fill({
+ //矢量图层填充颜色，以及透明度
+ color: "rgba(255, 84, 87, 0.5)",
+ }),
+ stroke: new ol.style.Stroke({
+ //边界样式
+ color: "#ff5457",
+ width: 2,
+ }),
+ }),
+ });
+ this.map.addLayer(this.selectedLayer);
+ let center = ol.extent.getCenter(this.selectedLayer.getSource().getExtent());
+ this.map.getView().animate({
+ center: center, // 中心点
+ zoom: 17, // 缩放级别
+ rotation: undefined, // 缩放完成view视图旋转弧度
+ duration: 500, // 缩放持续时间，默认不需要设置
+ });
+ }
},
//获取geoserver的地址
getGeoServerUrl() {
@@ -456,6 +506,13 @@ export default {
this.addDeptLayer(deptNode.children);
}
} else if (deptLevel === '2') {
+ this.deptId = deptId;
+ this.getData();
+ let parentNodes = [];
+ this.findParentNode(this.addrOptions, deptId, parentNodes);
+ console.log(parentNodes);
+ this.villageValue = deptId;
+ this.deptName = parentNodes.map(node => node.label).join('/');
this.currentDeptLevel = '2';
this.map.removeLayer(this.borderLayer);
this.borderLayer = '';
@@ -489,6 +546,16 @@ export default {
});
}
}
+ } else {
+ const viewResolution = this.map.getView().getResolution();
+ const url1 = this.landLayer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
+ if (url1) {
+ this.fetchUrl(url1);
+ }
+ const url2 = this.homesteadLayer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
+ if (url2) {
+ this.fetchUrl(url2);
+ }
}
});
@@ -514,6 +581,10 @@ export default {
this.landLayer = "";
this.map.removeLayer(this.homesteadLayer);
this.homesteadLayer = "";
+ if (this.selectedLayer) {
+ this.map.removeLayer(this.selectedLayer);
+ this.selectedLayer = "";
+ }
this.deptInfo.leader = null;
this.deptInfo.phone = null;
} else if (this.currentDeptLevel === '3' && zoom < 11) {
@@ -560,6 +631,10 @@ export default {
this.landLayer = "";
this.map.removeLayer(this.homesteadLayer);
this.homesteadLayer = "";
+ if (this.selectedLayer) {
+ this.map.removeLayer(this.selectedLayer);
+ this.selectedLayer = "";
+ }
this.deptInfo.leader = null;
this.deptInfo.phone = null;
} else if (this.currentDeptLevel === '3' && zoom < 11) {
@@ -588,6 +663,76 @@ export default {
}
return null;
},
+ findParentNode(tree, deptId, result) {
+ for (let node of tree) {
+ if (node.id === deptId) {
+ result.unshift(node);
+ return true;
+ }
+ if (node.children && node.children.length > 0) {
+ let isFind = this.findParentNode(node.children, deptId, result);
+ if (isFind) {
+ result.unshift(node);
+ return true;
+ }
+ }
+ }
+ return false;
+ },
+ fetchUrl(url) {
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ if (data.features.length > 0) {
+ let arr = data.features[0].id.split(".");
+ let tableName = arr[0];
+ let id = arr[1];
+
+ this.show = false;
+ this.showList = false;
+ this.showZF = false;
+ this.showZD = false;
+ if (tableName.startsWith("t_homestead_zjdzdxx")) {
+ this.showZF = true;
+ this.nfItem = {
+ id: id,
+ zdmj: data.features[0].properties.ZDMJ,
+ };
+ }
+ if (tableName.startsWith("t_sys_dk")) {
+ this.showZD = true;
+ this.ndItem = {
+ id: id,
+ scmjm: data.features[0].properties.SCMJM,
+ };
+ }
+
+ if (this.selectedLayer) {
+ this.map.removeLayer(this.selectedLayer);
+ this.selectedLayer = "";
+ }
+ this.selectedLayer = new ol.layer.Vector({
+ source: new ol.source.Vector({
+ features: new ol.format.GeoJSON().readFeatures(data)
+ }),
+ name: 'selectedLayer',
+ 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.selectedLayer);
+ // this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);
+ }
+ });
+ },
// 添加区县边界
addCountyBorder() {
this.borderLayer = new ol.layer.Image({
@@ -697,26 +842,6 @@ export default {
},
// 添加地块图层
addLandLayer(deptId) {
- /* let params = {};
- if (this.street === '全部' && this.cun === '全部') {
- params = {
- LAYERS: this.homesteadLayerName,
- SRID: 3857,
- };
- } else if (this.street !== '全部' && this.cun === '全部') {
- let villageDeptIds = this.houseCunship.map(item => item.deptId);
- params = {
- LAYERS: this.homesteadLayerName,
- cql_filter: "dept_id in (" + villageDeptIds + ")",
- SRID: 3857,
- };
- } else if (this.street !== '全部' && this.cun !== '全部') {
- params = {
- LAYERS: "zjd_dc:t_sys_dk", // 测试用的图层，正式使用时要换成自己发布的图层
- cql_filter: "dept_id = '" + this.deptId + "'",
- SRID: 3857,
- };
- } */
this.landLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://218.59.175.43:8090/geoserver/zjd_dc/wms", // 测试用的geoserver服务器链接，正式使用时需要换掉
@@ -733,26 +858,6 @@ export default {
},
// 添加宅基地图层
addHomesteadLayer(deptId) {
- /* let params = {};
- if (this.street === '全部' && this.cun === '全部') {
- params = {
- LAYERS: this.homesteadLayerName,
- SRID: 3857,
- };
- } else if (this.street !== '全部' && this.cun === '全部') {
- let villageDeptIds = this.houseCunship.map(item => item.deptId);
- params = {
- LAYERS: this.homesteadLayerName,
- cql_filter: "dept_id in (" + villageDeptIds + ")",
- SRID: 3857,
- };
- } else if (this.street !== '全部' && this.cun !== '全部') {
- params = {
- LAYERS: "zjd_dc:t_sys_dk", // 测试用的图层，正式使用时要换成自己发布的图层
- cql_filter: "dept_id = '" + this.deptId + "'",
- SRID: 3857,
- };
- } */
this.homesteadLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://218.59.175.43:8090/geoserver/zjd_dc/wms", // 测试用的geoserver服务器链接，正式使用时需要换掉
@@ -767,6 +872,53 @@ export default {
this.map.addLayer(this.homesteadLayer);
// this.map.getLayers().insertAt(3, this.homesteadLayer);
},
+ drawMap(selectedOptions) {
+ const villageNode = selectedOptions[selectedOptions.length - 1];
+ const ids = selectedOptions.map(option => option.id);
+
+ this.currentDeptLevel = '2';
+ this.townId = ids[ids.length - 2];
+ this.countyId = ids[ids.length - 3];
+ this.map.removeLayer(this.borderLayer);
+ this.borderLayer = '';
+ // 添加村边界
+ const cqlFilter = "dept_id = '" + villageNode.id + "'";
+ this.addVillageBorder(cqlFilter);
+
+ let villagePoint = {
+ id: villageNode.id,
+ label: villageNode.label,
+ lng: villageNode.lng,
+ lat: villageNode.lat,
+ deptLevel: villageNode.deptLevel,
+ };
+ let depts = [];
+ depts.push(villagePoint);
+ this.map.removeLayer(this.deptLayer);
+ this.deptLayer = '';
+ this.addDeptLayer(depts);
+
+ if (this.landLayer) {
+ this.map.removeLayer(this.landLayer);
+ this.landLayer = '';
+ }
+ if (this.homesteadLayer) {
+ this.map.removeLayer(this.homesteadLayer);
+ this.homesteadLayer = '';
+ }
+ if (this.selectedLayer) {
+ this.map.removeLayer(this.selectedLayer);
+ this.selectedLayer = "";
+ }
+ this.addLandLayer(villageNode.id);
+ this.addHomesteadLayer(villageNode.id);
+ this.map.getView().animate({
+ center: ol.proj.fromLonLat([villageNode.lng, villageNode.lat]), // 中心点
+ zoom: 17, // 缩放级别
+ rotation: undefined, // 缩放完成view视图旋转弧度
+ duration: 1000, // 缩放持续时间，默认不需要设置
+ });
+ },
},
};