效果
鼠标右键菜单
安装
插件地址: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必须翻墙(代理)使用外网才能正常渲染使用