diff --git a/src/views/property/main-gis/icon/zc_icon.png b/src/views/property/main-gis/icon/zc_icon.png deleted file mode 100644 index ebc48c9..0000000 Binary files a/src/views/property/main-gis/icon/zc_icon.png and /dev/null differ diff --git a/src/views/property/main-gis/icon/组 4665@2x(1).png b/src/views/property/main-gis/icon/组 4665@2x(1).png new file mode 100644 index 0000000..49f3cd8 Binary files /dev/null and b/src/views/property/main-gis/icon/组 4665@2x(1).png differ diff --git a/src/views/property/main-gis/icon/组 4665@2x(2).png b/src/views/property/main-gis/icon/组 4665@2x(2).png new file mode 100644 index 0000000..65cbb7e Binary files /dev/null and b/src/views/property/main-gis/icon/组 4665@2x(2).png differ diff --git a/src/views/property/main-gis/icon/组 4665@2x(3).png b/src/views/property/main-gis/icon/组 4665@2x(3).png new file mode 100644 index 0000000..32b9dc0 Binary files /dev/null and b/src/views/property/main-gis/icon/组 4665@2x(3).png differ diff --git a/src/views/property/main-gis/icon/组 4665@2x.png b/src/views/property/main-gis/icon/组 4665@2x.png new file mode 100644 index 0000000..394ac47 Binary files /dev/null and b/src/views/property/main-gis/icon/组 4665@2x.png differ diff --git a/src/views/property/main-gis/index.html b/src/views/property/main-gis/index.html index 80d6a2e..de2e527 100644 --- a/src/views/property/main-gis/index.html +++ b/src/views/property/main-gis/index.html @@ -2,7 +2,7 @@
-
+

{{item.name}}

diff --git a/src/views/property/main-gis/index.js b/src/views/property/main-gis/index.js index e6079e9..15fc0a4 100644 --- a/src/views/property/main-gis/index.js +++ b/src/views/property/main-gis/index.js @@ -8,6 +8,13 @@ import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js"; import { attachmentList } from "@/api/common/uploadAttachment.js"; let gis = null; import Legend from '@/components/legend/index.vue'; + +const iconMap = { + '1': require('./icon/组 4665@2x.png'), // 自用 + '2': require('./icon/组 4665@2x(1).png'), // 闲置 + '3': require('./icon/组 4665@2x(2).png'), // 出租或出借 + '4': require('./icon/组 4665@2x(3).png') // 其他 +} export default { components: { Legend @@ -16,31 +23,19 @@ export default { return { LegendData: [ { - iconStyle: { - background: 'rgba(38,252,128,0.45)', - border: '2px solid #26FC80' - }, + icon: require('./icon/组 4665@2x.png'), name: '自用' }, { - iconStyle: { - background: 'rgba(232,246,0,0.45)', - border: '2px solid #E8F600' - }, + icon: require('./icon/组 4665@2x(1).png'), name: '闲置' }, { - iconStyle: { - background: 'rgba(16,252,252,0.45)', - border: '2px solid #10FCFC' - }, + icon: require('./icon/组 4665@2x(2).png'), name: '出租' }, { - iconStyle: { - background: 'rgba(198,0,255,0.45)', - border: '2px solid #C600FF' - }, + icon: require('./icon/组 4665@2x(3).png'), name: '其他' } ], @@ -53,7 +48,6 @@ export default { checkStrictly: true, }, yellowIcon: require('./icon/yellow.png'), - zcIcon: require('./icon/zc_icon.png'), mapGeoServerUrl: "", villageBorderLayerName: "", headerTitle: '', @@ -321,7 +315,7 @@ export default { this.addDeptLayer(deptList, 'yellow.png'); gis.getMapContainer().getView().animate({ // 只设置需要的属性即可 - center: ol.proj.fromLonLat([dept.lng, dept.lat]), // 中心点 + center: fromLonLat([dept.lng, dept.lat]), // 中心点 duration: 500, // 缩放持续时间，默认不需要设置 }); }, @@ -344,7 +338,10 @@ export default { let features = []; permanentList.forEach(item => { if (item.theGeom != null && item.theGeom !== '') { - let fs = gis.getFeature2(item, this.zcIcon) + // console.log(222, useType, item); + const { useType } = item + let icon = iconMap[useType + ''] + let fs = gis.getFeature2(item, icon) features.push(fs); } }); @@ -370,8 +367,6 @@ export default { let fs = gis.getFeature(item, this.yellowIcon) features.push(fs); }); - - gis.getVectorLayerByFs(features) gis.mapSetFit(features) }, @@ -531,8 +526,6 @@ export default { this.addDeptLayer(deptList); // // 获取资产列表 this.getPermanentList(deptId); - // // 获取资源列表 - this.getResourceList(deptId); var that = this; //点击查询详细信息 @@ -543,7 +536,6 @@ export default { ); if (feature) { var ifConsole = feature.values_.level; - console.log(ifConsole); if (ifConsole == "permanent") { that.listDialogHidden('detail'); that.openPermanentDialog(feature.values_.detail); @@ -571,10 +563,7 @@ export default { let fs = gis.getFeature3(item) features.push(fs); } - }); - - gis.getVectorLayerByFs(features) gis.mapSetFit(features) }, diff --git a/src/views/property/main-gis/index.scss b/src/views/property/main-gis/index.scss index d8e9c7d..7b84e3d 100644 --- a/src/views/property/main-gis/index.scss +++ b/src/views/property/main-gis/index.scss @@ -24,9 +24,6 @@ align-items: center; .icon { - width: 16px; - height: 16px; - border-radius: 50%; margin-right: 10px; } } diff --git a/src/views/resources/main-gis/index.html b/src/views/resources/main-gis/index.html index 4daf291..b876b7b 100644 --- a/src/views/resources/main-gis/index.html +++ b/src/views/resources/main-gis/index.html @@ -9,7 +9,7 @@
- + diff --git a/src/views/resources/main-gis/index.js b/src/views/resources/main-gis/index.js index b89498b..cedbe57 100644 --- a/src/views/resources/main-gis/index.js +++ b/src/views/resources/main-gis/index.js @@ -4,7 +4,7 @@ import { fromLonLat } from 'ol/proj' import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/index.js"; - +import { getInfo } from "@/api/login"; import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js"; import Legend from '@/components/legend/index.vue'; let gis = null; @@ -51,72 +51,78 @@ export default { created () { }, mounted () { - this.initMap(); + getInfo().then(res => { + this.initMap(res.user.loginDeptId); + // 加载地图 + }) + }, methods: { // 加载地图 - initMap () { + initMap (deptId) { gis = new GisUtils('map2') gis.addTianDiTuLayer() gis.addAnnotationLayer() const initZoom = 11; + // // 获取资源列表 + 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) => { + // 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); + // 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')); - } - } - }); + // //定位查询位置 + // 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')); + // } + // } + // }); gis.getMapContainer().on("click", (evt) => { let feature = gis.getMapContainer().forEachFeatureAtPixel( @@ -169,6 +175,7 @@ export default { // 获取资源列表 getResourceList (deptId) { getResourceListByDeptId(deptId).then(response => { + console.log(22222, response); if (response.data && response.data.length > 0) { this.addResourceLayer(response.data); }