<!--suppress ALL -->
<template>
<div style="overflow: hidden;height: 100%">
<div id="mapscreen" ref="mapscreen" class="mars3d-container" />
</div>
</template>
<script>
import { getMapConfig } from '@/utils/maputils'
import { mapGetters } from 'vuex'
import { getWellType } from '@/api/well/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import DeptSelect from '@/components/DeptSelect/index'
import AMapContainer from '@/components/Amap/AMapContainer'
import AlarmInfoWindow from '@/views/overview/components/infoWindowAlarm'
import WellInfoWindow from '@/views/overview/components/infoWindowWell'
import AMapMarker from '@/components/Amap/AMapMarker'
import Vue from 'vue'
import ToolBox from '@/views/overview/components/toolBox'
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'
import axios from 'axios'
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
const Cesium = mars3d.Cesium
let underground = null
const layer2021 = null
const layer2020 = null
let rqline_layer = null
let rqpoint_layer = null
let rqpoint3D_layer = null
let queryLineserver = null
let queryPointserver = null
export default {
name: 'Map3d',
components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AMapMarker, AMapContainer, DeptSelect },
data() {
return {
mapConfig: null, // 地图配置
baseLayer: 'gaode_vec', // 底图图层
layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['117.5', '36.42'], // 地图中心
// center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
zoom: 12, // 地图缩放比例
type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
alarmIcon: require('@/assets/icons/icon-alarm1.png'), // 报警图标
alarmIconSize: [30, 30], // 报警图标大小
alarmOffset: [-15, -30], // 报警图标偏移量
wellIcon: require('@/assets/overview/icon-location-small.png'), // 井图标
wellIconSize: [16, 16], // 井图标大小
wellOffset: [-8, -16], // 井偏移量
massMarkerUrl: './static/overview/icon-location-small.png',
massMarkerSize: [15, 15],
massMarkerOffset: [0, 8],
searchResultSize: [24, 30],
searchResultOffset: [-12, -30],
searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
showAlarm: true, // 是否显示报警
alpha: 80,
toolShow: false, // 工具栏是否显示
menus: {
menuList: [
{ icon: 'search', menu: 'dataFilter', name: '数据筛选' },
{ icon: 'coordinate', menu: 'location', name: '坐标定位' }
],
dataFilterWindowShow: false, // 数据筛选窗口是否显示
locationWindowShow: false // 坐标定位窗口是否显示
}, // 工具栏菜单
listQuery: {
keywords: '', // 关键字
wellType: '', // 点位类型
deptid: '' // 组织机构
}, // 筛选条件
count: 30, // 倒计时显示时间
clock: null, // 计时器
showWellType: false, // 是否显示点位类型下拉,默认边上
wellTypeList: [], // 点位类型列表
commonIcon: 'well-common-green', // 通用图标 绿
commonIconAlarm: 'well-common-red', // 通用图标 红
alarmListOri: [], // 原始报警列表
alarmList: [], // 显示报警列表
alarmWells: [], // 报警井列表
resultList: [], // 搜索结果列表
searchMarkers: [], // 当前搜索页展示marker集合
latestAlarmTime: '', // 列表中最新报警事件
alarmFirstAmount: true, // 是否初次加载报警
firstAmount: true, // 是否第一次加载井数据
loading: true, // 加载图标是否显示
markers: [], // 所有井的点原始数据
massMarks: null, // 海量点对象
mapMarkers: [], // 查询结果列表
clusters: [], // 聚合
tempMarker: null,
showClearBtn: false, // 是否显示清除查询按钮
bloomEffect: null,
loadToken: false
}
},
computed: {
...mapGetters([
'needRefresh',
'bodyHeight'
])
},
watch: {
alpha(val) {
window.viewer.imageryLayers._layers.forEach(layer => {
layer.alpha = val / 100 // 我们可以设置为0
})
underground.alpha = val / 100
if (val <= 90 && window.map.level >= 19) {
rqline_layer.show = false
rqpoint_layer.show = false
} else {
rqline_layer.show = true
rqpoint_layer.show = true
}
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
},
'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
if (val) {
this.$refs.popupLocation.setQuery(this.center)
} else {
// window.map.remove(this.tempMarker)
}
}
},
created() {
},
mounted() {
this.$nextTick(() => {
const config = getMapConfig()
this.mapConfig = config
this.initmars3d()
this.resultList = []
})
},
beforeDestroy() {
if (this.clock) {
clearInterval(this.clock)
this.clock = null
}
},
methods: {
string2XML(xmlString) {
// 所有浏览器统一用这种方式处理(因为高版本的浏览器都支持)
var parser = new DOMParser()
var xmlObject = parser.parseFromString(xmlString, 'text/xml')
return xmlObject
},
// 初始化地球
initmars3d() {
const mapOptions = {
scene: this.mapConfig.scene,
basemaps: this.mapConfig.basemaps
}
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
// 创建viewer实例
window.viewer = new Cesium.Viewer('mapscreen', {
geocoder: false, // 是否显示地名查找控件
infoBox: false,
animation: false, // 是否显示动画控件(左下方那个)
timeline: false, // 是否显示时间线控件
shadows: false, // 阴影是否被太阳投射
showldAnimate: true, // 让场景中的动画自动播放
sceneModePicker: false, // 是否显示投影方式控件
fullscreenButton: false, // 全屏按钮不显示
homeButton: false,
navigationHelpButton: false, // 帮助按钮
baseLayerPicker: false,
imageryProvider: new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
})
})
// window.viewer.imageryLayers._layers[0].show = false
// window.viewer.scene.globe.baseColor = Cesium.Color.WHITE;
window.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
// mars3d.Map也可以直接传入外部已经构造好的viewer, 支持config.json所有参数
const map = new mars3d.Map(window.viewer, mapOptions)
// 设置鼠标
map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
// 缩放设置 重新设置缩放成员
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
// 鼠标左键平移
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
// map放在window下
window.map = map
// 设置地下
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
map.addThing(underground)
// 添加图层
// this.initLayers(this.mapConfig.basemaps)
// this.bloomEffect = new mars3d.effect.BloomEffect({
// enabled: true
// })
// map.addEffect(this.bloomEffect)
// window.map.basemap.opacity = this.alpha / 100
// 崩溃后刷新
// map.on(mars3d.EventType.renderError, function(event) {
// window.location.reload()
// })
const that = this
map.on(mars3d.EventType.load, function(event) {
that.initLine()
that.initPoint()
that.mapReady()
})
},
// 加载图层
initLayers(layersConfig) {
this.layerGroup = []
for (const layerconfig of layersConfig) {
if (layerconfig.type == 'tdt') {
this.addTdtLayer()
}
}
},
// 加载天地图图层
addTdtLayer(map, layerGroup, layerInfo, flyto = false) {
tileLayer = new mars3d.layer.TdtLayer({
name: layerInfo.name,
layer: layerInfo.layer,
key: layerInfo.key
})
map.addLayer(tileLayer)
layerGroup.push({ name: layerInfo.name, layer: tileLayer })
},
// 加载wtms图层
addWMTSLayer(map, layerGroup, layerInfo, flyto = false) {
const options = {
url: layerInfo.url,
layer: layerInfo.layer,
format: layerInfo.format,
crs: layerInfo.crs,
tileMatrixSetID: layerInfo.tileMatrixSetID,
flyTo: flyto
}
if (layerInfo.style) options.style = layerInfo.style
const tileLayer = new mars3d.layer.WmtsLayer(options)
map.addLayer(tileLayer)
layerGroup.push({ name: layerInfo.name, layer: tileLayer })
},
// 初始化管线
initLine() {
queryLineserver = new mars3d.query.QueryArcServer({
url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
popup: 'all',
pageSize: 3000
})
rqline_layer = new mars3d.layer.GeoJsonLayer({
enablePickFeatures: false,
symbol: {
type: 'polylineC',
styleOptions: {
color: '#eb6b0c',
width: 3,
hasShadows: true,
shadows: Cesium.ShadowMode.ENABLED
}
}
})
window.map.addLayer(rqline_layer)
queryLineserver.query({
success: (result) => {
rqline_layer.load({ data: result.geojson })
},
error: (error, msg) => {
console.log('服务访问错误', error)
}
})
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: '燃气管线',
url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
minimumLevel: 19,
symbol: {
type: 'polylineVolumeP',
styleOptions: {
color: '#eb6b0c',
shape: 'pipeline',
radius: 0.1
},
callback: function(attr, styleOpt) {
return { setHeight: -3 }
}
// callback: function(attr, styleOpt) {
// var val = { attr }.attr
// return { addHeight: [-3, -3] }
// }
}
})
window.map.addLayer(wfsLayer)
window.map.on(mars3d.EventType.cameraChanged, this.changeLine, this)
},
// 初始化点位
initPoint(condition = '') {
queryPointserver = new mars3d.query.QueryArcServer({
url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/0',
popup: 'all',
pageSize: 5000
})
rqpoint_layer = new mars3d.layer.GeoJsonLayer({
symbol: {
type: 'billboard',
styleOptions: {
image: '../static/images/marker.png',
scale: 0.6,
pixelOffsetY: -10,
scaleByDistance: true,
scaleByDistance_far: 30000,
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
},
popup: 'all'
})
window.map.addLayer(rqpoint_layer)
rqpoint3D_layer = new mars3d.layer.GeoJsonLayer({
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/yubi.gltf',
scale: 1.5
},
callback: function(attr, styleOpt) {
// var val = { attr }.attr
return { setHeight: -3 }
}
},
popup: 'all'
})
window.map.addLayer(rqpoint3D_layer)
if (condition === '') {
queryPointserver.query({
success: (result) => {
if (result.count === 0) {
this.$message.warning('未查询到相关记录！')
rqpoint_layer.load({ data: { features: null }})
rqpoint3D_layer.load({ data: { features: null }})
return
}
rqpoint_layer.load({ data: result.geojson })
rqpoint3D_layer.load({ data: result.geojson })
},
error: (error, msg) => {
this.$message.error('服务访问错误,' + error)
}
})
} else {
queryPointserver.query({
column: 'LineWt',
text: condition,
success: (result) => {
if (result.count === 0) {
this.$message.warning('未查询到相关记录！')
rqpoint_layer.load({ data: { features: null }})
rqpoint3D_layer.load({ data: { features: null }})
return
}
rqpoint_layer.load({ data: result.geojson })
rqpoint3D_layer.load({ data: result.geojson })
},
error: (error, msg) => {
this.$message.error('服务访问错误,' + error)
}
})
}
},
// 控制二维线的显隐
changeLine() {
console.log('map-level:' + window.map.level)
console.log('alpha:' + this.alpha)
if (window.map.level <= 19) {
rqline_layer.show = true
rqpoint_layer.show = true
} else if (this.alpha < 90) {
rqline_layer.show = false
rqpoint_layer.show = false
}
},
// 初始化放这里
mapReady() {
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
this.refreshAlarm()
if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => { this.countDown() }, 1000)
}
},
// 过滤图层
filterLayer(checkedLayer) {
// 1.过滤井图层
// if (this.type === 'massMarkers') {
// const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
// if (wellTypes && wellTypes.length > 0) this.filterMassMarker({ wellTypes: wellTypes }) // 加载海量点
// } else if (this.type === 'cluster') {
// this.filterClusters() // 加载聚合点
// }
// 2.选中or没选中报警图层
if (checkedLayer.indexOf('alarm') !== -1) {
this.showAlarm = true
} else {
this.showAlarm = false
}
},
// 切换底图
changeBaseMap(type) {
this.baseLayer = type
if (type === 'gaode_vec') {
layer2021.show = true
layer2020.show = false
window.viewer.imageryLayers.raiseToTop(layer2021)
// window.map.basemap = 1112
// if (this.bloomEffect !== null) {
// this.bloomEffect.enabled = false
// }
} else {
layer2021.show = false
layer2020.show = true
window.viewer.imageryLayers.raiseToTop(layer2020)
// window.map.basemap = 1113
// if (this.bloomEffect !== null) {
// this.bloomEffect.enabled = true
// }
}
},
// 倒计时函数
countDown() {
this.clock = setInterval(() => {
this.count--
if (this.count < 0) { // 当倒计时小于0时清除定时器
this.refreshAlarm()
this.count = this.baseConfig.refreshTime
}
}, 1000)
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
getWellType().then(response => {
this.wellTypeList = []
// 如果该用户支持的点位类型只有一个，则不显示该筛选框
const supportWellTypes = this.$store.getters.wellTypes
this.wellTypeList = response.data.filter(wellType => {
return supportWellTypes.findIndex(item => item == wellType.value) > -1
})
const wellLayer = {
id: 'well',
name: '井图层',
children: this.wellTypeList.map(item => {
return {
id: 'well-' + item.value,
name: item.name
}
})
}
this.layers.splice(0, 1, wellLayer)
if (this.baseConfig.showAllWell) {
this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)]
} else {
this.checkedLayer = [...this.checkedLayer]
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
})
},
/**
* 数据筛选
* @param listQuery 筛选条件
* @param showMessage 是否告知筛选结果
*/
dataFilter(listQuery, showMessage = true) {
if (this.type === 'massMarkers') { // 过滤海量点
this.filterMassMarker(listQuery, showMessage)
this.filterAlarm(listQuery, showMessage)
} else if (this.type === 'cluster') { // 过滤聚合点
this.filterClusters(listQuery, showMessage)
this.filterAlarm(listQuery, showMessage)
}
},
// 清空查询
clearSearch() {
this.searchMarkers = []
this.resultList = []
},
// 数据查询
search(keywords) {
if (keywords === '') {
this.$message.warning('搜索条件不能为空')
} else {
this.resultList = this.markers.filter(item => {
if (item.wellCode.includes(keywords) || item.wellName.includes(keywords) || item.position.includes(keywords)) {
return true
} else {
return false
}
})
this.initPoint(keywords)
}
},
// 搜索结果页面变化，触发地图展示列表中所有
searchPageChange(currentMarkers) {
// 增加查询展示图层
this.searchMarkers = currentMarkers
},
// 点击搜索结果项居中，弹窗
searchItemClick(marker) {
// this.center = marker.lnglat
this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1])
},
// 过滤海量点，给markers赋visible值
filterMassMarker(listQuery, showMessage = false) {
const hideWellIds = []// 要隐藏的点位编号
let center = [] // 待移动到的地图中心
// 2. 整理查询条件
const keywords = listQuery.keywords // 关键字
const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
let deptids = [] // 所有权属
if (listQuery.deptid) {
deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
}
// 3.查询全部井，是否匹配，只要有一项不匹配则show为false
for (const marker of this.markers) {
let show = true
// 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
show = false
}
// 部门不为空， 且没有匹配成功，多部门匹配
if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
show = false
}
// 点位类型不为空，且没有匹配成功
if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
show = false
}
// 如果show为false，放入需要隐藏的井id列表
if (show === false) {
hideWellIds.push(marker.wellId)
} else {
center = marker.lnglat
}
marker.visible = show
}
this.resetMassMarker()
},
// 过滤报警
filterAlarm(listQuery, showMessage = false) {
const hideWellIds = []// 要隐藏的点位编号
// 整理筛选条件
const keywords = listQuery.keywords
const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
let deptids = [] // 所有权属
if (listQuery.deptid) {
deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
}
// 查询报警的井
for (const marker of this.alarmWells) {
let show = true
// 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
show = false
}
// 部门不为空， 且没有匹配成功，多部门匹配
if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
show = false
}
// 点位类型不为空，且没有匹配成功
if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
show = false
}
// 如果show为false，放入需要隐藏的井id列表
if (show === false) {
hideWellIds.push(marker.wellId)
}
marker.visible = show
}
// 4.过滤报警marker：alarmWells 如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
if (hideWellIds.length === this.alarmWells.length) {
for (const alarmWell of this.alarmWells) {
alarmWell.visible = false
}
} else {
// 将报警隐藏
for (const alarmWell of this.alarmWells) {
if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
alarmWell.visible = false
} else {
alarmWell.visible = true
}
}
}
// 5.过滤显示列表：alarmList
this.alarmList = []
if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
for (const alarm of this.alarmListOri) {
const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
if (findFlag === -1) {
this.alarmList.push(alarm)
}
}
} else { // 如果没有直接等于alarmListOri
this.alarmList = this.alarmListOri
}
},
// 获取全部井列表
fetchWellList() {
this.loading = true
getWellList().then(response => {
this.loading = false
const wells = response.data
if (wells.length > 0) {
this.markers = []
for (const well of wells) {
const marker = {
...well,
lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
icon: this.commonIcon,
visible: true,
wellStatus: 'normal'
}
this.markers.push(marker)
}
}
this.loading = false
})
},
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
this.count = this.baseConfig.refreshTime
this.loading = true
// 如果showAlarm为ture, 确保选中图层报警
if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
this.checkedLayer.push('alarm')
}
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
if (response.data.length > 0) {
const latestTime = response.data[0].alarmTime
console.log(latestTime, 'vs', this.latestAlarmTime)
if (this.latestAlarmTime < latestTime) {
// 如果不是初次加载并且声音开关开启状态
if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
console.log('playAudio')
this.playAudio()
}
this.latestAlarmTime = latestTime
}
}
this.alarmFirstAmount = false // 初次加载完毕
// 获取当前报警列表
this.alarmListOri = response.data // 列表原始
this.alarmList = response.data // 要显示的报警列表
this.alarmWells = [] // 报警的井列表
for (const alarm of response.data) {
if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
this.alarmWells.push({
wellCode: alarm.wellCode,
wellId: alarm.wellId,
wellType: alarm.wellType,
lngGaode: alarm.lngGaode,
latGaode: alarm.latGaode,
coordinates: [alarm.lngGaode, alarm.latGaode],
position: alarm.position,
visible: true
})
}
}
console.log('alarmWells Length', this.alarmWells.length)
}
})
},
/**
* 打开报警弹窗
* @param wellId 井id
* @param coordinates 弹窗位置： [经度，纬度]
* @param needCenter 是否需要将点居中
*/
openAlarmWindow(wellId, coordinates, needCenter = false) {
console.log('openAlarmWindow:' + wellId)
// if (this.needCenter) { // 如果需要居中
// this.center = coordinates
// }
// 获取报警详情
getWellAlarms(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
const alarmInfo = {
wellCode: response.data.wellCode,
position: response.data.position,
deptName: response.data.deptName,
wellTypeName: response.data.wellTypeName,
alarms: response.data.alarmList,
deep: response.data.deep
}
const AlarmWindow = Vue.extend({
render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
})
const alarmWindow = new AlarmWindow().$mount()
const infoWindow = new window.AMap.InfoWindow({
content: alarmWindow.$el, // 显示内容
offset: [0, this.alarmOffset[1]], // 偏移
autoMove: true // 是否自动调整窗体到视野内
})
infoWindow.open(window.map, new toLngLat(coordinates))
}
})
},
/**
* 打开井详情弹窗
* @param wellId 井id
* @param coordinates 弹窗位置： [经度，纬度]
* @param offsetY 弹窗Y轴偏移，为负值
*/
openInfoWindow(wellId, coordinates, offsetY) {
this.clearInfoWindow()
// 首先获取井详情
getWellInfo(wellId).then(response => {
if (response.code === 200) {
const wellInfo = { ...response.data }
// 加载弹窗组件
const WellInfo = Vue.extend({
render: h => h(WellInfoWindow, { props: { wellInfo: wellInfo }})
})
const wellWindow = new WellInfo().$mount()
const infoWindow = new window.AMap.InfoWindow({
content: wellWindow.$el, // 显示内容
offset: [0, offsetY], // 偏移
autoMove: true // 是否自动调整窗体到视野内
})
infoWindow.open(window.map, new toLngLat(coordinates))
}
})
},
// 关闭所有弹窗
clearInfoWindow() {
const { map } = this
map.clearInfoWindow()
},
// 点击报警列表
alarmRowClick(row) {
console.log('alarmRowClick')
const wellId = row.wellId
for (const alarmWell of this.alarmWells) {
if (alarmWell.wellId === wellId) {
// this.center = alarmWell.coordinates
if (this.zoom < 16) {
this.zoom = 16
}
this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
}
}
},
// 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
clickMenu(menu) {
this.closeAllPopup()
const key = menu.menu + 'WindowShow'
const obj = {}
obj[key] = true // 将该值置为false, 需要借助obj中转
Object.assign(this.menus, obj)
},
// 关闭所有菜单点出的弹窗
closeAllPopup() {
for (const key in this.menus) {
if (key.indexOf('WindowShow') > -1) {
// 将该值置为false, 需要借助obj中转
const obj = {}
obj[key] = false
Object.assign(this.menus, obj)
}
}
},
// 关闭数据筛选弹窗
closePopupDataFilter() {
Object.assign(this.menus, { dataFilterWindowShow: false })
},
// 坐标定位，居中，绘点
setCenter(position) {
this.center = position
var center = { lat: this.center[1], lng: this.center[0], alt: 30000, heading: 360, pitch: -45 }
window.map.setCameraView(center)
},
// 坐标拾取， 在地图上绘点
pickerPosition() {
const { searchResultOffset, searchResultIcon, searchResultSize, center } = this
const icon = new window.AMap.Icon({
size: toSize(searchResultSize), // 图标尺寸
image: searchResultIcon, // Icon的图像
imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
})
const marker = new window.AMap.Marker({
icon: icon,
position: center,
offset: toPixel(searchResultOffset),
draggable: true
})
marker.on('dragend', e => {
const position = [e.lnglat.lng, e.lnglat.lat]
this.$refs.popupLocation.setQuery(position)
})
marker.setMap(window.map)
this.tempMarker = marker
},
// TODO: 关闭坐标定位窗口， 清除地图上的标注
closePopupLocation() {
Object.assign(this.menus, { locationWindowShow: false })
},
// 获取当前deptid的所有下级id,仅最多支持3级
fetchDeptList(deptid) {
console.log('fetchDeptList')
const deptids = [deptid] // 储存了该pid和其子集
const deptlist = this.$refs.deptSelect.fetchDeptTree()
for (const dept of deptlist) {
if (dept.pid === deptid) {
deptids.push(dept.id)
}
}
const result = []
// 查找所有列表中有没有deptids里面的本人或子集
if (deptlist.length > 0) {
for (const dept of deptlist) {
if (deptids.indexOf(dept.id) !== -1) {
result.push(dept.id)
} else if (deptids.indexOf(dept.pid) !== -1) {
result.push(dept.id)
}
}
}
console.log(result)
return result
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// 地图
.overview-map-container{
width: 100%;
height: 100%;
}
.search-marker{
position: relative;
.search-marker-image{
width: 100%;
height: 100%;
}
.search-marker-label{
position:absolute;
font-size: 14px;
font-weight: 600;
color:#FFF;
z-index:50;
top: 4px;
left: 50%;
transform: translateX(-50%)
}
}
.cover{
position: absolute;
bottom: 0px;
left: 0px;
/*background-color: red;*/
background-color: #1a2126;
width: 100px;
height: 30px;
}
</style>
