openlayers地图点击标记点,弹出当前位置自定义弹窗(三)

1. 效果图

2. 代码

<template>
  <div class="container">
    <div id="map" style='width: 100%; height: 100%;border: 5px solid #a4cdff;'>
      <div class="toolBox">
        <div  class="messageBox"  v-show="isShow">
          <div class="messages">要展示的信息</div>
          <el-button @click="closeWin" size="mini">取 消</el-button>
          <el-button type="primary" size="mini" @click="closeWin">确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Map, View, Feature } from 'ol'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { XYZ, Vector as VectorSource } from 'ol/source'
import { Point } from 'ol/geom'
import { Style, Fill, Stroke, Circle as SCircle } from 'ol/style'
// 显示要素
import Overlay from 'ol/Overlay'
//导入图片
import imgName from '../assets/target.png'

export default {
  name: 'myMap',
  components: {
    // markClickDialog
  },
  data () {
    return {
      // 地图实例
      openMap: null,
      // 自身标点的实例
      myLocation: null,
      // 弹窗实例
      myDialog: null,
      // 测试数据
      address: [118.7969, 32.0603],
      // 弹窗显示隐藏
      isShow: false,
      // vue中引入图片的地址
      imgSrc: imgName,
      // 判断当前位置信息加载情况,超时提醒
      getLocationFlag: false,
      // 点击位置的坐标点
      clickLocation: ''
    }
  },
  created () {
    // 浏览器当前窗口标题
    document.title = 'myMap'
  },
  mounted () {
    this.initMap()
    // 原点打点
    // this.setMarker()
    // 原点循环打点
    // this.setMarkers(this.targets)
  },
  methods: {
    // 地图初始化底图
    initMap () {
      this.openMap = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=7&style=7&x={x}&y={y}&z={z}'
            })
          })
        ],
        view: new View({
          // 将西安作为地图中心
          // center: olProj.fromLonLat(this.address),//坐标转换
          center: this.address,
          // 经纬度转换
          projection: 'EPSG:4326', // EPSG:3857(默认坐标格式)
          // 初始时地图放大的级别
          zoom: 5
        }),
        controls: []
      })
      // 整个底图添加点击事件
      this.singleclick()
    },
    // 整个底图添加点击事件
    singleclick () {
      this.openMap.on('singleclick', (e) => {
        // 判断是否点击在点上
        console.log(e, '底图点击处携带的数据')
        console.log(e.coordinate, '底图当前点击位置的坐标')
        this.clickLocation = e.coordinate

        // 给地图整体加点击事件
        const feature = this.openMap.forEachFeatureAtPixel(e.pixel, (feature) => feature)
        if (feature) {
          console.log(feature, '点击原点携带的数据set')
        } else {
          // 以下代码实现点击后切换自身标记
          this.setDIYmarkers(this.clickLocation)
        }
      })

    // 设置自定义打点要素
    setDIYmarkers (myLocation) {
      if (this.myLocation) {
        this.openMap.removeOverlay(this.myLocation)
      }
      // 创建一个dom元素
      const el = document.createElement('img')
      el.src = this.imgSrc
      el.style.width = '40px'
      el.style.height = '40px'
      el.style.cursor = 'pointer'
      // el.setAttribute('data-location')
      // el.style.border = '1px solid red'
      const marker = new Overlay({
        element: el, // 要显示的元素
        // position: fromLonLat(myLocation), // 地图投影的位置
        position: myLocation, // 地图投影的位置
        offset: [-20, -30], // 元素显示的像素偏移量
        autoPan: true // 自动移动地图以完整的显示元素
      })
      this.myLocation = marker
      el.addEventListener('click', (e) => {
        this.isShow = true
        this.showDialog(this.myLocation.options.position)
      })
      this.openMap.addOverlay(marker)
      // this.openMap.removeOverlay(marker)
    },

    // 将弹窗作为图层加入地图
    showDialog (location) {
      const dialog = document.querySelector('.messageBox')
      const marker = new Overlay({
        element: dialog,
        position: location,
        offset: [-150, -220]
        // autoPan: true
      })
      this.myDialog = marker
      console.log('1212121212')
      this.openMap.addOverlay(this.myDialog)
    },

    // 清除当前位置打点
    clearMyLocation () {
      if (this.myLocation) {
        this.openMap.removeOverlay(this.myLocation)
      }
    },
    // 关闭弹窗
    closeWin () {
      this.isShow = false
      // if (this.myDialog) {
      //   this.openMap.removeOverlay(this.myDialog)
      // }
    }
  }
}
</script>
<style  scoped>
.container {
  width: 100%;
  height: 80vh;
  border-radius: 50px;
  background-color: rgba(255, 192, 203, 0.277);
}

.toolBox {
  position: relative;
}

.messageBox {
  width: 300px;
  height: 200px;
  background-color: #fff;
}

.messages {
  width: 100%;
  height: 70%;
}
</style>