|
|
|
@@ -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); |
|
|
|
} |
|
|
|
|
yuzongping
6 dagen geleden
