电网一张图地图添加弹框（mapBox可参考）

一、按照一张图示例引入地图资源

windwo.map = initNarMapMap({
  container: 'NarMap', // 地图容器的id
  style: 'aegis://style/aegis/StreetsDark-v2', // 使用的地图样式
  center: [-74.5, 40], // 初始中心点坐标
  zoom: 9 // 初始缩放级别
}); 

二、弹框添加和数据传输

// 添加弹框
  const tipObj = {
 		tipTitle:"这是弹框标题",
 		tipData:[{key:"500kV线路",value:"50000"},{key:"±800kV线路",value:"80000"}]
 }；//你需要展示的值，格式可以自定义，只需在弹框组件内按需索取即可
  const lonLat = [29.35，106.33]
  const elementPopup = document.createElement('div')
  //mapTipPopUp---你的弹框组件
  const popupNode = createVNode(mapTipPopUp, {
    tipParamData: tipObj,
  })
  render(popupNode, elementPopup)
  window.mapPopup.setLngLat(lonLat)
    .setMaxWidth('400px')
    .setDOMContent(elementPopup)
    .addTo(window.map)

三、弹框组件

<!-- tip提示框组件 -->
<template>
  <div id="popup" class="ol-popup">
    <div class="mapTip" id="moveMapTabId">
      <div class="tipTitle" v-show="tipParamData.tipTitle">
        <div>{{ tipParamData.tipTitle }}</div>
        <div class="close" @click="close"><i class="el-icon-close"> </i></div>
      </div>
      <div class="tipContent">
        <table>
          <tr v-for="each in tipParamData.tipData" :key="each.key" class="tip-item">
            <td class="labelField">{{ each.key }}：</td>
            <td class="valueField"  :title="each.value">{{ each.value }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NariMapTipCom",
    props: ['tipParamData', 'nariMapTipMethods','viewImgCallback','viewDetailCallback'],
    data() {
      return {
        viewImgUrls: [],
        imgIndex: 0,
        isShowImg: false
      }
    },
    methods: {
      close() {
        window.mapPopup.remove();
      }
    }
  }
</script>

<style scoped>
//你的样式
</style>