diff --git a/src/views/wellManage/components/movePostion.vue b/src/views/wellManage/components/movePostion.vue deleted file mode 100644 index 34f9af8..0000000 --- a/src/views/wellManage/components/movePostion.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - diff --git a/src/views/wellManage/components/movePostion.vue b/src/views/wellManage/components/movePostion.vue deleted file mode 100644 index 34f9af8..0000000 --- a/src/views/wellManage/components/movePostion.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - diff --git a/src/views/wellManage/components/popupLayerChoose.vue b/src/views/wellManage/components/popupLayerChoose.vue new file mode 100644 index 0000000..5b26e64 --- /dev/null +++ b/src/views/wellManage/components/popupLayerChoose.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/views/wellManage/components/movePostion.vue b/src/views/wellManage/components/movePostion.vue deleted file mode 100644 index 34f9af8..0000000 --- a/src/views/wellManage/components/movePostion.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - diff --git a/src/views/wellManage/components/popupLayerChoose.vue b/src/views/wellManage/components/popupLayerChoose.vue new file mode 100644 index 0000000..5b26e64 --- /dev/null +++ b/src/views/wellManage/components/popupLayerChoose.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/views/wellManage/components/popupLocation.vue b/src/views/wellManage/components/popupLocation.vue new file mode 100644 index 0000000..af36a3a --- /dev/null +++ b/src/views/wellManage/components/popupLocation.vue @@ -0,0 +1,103 @@ + + + + + + diff --git a/src/views/wellManage/components/movePostion.vue b/src/views/wellManage/components/movePostion.vue deleted file mode 100644 index 34f9af8..0000000 --- a/src/views/wellManage/components/movePostion.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - diff --git a/src/views/wellManage/components/popupLayerChoose.vue b/src/views/wellManage/components/popupLayerChoose.vue new file mode 100644 index 0000000..5b26e64 --- /dev/null +++ b/src/views/wellManage/components/popupLayerChoose.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/views/wellManage/components/popupLocation.vue b/src/views/wellManage/components/popupLocation.vue new file mode 100644 index 0000000..af36a3a --- /dev/null +++ b/src/views/wellManage/components/popupLocation.vue @@ -0,0 +1,103 @@ + + + + + + diff --git a/src/views/wellManage/postionCorrectWell.vue b/src/views/wellManage/postionCorrectWell.vue index 55d9571..7a0448b 100644 --- a/src/views/wellManage/postionCorrectWell.vue +++ b/src/views/wellManage/postionCorrectWell.vue @@ -45,6 +45,20 @@ @clear="clearSearch" /> + + + + @@ -57,14 +71,16 @@ import { getWellList, getWellInfo } from '@/api/overview/wellOverview' import { toPixel, toSize, toLngLat } from '@/components/Amap/utils/convert-helper' import WellInfoWindow from './components/infoWindowWell' -import movePostion from './components/movePostion' import AMapLoader from '@amap/amap-jsapi-loader' +import popupLayerChoose from '@/views/wellManage/components/popupLayerChoose' +import popupLocation from '@/views/wellManage/components/popupLocation' export default { name: 'PostionCorrectWell', - components: { AMapContainer, AMapMarker, MapSearchComp }, + components: { AMapContainer, AMapMarker, MapSearchComp, popupLayerChoose, popupLocation }, data() { return { + sssss: 'aaaaaa', map: null, // 地图对象 baseLayer: 'gaode_vec', // 底图图层 center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心 @@ -75,6 +91,13 @@ searchResultSize: [24, 30], searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标 searchResultOffset: [-12, -30], + massMarks: null, // 海量点对象 + layerWindowShow: false, // 图层选择窗口显示 + locationWindowShow: false, // 位置纠偏窗口显示 + locationCoordinates: [], + locationMarker: '', + lonLatPopup: [], + locationWellId: '', postionForm: { longitude: '', // 经度 latitude: '', // 纬度 @@ -125,6 +148,47 @@ that.postionForm.postionlatlon = e.lnglat.lng + ',' + e.lnglat.lat }) }, + clickMenu() { + this.lonLatPopup = this.locationCoordinates + this.$refs.popupLocation.setQuery(this.lonLatPopup) + this.clearInfoWindow() + this.clearSearch() + this.layerWindowShow = false + this.locationWindowShow = true + + const { searchResultOffset, searchResultIcon, searchResultSize } = this + const icon = new window.AMap.Icon({ + size: toSize(searchResultSize), // 图标尺寸 + image: searchResultIcon, // Icon的图像 + imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片 + }) + this.locationMarker = new window.AMap.Marker({ + icon: icon, + position: this.locationCoordinates, + offset: toPixel(searchResultOffset), + draggable: true, + cursor: 'move' + }) + this.locationMarker.setMap(this.map) + this.locationMarker.on('dragend', e => { + this.lonLatPopup[0] = e.lnglat.lng + this.lonLatPopup[1] = e.lnglat.lat + this.$refs.popupLocation.setQuery(this.lonLatPopup) + }) + }, + closePopupLay() { + this.layerWindowShow = false + this.fetchWellList() + }, + closePopupLocation() { + const { map } = this + map.remove(this.locationMarker) + this.locationWindowShow = false + this.fetchWellList() + setTimeout(() => { + this.moveInfoShow(this.locationWellId, this.locationCoordinates) + }, 200) + }, // 数据查询 search(keywords) { if (keywords === '') { @@ -217,7 +281,6 @@ markers.push(new window.AMap.Marker({ position: points[i]['lnglat'], icon: icon, // 添加 Icon 实例 - draggable: true, offset: toPixel(-10, 0) })) } @@ -287,8 +350,7 @@ lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)], icon: this.commonIcon, visible: true, - wellStatus: 'normal', - draggable: true + wellStatus: 'normal' } this.markers.push(marker) this.searchMarkers = this.markers @@ -314,25 +376,21 @@ * @param offsetY 弹窗Y轴偏移，为负值 */ moveInfoShow(wellId, coordinates, offsetY) { - console.log(wellId, coordinates, offsetY) - this.clearInfoWindow() - // 首先获取井详情 - getWellInfo(wellId).then(response => { - if (response.code === 200) { - const wellInfo = { ...response.data } - // 加载弹窗组件 - const WellInfo = Vue.extend({ - render: h => h(movePostion, { props: { wellInfo: wellInfo }}) - }) - const wellWindow = new WellInfo().$mount() - const infoWindow = new window.AMap.InfoWindow({ - content: wellWindow.$el, // 显示内容 - offset: [0, offsetY], // 偏移 - autoMove: true // 是否自动调整窗体到视野内 - }) - infoWindow.open(this.map, new toLngLat(coordinates)) + this.locationWellId = wellId + this.locationCoordinates = coordinates + this.locationWindowShow = false + this.layerWindowShow = !this.layerWindowShow + this.resultList = this.markers.filter(item => { + if (item.id === wellId) { + return true + } else { + return false } }) + // // 首先获取井详情 + // getWellInfo(wellId).then(response => { + // console.log(response) + // }) }, openInfoWindow(wellId, coordinates, offsetY) { this.clearInfoWindow()