Estoy creando una aplicación web usando Vue 3 y Leaflet. Yo uso el complemento vue-leaflet .

Tengo un mapa de fondo y capas superpuestas, es decir, capas de mosaico WMS servidas por Geoserver.

Ahora quiero que se abra una ventana emergente en la ubicación (latitud, longitud) donde hago clic en la capa. Para el complemento vue-leaflet, solo pude encontrar ejemplos para agregar una ventana emergente a marcadores, círculos o geometrías, pero ningún ejemplo para ventanas emergentes en capas.

Para empezar, traté de definir una función de folleto que agrega una ventana emergente al mapa cuando se ejecuta un evento de clic. pero eso me tira un error. Encuentre el fragmento de código relevante y el registro de errores adjuntos.

¿Alguna idea de cómo abordar esto? ¿Usando el complemento vue-leaflet o el script de folleto puro?

Me alegra cualquier idea =)

//HTML

 <div id="bg-map"> <l-map ref="map" v-model="zoom" v-model:zoom="zoom" :center="center" :options="{zoomControl:false, attributionControl:false}" :minZoom="minzoom" @click="addPopUp" > <!-- Layers from Geoserver as cached tile layers: --> <l-wms-tile-layer v-for="wmsLayer in getCheckedLayers" :key="wmsLayer.path" :layers="wmsLayer.path" :format="format_tile" :transparent="true" :tiled="true" :zIndex="wmsLayer.zindex" :base-url="wmsurl" :visible="true" :opacity="wmsLayer.opacity" > </l-wms-tile-layer>

// JS

 methods: { addPopUp(e) { const map = this.$refs.map.leafletObject; var popLocation = e.latlng; var popup = new L.popup() .setLatLng(popLocation) .setContent('<p> Hello popup </p>') .openOn(map) },

// registro de errores

 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at NewClass._updateContent (leaflet-src.esm.js?6bb3:9617:1) at NewClass.update (leaflet-src.esm.js?6bb3:9528:1) at NewClass.onAdd (leaflet-src.esm.js?6bb3:9465:1) at NewClass.onAdd (leaflet-src.esm.js?6bb3:9751:1) at NewClass._layerAdd (leaflet-src.esm.js?6bb3:6561:1) at Proxy.whenReady (leaflet-src.esm.js?6bb3:4422:1) at Proxy.addLayer (leaflet-src.esm.js?6bb3:6623:1) at Proxy.openPopup (leaflet-src.esm.js?6bb3:9975:1) at NewClass.openOn (leaflet-src.js?e11e:9752:1) at Proxy.addPopUp (BGMap.vue?112f:315:1)