Vue中使用Openlayers添加提示信息

部分关键代码

<!-- 主页面 -->
<template>
	<div id="coalmap"  class="map">
		<div v-for="(i, index) in popupList" :key="index">
	        <home-popup :id="i.id" :popup="i" @closepop="closepop"></home-popup>
	      </div>
      </div>
</template>
export default {
	data () {
		return {
			coalMap: null,
			sendataForm: null,
			popupList: []
		}
	},
	components: {
      homePopup
    }
	methods: {
	  ...
	  // 监听单击事件
      monitorsbclick () {
        let self = this
        this.coalMap.on('singleclick', function (e) {
          let pixel = self.coalMap.getEventPixel(e.originalEvent)
          let fet = self.coalMap.forEachFeatureAtPixel(pixel, function (fe) {
            return fe
          })
          if (fet) { // 点击到图标
            let value = JSON.parse(fet.get('value'))
            self.sendataForm.name = value.name
            self.sendataForm.location = value.location
            self.getIconData(value)
          }
        })
      },
		// 查询点位信息
      getIconData (val) {
        this.messList = []
        this.$http({
          url: this.$http.adornUrl('/api/home/getDevAttrs'),
          method: 'get',
          params: this.$http.adornParams({
            'code': val.code,
            'type': val.type
          })
        }).then(({data}) => {
          this.messList = data.data
          // 生成弹窗
          this.setPoper(val, data.data)
        })
      },
      // 生成弹窗
      setPoper (val, list) {
        let a = this.popupList.filter(i => {
          return i.id === val.id + ''
        })
        let vid = val.id + ''
        if (a.length === 0) {
          this.popupList.push({
            id: vid,
            name: JSON.parse(JSON.stringify(this.sendataForm.name)),
            messList: list
          })
        }
        this.$nextTick(() => {
          let container = document.getElementById(vid)
          let overlay = new ol.Overlay(({
            id: `odom${vid}`,
            element: container,
            autoPan: true,
            positioning: 'bottom-left',
            autoPanAnimation: {
              duration: 250
            }
          }))
          this.coalMap.addOverlay(overlay)
          overlay.setPosition([parseFloat(val.xAxis), parseFloat(val.yAxis)])
        })
      },
      closepop (ids) {
        let b = this.coalMap.getOverlays().getArray()
        for (var i = 0; i < b.length; i++) {
          if (b[i].id === `odom${ids}`) {
            b[i].setPosition(undefined)
          }
        }
      },
      ...
	}
}

<!-- 组件 -->
<template>
  <div class="ol-popup">
    <div class="fontTitle">
      <span>{{popup.name}}</span>
      <i class="el-icon-close closeIcon" @click="closepop(popup.id)"></i>
    </div>
    <div class="popup-content">
      <hr class="style-five" />
      <div v-for="(a, aindex) in popup.messList" :key="aindex">
        {{a.name}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      popup: {
        type: Object
      }
    },
    methods: {
      closepop (id) {
        this.$emit('closepop', id)
      }
    }
  }
</script>

<style lang="scss">
  .ol-popup {
    min-width: 100px;
    min-height: 30px;
    max-height: 140px;
    overflow-y: auto;
    background: rgba(53,55,58,0.8);
    -webkit-box-shadow: -5px 0px 15px #494A4F inset, 10px 0px 15px #494A4F inset;
     box-shadow: -5px 0px 15px #494A4F inset, 10px;
    margin-left: 12px;
    margin-bottom: 20px;
  }
  .closeIcon {
    color: #ED2641;
    cursor: pointer;
    float: right;
    font-size: 20px;
    line-height: 30px;
    margin-top: 1px;
    margin-right: 1px;
  }
  .fontTitle {
    span {
      font-size: 14px;
      line-height: 30px;
      margin-right: 10px;
      margin-left: 10px;
      color: #fff;
    }
  }
  .popup-content {
    max-height: 100px;
    overflow-y: auto;
    margin-right: 0px;
    float: left;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
  }
</style>

效果