From 81478a89b67297657109860102fa0dd027658efc Mon Sep 17 00:00:00 2001 From: yuzongping <835949940@qq.com> Date: Tue, 17 Jun 2025 17:12:56 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E8=B5=84=E4=BA=A7=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E8=BE=B9=E7=95=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/gis-map/index.js | 1 - src/views/property/main-gis/index.js | 219 ++++++++++++++++++++++---- src/views/resources/main-gis/index.js | 184 ++++++++++++++-------- 3 files changed, 314 insertions(+), 90 deletions(-) diff --git a/src/components/gis-map/index.js b/src/components/gis-map/index.js index e5d9aae..a1932a9 100644 --- a/src/components/gis-map/index.js +++ b/src/components/gis-map/index.js @@ -295,7 +295,6 @@ export default { this.incomeTownRankList = resp.data; }); financeSummaryOverview(this.queryParams).then((resp) => { - console.log(resp, 777); let data = resp.data; this.financeSummaryOverview.zeroIncomeBook = data.zeroIncomeBook; this.financeSummaryOverview.areaTotalIncome = data.areaTotalIncome; diff --git a/src/views/property/main-gis/index.js b/src/views/property/main-gis/index.js index db341fc..ff7e5de 100644 --- a/src/views/property/main-gis/index.js +++ b/src/views/property/main-gis/index.js @@ -7,8 +7,11 @@ import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.j import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js"; import { attachmentList } from "@/api/common/uploadAttachment.js"; let gis = null; +import { treeselectByDeptId } from "@/api/system/dept"; import Legend from '@/components/legend/index.vue'; - +import { + fromLonLat +} from 'ol/proj' const iconMap = { '1': require('./icon/组 4665@2x.png'), // 自用 '2': require('./icon/组 4665@2x(1).png'), // 闲置 @@ -22,6 +25,11 @@ export default { data () { return { showPermanentDetail: false, + deptLayer: "", // 坐标点图层 + countyBorderLayerName: "", // 区县边界图层名称 + townBorderLayerName: "", // 乡镇边界图层名称 + villageBorderLayerName: "", // 村边界图层名称 + groupBorderLayerName: "", // 组边界图层名称 LegendData: [ { icon: require('./icon/组 4665@2x.png'), @@ -217,6 +225,8 @@ export default { computed: { }, created () { + // 获取geoserver的地址 + this.getGeoServerUrl(); }, mounted () { treeselect().then((resp) => this.addrOptions = resp.data); @@ -230,32 +240,35 @@ export default { this.resourceTypeOptions = response.data; }); getInfo().then(res => { - this.headerTitle = res.user.deptName + '阳光村务一张图'; - listDeptExcludeChild(res.user.loginDeptId).then((resp) => { - let deptOptions = [res.user.loginDeptId]; - resp.data.map(resm => { - if (res.user.parentDeptName == resm.deptName) { - deptOptions.unshift(resm.deptId) - deptOptions.unshift(resm.parentId) - } - }) - this.addrText = deptOptions; + treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { + this.addrOptions = resp.data; + this.headerTitle = res.user.deptName + '阳光村务一张图'; + listDeptExcludeChild(res.user.loginDeptId).then((resp) => { + let deptOptions = [res.user.loginDeptId]; + resp.data.map(resm => { + if (res.user.parentDeptName == resm.deptName) { + deptOptions.unshift(resm.deptId) + deptOptions.unshift(resm.parentId) + } + }) + this.addrText = deptOptions; + }); + this.queryParams.deptId = res.user.loginDeptId; + this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId; + this.majorEventOpenQueryParams.deptId = res.user.loginDeptId; + this.subsidyFundsQueryParams.deptId = res.user.loginDeptId; + this.permanentQueryParams.deptId = res.user.loginDeptId; + this.resourceListQueryParams.deptId = res.user.loginDeptId; + this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId; + //列表请求 + this.getAllList(); + // 加载地图 + this.initMap(res.user.loginDeptId); + + // 获取村边界的图层名称 + this.getVillageBorderLayerName(); }); - this.queryParams.deptId = res.user.loginDeptId; - this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId; - this.majorEventOpenQueryParams.deptId = res.user.loginDeptId; - this.subsidyFundsQueryParams.deptId = res.user.loginDeptId; - this.permanentQueryParams.deptId = res.user.loginDeptId; - this.resourceListQueryParams.deptId = res.user.loginDeptId; - this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId; - //列表请求 - this.getAllList(); - // 加载地图 - this.initMap(res.user.loginDeptId); - // 获取geoserver的地址 - this.getGeoServerUrl(); - // 获取村边界的图层名称 - this.getVillageBorderLayerName(); + }) }, methods: { @@ -263,7 +276,98 @@ export default { this.dialogImageUrl = url; this.dialogVisible = true; }, - selectAddress (value) { + // 绘制地图 + drawMap (node, isLocated) { // isLocated 控制地图是否跳转 + const dept = node.data; + gis.getMapContainer().removeLayer(this.mapBorder); + this.mapBorder = ''; + gis.getMapContainer().removeLayer(this.deptLayer); + this.deptLayer = ''; + if (dept.deptLevel === '5') { + this.cityId = dept.id; + this.currentDeptLevel = '5'; + if (dept.children && dept.children.length > 0) { + // 添加区县边界 + this.addCountyBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(9); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + } else if (dept.deptLevel === '4') { + this.countyId = dept.id; + this.currentDeptLevel = '4'; + if (dept.children && dept.children.length > 0) { + // 添加乡镇边界 + this.addTownBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(11); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '3') { + this.townId = dept.id; + this.countyId = node.path.slice(-2)[0]; + this.currentDeptLevel = '3'; + if (dept.children && dept.children.length > 0) { + // 添加村边界 + this.addVillageBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(13); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '2') { + this.ruralId = dept.id; + this.townId = node.path.slice(-2)[0]; + this.countyId = node.path.slice(-3)[0]; + this.currentDeptLevel = '2'; + if (dept.children && dept.children.length > 0) { + const groupIds = dept.children.map(item => item.id); + // 添加组边界 + this.addGroupBorder(groupIds); + // 添加组的坐标点图层，并且跳转到图层的中心点位置 + this.addGroupPointLayer(groupIds, isLocated); + } else { + // 添加村边界 + this.addVillageBorder(dept.id); + // 添加坐标点图层 + let deptList = []; + deptList.push(dept); + // this.addDeptLayer(deptList, 'yellow.png'); + if (isLocated) { + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(15); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '1') { + this.ruralId = node.path.slice(-2)[0]; + this.townId = node.path.slice(-3)[0]; + this.countyId = node.path.slice(-4)[0]; + this.currentDeptLevel = '1'; + // 添加组边界 + this.addGroupBorder(dept.id); + // 添加组的坐标点图层，并且跳转到图层的中心点位置 + this.addGroupPointLayer(dept.id, isLocated); + if (isLocated) { + gis.getMapContainer().getView().setZoom(17); + } + // this.villageIds = this.findLeafNodeIds(dept); + } + // this.changeLayerByDept(); + }, + selectAddress (value, isLocated = true) { const deptId = value[value.length - 1]; this.queryParams.deptId = deptId; this.tempWorkerOpenQueryParams.deptId = deptId; @@ -301,6 +405,7 @@ export default { // 获取资源列表 this.getResourceList(deptId); let node = this.$refs["cascader"].panel.getNodeByValue(value); + this.drawMap(node, isLocated); const dept = node.data; const deptData = { deptId: dept.id, @@ -359,9 +464,26 @@ export default { }, // 获取geoserver的地址 getGeoServerUrl () { + // 获取geoserver的地址 getConfigKey("system.geoServer.url").then(response => { this.mapGeoServerUrl = response.msg; }); + // 获取区县边界图层名称 + getConfigKey("geoserver.layer.countyBorder").then(response => { + this.countyBorderLayerName = response.msg; + }); + // 获取乡镇边界的图层名称 + getConfigKey("geoserver.layer.townBorder").then(response => { + this.townBorderLayerName = response.msg; + }); + // 获取村边界的图层名称 + getConfigKey("geoserver.layer.villageBorder").then(response => { + this.villageBorderLayerName = response.msg; + }); + // 获取组边界的图层名称 + getConfigKey("geoserver.layer.groupBorder").then(response => { + this.groupBorderLayerName = response.msg; + }); }, // 创建矢量数据源 addDeptLayer (nextDeptSet) { @@ -468,6 +590,7 @@ export default { initMap (deptId) { getDept(deptId).then(response => { const dept = response.data; + let mapCenterLocation; // 定义地图中心坐标 if (dept.lng && dept.lat) { @@ -487,6 +610,35 @@ export default { // // 获取资产列表 this.getPermanentList(deptId); + let dept2 = this.addrOptions[0]; + if (dept2.deptLevel === '5') { + // 登录身份为市级领导 + this.userRole = 'cityLeader'; + this.cityId = dept.id; + this.currentDeptLevel = '5'; + // 添加区县边界 + this.addCountyBorder(dept.children.map(item => item.id)); + } else if (dept2.deptLevel === '4') { + // 登录身份为县级领导 + this.userRole = 'countyLeader'; + this.countyId = dept2.id; + this.currentDeptLevel = '4'; + // 添加乡镇边界 + this.addTownBorder(dept2.children.map(item => item.id)); + gis.getView().setZoom(11); + } else if (dept2.deptLevel === '3') { + // 登录身份为镇级领导 + this.userRole = 'townLeader'; + this.townId = dept2.id; + this.currentDeptLevel = '3'; + // 添加村边界 + this.addVillageBorder(dept2.children.map(item => item.id)); + gis.getView().setZoom(13); + } + // 添加坐标点图层 + if (dept2.children) { + this.addDeptLayer(dept2.children); + } var that = this; //点击查询详细信息 gis.getMapContainer().on("singleclick", function (evt) { @@ -511,6 +663,19 @@ export default { }); }); }, + // 添加区县边界 + addCountyBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) + }, + // 添加乡镇边界 + addTownBorder (deptIds) { + console.log(this.townBorderLayerName); + gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) + }, + // 添加村边界 + addVillageBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) + }, // 获取资源列表 getResourceList (deptId) { getResourceListByDeptId(deptId).then(response => { diff --git a/src/views/resources/main-gis/index.js b/src/views/resources/main-gis/index.js index 1a50e4e..ce0cd96 100644 --- a/src/views/resources/main-gis/index.js +++ b/src/views/resources/main-gis/index.js @@ -9,6 +9,8 @@ import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js"; import Legend from '@/components/legend/index.vue'; import { attachmentList } from "@/api/common/uploadAttachment.js"; import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept"; +import { getConfigKey } from "@/api/system/config"; +import { treeselectByDeptId } from "@/api/system/dept"; let gis = null; export default { components: { @@ -16,6 +18,7 @@ export default { }, data () { return { + yellowIcon: require('./icon/yellow.png'), //三务公开请求参数 queryParams: { pageNum: 1, @@ -223,16 +226,100 @@ export default { computed: { }, created () { + this.getGeoServerUrl(); }, mounted () { - treeselect().then((resp) => this.addrOptions = resp.data); getInfo().then(res => { - this.initMap(res.user.loginDeptId); - // 加载地图 + treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { + this.addrOptions = resp.data; + this.headerTitle = res.user.deptName + '阳光村务一张图'; + listDeptExcludeChild(res.user.loginDeptId).then((resp) => { + let deptOptions = [res.user.loginDeptId]; + resp.data.map(resm => { + if (res.user.parentDeptName == resm.deptName) { + deptOptions.unshift(resm.deptId) + deptOptions.unshift(resm.parentId) + } + }) + this.addrText = deptOptions; + }); + this.queryParams.deptId = res.user.loginDeptId; + this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId; + this.majorEventOpenQueryParams.deptId = res.user.loginDeptId; + this.subsidyFundsQueryParams.deptId = res.user.loginDeptId; + this.permanentQueryParams.deptId = res.user.loginDeptId; + this.resourceListQueryParams.deptId = res.user.loginDeptId; + this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId; + //列表请求 + this.getAllList(); + // 加载地图 + this.initMap(res.user.loginDeptId); + + // 获取村边界的图层名称 + this.getVillageBorderLayerName(); + }); + }) + // treeselect().then((resp) => { + // this.addrOptions = resp.data + // getInfo().then(res => { + // this.initMap(res.user.loginDeptId); + // // 加载地图 + // }) + // }); + }, methods: { + // 获取村边界的图层名称 + getVillageBorderLayerName () { + getConfigKey("geoserver.layer.villageBorder").then(response => { + this.villageBorderLayerName = response.msg; + }); + }, + // 添加区县边界 + addCountyBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) + }, + // 添加乡镇边界 + addTownBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) + }, + // 添加村边界 + addVillageBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) + }, + // 获取资源列表 + getResourceList (deptId) { + getResourceListByDeptId(deptId).then(response => { + if (response.data && response.data.length > 0) { + this.addResourceLayer(response.data); + } + }); + }, + // 获取geoserver的地址 + getGeoServerUrl () { + // 获取geoserver的地址 + getConfigKey("system.geoServer.url").then(response => { + this.mapGeoServerUrl = response.msg; + }); + // 获取区县边界图层名称 + getConfigKey("geoserver.layer.countyBorder").then(response => { + this.countyBorderLayerName = response.msg; + }); + // 获取乡镇边界的图层名称 + getConfigKey("geoserver.layer.townBorder").then(response => { + this.townBorderLayerName = response.msg; + }); + // 获取村边界的图层名称 + getConfigKey("geoserver.layer.villageBorder").then(response => { + this.villageBorderLayerName = response.msg; + }); + // 获取组边界的图层名称 + getConfigKey("geoserver.layer.groupBorder").then(response => { + this.groupBorderLayerName = response.msg; + }); + }, selectAddress (value) { const deptId = value[value.length - 1]; this.queryParams.deptId = deptId; @@ -303,64 +390,36 @@ export default { gis.addAnnotationLayer() // // 获取资源列表 this.getResourceList(deptId); - //初始加载当前用户级别的geojson数据 - // getUserGeo().then((res) => { - // if (res.code == 200) { - // // 存在geojson数据，加载边界图层，定位到当前位置 - // if (res.data.geoJson != null && res.data.geoJson != "") { - // // 解析geojson数据,添加轮廓图层 - // require(["@/assets/maps/" + res.data.geoJson], (data) => { - - // this.map.addLayer(boundaryLayer); - - // //定位查询位置 - // const maxXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxX; - // const maxYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxY; - // const minXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minX; - // const minYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minY; - // //获取边界区域的中心位置 - // const center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); - // this.map.getView().animate({ - // // 只设置需要的属性即可 - // center: center, // 中心点 - // zoom: initZoom, // 缩放级别 - // rotation: undefined, // 缩放完成view视图旋转弧度 - // duration: 1000, // 缩放持续时间，默认不需要设置 - // }); - // }); - // } else { // 不存在geojson数据，直接定位到当前位置 - // gis.getMapContainer().getView().animate({ - // // 只设置需要的属性即可 - // center: fromLonLat([res.data.lng, res.data.lat]), // 中心点 - // zoom: initZoom, // 缩放级别 - // rotation: undefined, // 缩放完成view视图旋转弧度 - // duration: 1000, // 缩放持续时间，默认不需要设置 - // }); - // } - // //村级组级只定位坐标点 deptLevel： 1 组级、2 村级、3 乡镇级、4 区县级 - // if (res.data.deptLevel === '3' || res.data.deptLevel === '4') { - // let locationIcon; - // if (res.data.deptLevel === '3') { - // locationIcon = "red.png"; - // } else if (res.data.deptLevel === '4') { - // locationIcon = "yellow.png"; - // } - // //获取用户级别的下级区域 - // setTimeout(() => { - // getUserGeoList(res.data.deptId).then((res) => { - // if (res.code == 200) { - // this.addDeptLayer(res.data, require(`./icon/${locationIcon}`)) - // } - // }); - // }, 500); - // } else { - // let lowestOrder = []; - // lowestOrder.push(res.data); - // this.addDeptLayer(lowestOrder, require('./icon/green.png')); - // } - // } - // }); - + let dept2 = this.addrOptions[0]; + console.log(this.addrOptions, 'this.addrOptions'); + if (dept2.deptLevel === '5') { + // 登录身份为市级领导 + this.userRole = 'cityLeader'; + this.cityId = dept.id; + this.currentDeptLevel = '5'; + // 添加区县边界 + this.addCountyBorder(dept.children.map(item => item.id)); + } else if (dept2.deptLevel === '4') { + // 登录身份为县级领导 + this.userRole = 'countyLeader'; + this.countyId = dept2.id; + this.currentDeptLevel = '4'; + // 添加乡镇边界 + this.addTownBorder(dept2.children.map(item => item.id)); + gis.getView().setZoom(11); + } else if (dept2.deptLevel === '3') { + // 登录身份为镇级领导 + this.userRole = 'townLeader'; + this.townId = dept2.id; + this.currentDeptLevel = '3'; + // 添加村边界 + this.addVillageBorder(dept2.children.map(item => item.id)); + gis.getView().setZoom(13); + } + // 添加坐标点图层 + if (dept2.children) { + this.addDeptLayer(dept2.children); + } gis.getMapContainer().on("click", (evt) => { let feature = gis.getMapContainer().forEachFeatureAtPixel( evt.pixel, @@ -484,9 +543,10 @@ export default { }, // 创建矢量数据源 addDeptLayer (nextDeptSet, locationIcon) { + console.log('nextDeptSet', nextDeptSet); let features = []; nextDeptSet.forEach(item => { - let fs = gis.getFeature(item, locationIcon) + let fs = gis.getFeature(item, this.yellowIcon) features.push(fs); }); gis.getVectorLayerByFs(features)