openlayers6地图离线开发demo-弹窗与边界问题

ol6有提供地图弹窗api，以及有边界处理，可根据边界，弹窗往地图内展示，也可设置在边界时，移动地图，保证弹窗的完整展示。但是局限于，布局是地图上层，无任何遮盖，如果两侧有侧边div盖在地图上方，那么ol6自带的边界，是不认的，弹窗会展示到侧边栏的 下方。因此可以使用自定义弹窗，通过像素计算，以及自定义的边界计算，进行地图弹窗位置的设置

 

地图组件设置弹窗插槽

this.$emit('markerClick', feature)
if (this.windowCreate) {
  if (!feature.item) {
    return
  }
  // 测试地图内弹窗,勿删
  this.currentMarker = {
    position: [feature.item.item.lng, feature.item.item.lat]
  }
  this.$emit('windowOpen', this.map.getPixelFromCoordinate(transform(this.currentMarker.position, this.mapEPSG, DefaultEPSG))) // 弹窗要的像素坐标
}

地图点击抛出对应需要的像素，然后进行边界计算

windowOpen(poi) { //poi为地图转换后，传过来的像素
  const windowParams = {
    width: 200,
    height: 200,
    left: poi[0],
    top: poi[1],
    leftModal: 440,
    topModal: 81,
    bottomModal: 0,
    rightModal: 440
  }
  const position = windowPosition(windowParams)
  this.windowLeft = position[0]
  this.windowTop = position[1]
  this.windowVisible = true
},

/**
 * 弹窗绝对定位的位置
 * @param widowParam Object
 *  width 弹窗宽度
 *  height 弹窗高度
 *  left 定位点对应转换为像素的left
 *  top 定位点对应转换为像素的top
 *  leftModal 地图左边上方占位的像素
 *  topModal 地图上边上方占位的像素
 *  bottomModal 地图下边上方占位的像素
 *  rightModal 地图右边上方占位的像素
 *  获取到的一些弹窗的参数
 *
 */
export function windowPosition(widowParam = {}) {
  let returnLeft = 0
  let returnTop = 0
  const totalWidth = document.body.clientWidth
  const totalHeight = document.body.clientHeight
  const { width, height, left, top, leftModal, topModal, bottomModal, rightModal } = widowParam
  if (left > leftModal + width / 2) {
    if (left + width / 2 > totalWidth - rightModal) {
      returnLeft = left - width
      if (top > topModal + height) {
        if (top + height > totalHeight - bottomModal) {
          returnTop = top - height
        } else {
          returnTop = top - height / 2
        }
      } else {
        returnTop = top
      }
    } else {
      returnLeft = left - width / 2
      if (top > topModal + height) {
        if (top + height > totalHeight - bottomModal) {
          returnTop = top - height
        } else {
          returnTop = top - height
        }
      } else {
        returnTop = top
      }
    }
  } else {
    returnLeft = left
    if (top > topModal + height) {
      if (top + height > totalHeight - bottomModal) {
        returnTop = top - height
      } else {
        returnTop = top - height / 2
      }
    } else {
      returnTop = top
    }
  }
  console.log([returnLeft, returnTop])
  return [returnLeft, returnTop]
}