vue3中使用leaflet加载瓦片地图

最新推荐文章于 2025-10-17 14:22:26 发布

原创最新推荐文章于 2025-10-17 14:22:26 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #前端

在内网部署项目时，不能使用在线地图API，因此采用Leaflet.js库进行离线地图的展示。通过npm安装Leaflet及其contextmenu插件，全局引入并配置地图选项，包括右键菜单功能。地图瓦片使用自定义的服务器路径，需提前下载并在内网服务器上可用。

在项目中有时会在内网进行部署，这样就不能使用在线地图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}'是在线的瓦片地图源，在内网上使用需要下载瓦片地图放到服务器上。