Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单（Vue3）

效果

鼠标右键菜单

安装

插件地址：GitHub - aratcliffe/Leaflet.contextmenu: A context menu for Leaflet.

//yarn 
yarn add leaflet
yarn add  leaflet-contextmenu --save  //右键菜单插件
//npm
npm install leaflet
npm install leaflet-contextmenu --save  

代码

//html
 <div id="map" ref="map"></div>

//ts
import { ref, onMounted } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu";
import { Config } from "@/config";//项目底图，没有写在线api
let map = ref();
let myMap: any;

function addTf(e: any) {
  console.log(e);
}

const initDate = () => {
  myMap = L.map(map.value, {
    contextmenu: true,
    contextmenuWidth: 140,
  contextmenuItems: [
 {
    text: '显示坐标',
    callback: showCoordinates
 }, {
    text: '作为地图中心',
     callback: centerMap
  },  {
    text: '地图放大',
    icon: './icon/zoom-in.png',
    callback: zoomIn
  }, {
     text: '地图缩小',
     icon: './icon/zoom-out.png',
      callback: zoomOut
   }] 
 }).setView([31, 117], 13); // 初始化Leaflet地图并设置中心点和缩放级别
  L.tileLayer(Config.baseMap.url).addTo(myMap);
  //在线的瓦片地图源,"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",内网看不到
};
    function showCoordinates(e) {
      alert(e.latlng);
  }
     function centerMap(e) {
       map.panTo(e.latlng);
  }
     function zoomIn(e) {
        map.zoomIn();
   }
     function zoomOut(e) {
        map.zoomOut();
   }
onMounted(() => {
  initDate();
});

//scss
#map {
  width: 99%;
  height: calc(100vh - 305px);
}

划重点：Leaflet必须翻墙(代理)使用外网才能正常渲染使用