【WebGIS实例】（13）MapboxGL+Vue3 实现自定义组件地图气泡弹窗 popup

前言

没有前言，直接上代码了

代码

1. 核心方法

import mapboxgl from 'mapbox-gl'
import { createApp } from 'vue'

const addComponentPopup = (component, feature, lnglat, map) => {
  const popup = new mapboxgl.Popup({
    // anchor: 'center', // 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'
    className: 'customize-popup',
    closeButton: false,
    closeOnClick: true,
    closeOnMove: false,
    focusAfterOpen: false,
    maxWidth: '240px',
    offset: 10
  })

  const container = document.createElement('div')
  createApp(component, {
    feature: feature // 传入信息
  }).mount(container)

  popup.setLngLat(lnglat).setDOMContent(container).addTo(map)
  return popup
}

export { addComponentPopup }

2. 要搭载的自定义组件

<script setup>
defineProps({
  feature: Object
})
</script>

<template>
  <div style="background: yellow">
    <div>早上好</div>
    <div>接收参数：{{ feature.type }}</div>
  </div>
</template>

3. 使用

import { addComponentPopup } from '@/utils/map/event'
import componentA from './componentA.vue'


map.on('click', (e) => {
  const { point, lngLat } = e;
  const clickedFeatures = map.queryRenderedFeatures(point); // 获取点击处的要素

  if (clickedFeatures.length !== 0) {
    addComponentPopup(componentA, clickedFeatures[0], lngLat, map);
  }
});

4. 效果：点击地图上的要素后出现popup