在项目中有时会在内网进行部署,这样就不能使用在线地图api,所以就要使用离线地图来满足需求。在这里我们使用leftlet.js库。
首先使用npm进行安装 指令 npm install leaflet --save
找到项目的main.js文件引入并全局注册,也可以在需要使用的vue页面单独引入,由于我的项目在多个页面都有使用到,全局引入更方便些,小伙伴们可以根据需求自行选择。
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
app.config.globalProperties.L = L
我的项目中有右键菜单的需求,有需要的可以引入以下两个文件,在引入之前需要npm先安装,指令 npm install leaflet-contextmenu --save
import 'leaflet-contextmenu/dist/leaflet.contextmenu.css'
import 'leaflet-contextmenu/dist/leaflet.contextmenu'
在需要使用的页面粘贴以下代码
<template>
<div id="offLine"></div>
</template>
<script setup>
import { onMounted, nextTick } from 'vue'
let map = null
const initMap = ()=>{
map = L.map('offLine', {
minZoom: 1,
maxZoom: 18,
contextmenu: true,//是否开启右键菜单
contextmenuItems: [
{
text: '右键菜单',
icon: icon1,
callback: (event) => {
menuClick(1)
},
},
],
}).setView(centerPoint, level)
L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)
}
onMounted(() => {
nextTick(() => {
initMap()
})
})
<script>
这样就可以在页面上看到加载完成的瓦片地图了,注意这里的'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'是在线的瓦片地图源,在内网上使用需要下载瓦片地图放到服务器上 。