一、安装leaflet依赖包

1、终端执行 pnpm i leaflet 

安装成功后package.json中会增加leaflet

2、全局引入leaflet

在main.js中引入leaflet

注意：同时需要引入leaflet.css文件

3、挂载至vue实例

将leaflet挂载到vue实例上，同时需要配置leaflet.icon

二、实现leaflet加载地图

1、地图组件引入leaflet

2、创建地图容器

3、初始化地图对象

 L.map("map", {

        crs: L.CRS.EPSG4326,

        center: [34.26, 108.96],

        zoom: 4,

        maxZoom: 18, //最大缩放层级

        minZoom: 1, //最小缩放层级

        tileSize: 256, //切片大小

        attributionControl: false, // 移除右下角leaflet标识

        zoomControl: false, //禁用 + - 按钮

        maxBounds: bounds, //设置边界

        preferCanvas: true, //默认使用svg渲染，设置canvas渲染

        doubleClickZoom: false, //关闭双击缩放

        // dragging: false, //鼠标移动事件

      });

}

4、定义天地图图层

// 影像图

      const img = L.tileLayer(

        "http://t0.tianditu.gov.cn/img_c/wmts?tk=‘自己申请的天地图token’&layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",

        {

          crossOrigin: "anonymous",

          tileSize: 256,

          zoomOffset: 1,

          noWrap: true,

        }

      );

      // 影像注记

      const cia = L.tileLayer(

        "http://t0.tianditu.gov.cn/cia_c/wmts?tk=自己申请的天地图token&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",

        {

          crossOrigin: "anonymous",

          tileSize: 256,

          zoomOffset: 1,

          noWrap: true,

        }

      );

      // 矢量图

      const vec = L.tileLayer(

        "http://t0.tianditu.gov.cn/vec_c/wmts?tk=自己申请的天地图token&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",

        {

          crossOrigin: "anonymous",

          tileSize: 256,

          zoomOffset: 1,

          noWrap: true,

        }

      );

      // 矢量注记

      const cva = L.tileLayer(

        "http://t0.tianditu.gov.cn/cva_c/wmts?tk=自己申请的天地图token&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",

        {

          crossOrigin: "anonymous",

          tileSize: 256,

          zoomOffset: 1,

          noWrap: true,

        }

      );

5、图层控制切换影像矢量图层

const vector = L.layerGroup([vec, cva]);

const image = L.layerGroup([img, cia]);

const baseLayers = {

        矢量: vector,

        影像: image,

};

// 初始化显示矢量图层

this.map.addLayer(vector);

// 添加图层控件;

L.control.layers(baseLayers).addTo(this.map);

6、实时回显鼠标位置