Vue3中如何借助leaflet-contextmenu为Leaflet地图添加自定义右键菜单？

步骤1：确认依赖安装 #

确保已正确安装所需依赖：

npm install leaflet@1.9.4 @vue-leaflet/vue-leaflet@0.10.1 leaflet-contextmenu@1.4.0

步骤2：修改组件代码 #

需要引入leaflet-contextmenu的依赖，并通过地图实例配置右键菜单，完整代码如下：

<template>
    <div class="map">
        <l-map ref="map" v-model:zoom="zoom" :center="[49.2265592, 16.5957531]">
            <l-tile-layer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                layer-type="base"
                name="OpenStreetMap"
            ></l-tile-layer>
        </l-map>
    </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
// 引入leaflet-contextmenu的样式文件
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import L from 'leaflet';
import "leaflet-contextmenu";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { ref, onMounted } from 'vue';

export default {
    components: {
        LMap,
        LTileLayer,
    },
    setup() {
        const zoom = 13;
        const map = ref(null);

        onMounted(() => {
            // 获取原生Leaflet地图实例
            const leafletMap = map.value.mapObject;
            
            // 启用右键菜单并配置菜单项
            leafletMap.contextmenu.enable();
            leafletMap.contextmenu.addItems([
                {
                    text: 'Show coordinates',
                    callback: (e) => {
                        // 右键点击回调，e包含点击坐标信息
                        alert(`Coordinates: ${e.latlng.lat}, ${e.latlng.lng}`);
                    }
                },
                // 可添加更多自定义菜单项
                {
                    text: 'Zoom in',
                    callback: () => {
                        leafletMap.setZoom(leafletMap.getZoom() + 1);
                    }
                }
            ]);
        });

        return {
            zoom,
            map
        };
    },
};
</script>

关键说明 #

• 依赖引入：必须引入leaflet-contextmenu的CSS文件，否则右键菜单样式会失效；
• 地图实例获取：@vue-leaflet/vue-leaflet的LMap组件通过ref获取后，其mapObject属性对应原生Leaflet地图实例，所有Leaflet原生API都可通过该实例调用；
• 菜单配置：
  • 用contextmenu.enable()开启右键菜单功能；
  • 通过contextmenu.addItems()添加菜单项，支持text（显示文本）、callback（点击回调）、icon（菜单图标）等参数；
  • 回调函数的e参数包含右键点击的坐标（e.latlng）等信息，可用于业务逻辑处理；
• Options API 兼容写法：如果使用Vue 3 Options API，可将逻辑放在mounted钩子中：

export default {
    components: { LMap, LTileLayer },
    data() {
        return { zoom: 13 };
    },
    mounted() {
        const leafletMap = this.$refs.map.mapObject;
        leafletMap.contextmenu.enable();
        leafletMap.contextmenu.addItems([
            {
                text: 'Show coordinates',
                callback: (e) => {
                    alert(`Coordinates: ${e.latlng.lat}, ${e.latlng.lng}`);
                }
            }
        ]);
    }
};

注意事项 #

• 不要直接修改L.map全局配置，我们需要操作的是已初始化的具体地图实例，而非Leaflet构造函数；
• 必须在组件挂载完成后（mounted/onMounted）再操作地图实例，否则会因地图未初始化报错。

内容的提问来源于stack exchange，提问作者DaBler