Vue3组件+leaflet，实现重叠marker的Popup切换显示

一、前言

GIS开发过程中，经常需要绘制marker，这些marker很大概率会有坐标相同导致的叠加问题，这种情况下会降低使用体验感。所以我们可以将叠加的marker的popup做一个分页效果，可以切换显示的marker。

二、技术要点

我们以leaflet为例，我们可以使用leaflet的popup展示marker的详细信息，简单的信息展示我们可以直接拼接html字符串就能解决，但是我们需要切换信息，这样就会涉及到dom的事件监听还有信息内容的动态更新，如果用js+html这样的方式实现起来非常复杂，于是我们看看能不能直接用vue3的组件作为popup的content，bindPopup(<String|HTMLElement|Function|Popup>content,<Popup options>options?) 这个是marker绑定popup的函数，可以看到可以传HTMLElement、String也可以是一个Function，于是可以写一个Function返回Vue3的组件$el。

三、步骤

1、创建Popup的内容Vue3组件

/** 
* WarningSignalPopup.vue 地图marker的popup内容组件 
* @Author ZhangJun  
* @Date 2025/3/14 9:37 
**/
<template><div class="w-[300px]"><div><div class="font-bold text-lg mb-2">{{ currentMarkerContent?.headline }}</div><div class="flex items-start gap-2 mb-2"><img class="h-[65px] w-min-[60px]" :src="currentMarkerContent?.iconUrl" :alt="levelNames[currentMarkerContent?.severity]" /><div><div>预警等级：{{ levelNames[currentMarkerContent?.severity] }}</div><div>所属区域：{{ currentMarkerContent?.regionName }}</div><div>发布时间：{{ currentMarkerContent?.sendtime }}</div><div>发布单位：{{ currentMarkerContent?.sender }}</div></div></div><div class="w-full">{{ currentMarkerContent?.description }}</div></div><el-space size="8px" class="mt-4" v-show="popupContentList.length > 1"><el-button type="primary" size="small" @click="handleClickPrev" :icon="ArrowLeft"></el-button><div>{{ markerIndex + 1 }} / {{ popupContentList.length }}</div><el-button type="primary" size="small" @click="handleClickNext" :icon="ArrowRight"></el-button></el-space></div>
</template><script setup>
import { ref, defineExpose, watchEffect, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
//marker的popup内容列表
let popupContentList = ref([])
//marker对象
let targetMarker = ref(null)
//当前marker的索引
let markerIndex = ref(0)const levelNames = {Blue: '蓝色',Yellow: '黄色',Orange: '橙色',Red: '红色',
}//当前需要显示的marker内容
let currentMarkerContent = ref({})/*** 上一个*/
const handleClickPrev = () => {if (markerIndex.value > 0) {markerIndex.value = (markerIndex.value - 1) % popupContentList.value.length}
}/*** 下一个*/
const handleClickNext = () => {if (markerIndex.value < popupContentList.value.length - 1) {markerIndex.value = (markerIndex.value + 1) % popupContentList.value.length}
}/*** 重置*/
const reset = () => {popupContentList.value = []targetMarker.value = nullmarkerIndex.value = 0currentMarkerContent.value = {}
}//这里就是将marker的icon更新，跟popup显示的image一致
watchEffect(() => {//marker不能为nullif (targetMarker.value) {//获取marker要显示的popup内容currentMarkerContent.value = popupContentList.value?.[markerIndex.value]//获取popup内容的标记图片url，这里跟marker的iconUrl是一样的地址let iconUrl = currentMarkerContent.value?.iconUrl//得到marker的icon对象let icon = targetMarker.value?.getIcon()//判断iconUrl是否与marker的iconUrl不同，如果不同，则更新marker的iconUrlif (iconUrl && iconUrl !== icon.options.iconUrl) {icon.options.iconUrl = iconUrltargetMarker.value.setIcon(icon)}}
})defineExpose({targetMarker,popupContentList,markerIndex,reset,
})
</script><style scoped lang="scss"></style>

2、用于生成marker的hook

/*** @ClassName UseWarningSignal.js* @Description 预警信号展示hook* @Author ZhangJun* @Date  2025/3/12 17:36**/
import { ref } from 'vue'
import { getAction } from '@/utils/manage'
import moment from 'moment'/*** 预警信号hook* @param warningSignalPopupRef 预警信号popup弹窗实例* @returns {{getWarningSignalList: getWarningSignalList, warningSignalList: Ref<UnwrapRef<[]>, UnwrapRef<[]> | []>}}*/
export function useWarningSignal(warningSignalPopupRef) {//预警信号数据列表let warningSignalList = ref([])let warningIconLayer = null/*** 获取预警信号列表* @param timeKey 时间标识*/const getWarningSignalList = (timeKey = moment().format('YYYY-MM-DD')) => {//todo: 这里应该是从后端获取数据，这里只是模拟数据let endTime = moment('2025-01-05')let startTime = endTime.clone().subtract(2, 'days').format('YYYY-MM-DD')getAction('productInfo/getProductInfoTxt', { startTime, endTime: endTime.format('YYYY-MM-DD') }).then(res => {res[1].severity = 'Red'warningSignalList.value = resdrawWarningSignalMarkers(res)})}/*** 绘制预警信号标记* @param warningSignalList*/const drawWarningSignalMarkers = (warningSignalList = warningSignalList.value) => {//因为返回的数据里面没有灾害名称，所以只能这种操作let districtTypeList = ['冰雹', '台风', '大雾', '大风', '寒潮', '山洪', '干旱', '暴雨', '暴雪', '森林火险', '道路结冰', '雷电', '雷雨大风', '霜冻', '高温']let warningLevelList = ['', 'Blue', 'Yellow', 'Orange', 'Red']//先清除之前的标记if (warningIconLayer) {warningIconLayer.clearLayers()}//没有行政区数据，所以只能通过行政区名称来获取wizMap.getJson('/json/area.json', data => {let { features } = data || {}let allRegionData = {}features?.forEach(({properties: {name,center: [lon, lat],},}) => {name = name.replace('省', '').replace('市', '').replace('区', '').replace('县', '')allRegionData[name] = { lon, lat }},)let markersDict = {}warningSignalList.forEach(item => {let { headline, description, sender, sendtime, severity } = itemlet distressType = districtTypeList.find(name => headline?.includes(name))let level = warningLevelList.findIndex(val => val === severity)let regionName = ''if (sender.includes('县')) {regionName = sender.split('县')?.[0]} else if (sender.includes('区')) {regionName = sender.split('区')?.[0]} else if (sender.includes('市')) {regionName = sender.split('市')?.[0]} else if (sender.includes('省')) {regionName = sender.split('省')?.[0]}//由于没有行政区的数据，所以只能通过行政区名称来判断if (regionName) {let iconUrl = `/icons/warningIcon/${distressType}/${level}.png`let myIcon = L.icon({iconUrl: iconUrl,iconSize: [44 * 1.5, 36 * 1.5],iconAnchor: [22 * 1.5, 18 * 1.5],})//坐标let { lat, lon } = allRegionData[regionName]let marker = L.marker([lat, lon], { icon: myIcon })let markerIndex = markersDict?.[regionName]?.length - 1//提示框内容，保存到markersDict中marker.attributes = {...item,iconUrl,}//添加到图标集合中if (!markersDict?.[regionName]) {markersDict[regionName] = [marker]} else {markersDict[regionName]?.push(marker)}}})let markers = Object.entries(markersDict).map(([key, markerObjects]) => {let [markerObject] = markerObjectsmarkerObject.bindPopup(e => {//先重置popup内容warningSignalPopupRef.value.reset()//设置图标对象warningSignalPopupRef.value.targetMarker = markerObject//设置弹窗内容列表warningSignalPopupRef.value.popupContentList = markerObjects.map(({ attributes }) => attributes)//返回弹窗组件实例，这里是vue组件实例，所以需要用$el来获取domreturn warningSignalPopupRef.value.$el},{ maxWidth: 300 },).on('popupclose', () => {//关闭弹窗时，清除图标对象warningSignalPopupRef.value.markerIndex = 0})return markerObject})if (markers.length) {warningIconLayer = L.layerGroup(markers).addTo(window.wizMap.map)}})}getWarningSignalList()return {warningSignalList,getWarningSignalList,}
}

代码还有可以优化的地方，受数据条件的影响，获取marker坐标时只能通过json文件查询后填充。

四、效果