基于vue3组件实现mapbox-gl的popup弹窗

mapbox官网上也有实现popup弹窗的示例，但是有一个弊端，弹窗中的内容不能操作，如：（文本框不能输入内容，按钮不能点击等等） 曾看到有基于vue2组件实现popup弹窗，这里不再阐述，自行百度搜索 。本文是基于vue3组件实现popup弹窗,代码如下：

function mapboxPopup(map) {  
let el = document.createElement('div')  
el.id = 'markerId'  
el.style.backgroundImage = 'url(' + getAssetsFile('dw.png') + ')'  
el.style.width = 32 + 'px'  
el.style.height = 32 + 'px'  
let LngLat = [item.lng, item.lat]  
let markers = new mapboxgl.Marker(el).setLngLat(LngLat).addTo(map)  
let elpopup = document.createElement('div')  
//comMarkerPopup为组件名称  
let vNodePopup = createVNode(comMarkerPopup, {  
obj: ""  
})  
render(vNodePopup, elpopup)  
const option = {  
closeOnClick: false,  
closeButton: false,  
anchor: 'bottom',  
offset: [0, -20]  
}  
  
let popups = new mapboxgl.Popup(option)  
.setLngLat(LngLat)  
.setMaxWidth('300px')  
.setDOMContent(elpopup)  
.addTo(map)  
}
//获取图片路径
function getAssetsFile(imgName) {  
return new URL(`../assets/img/${imgName}`, import.meta.url).href  
}