（一）leaflet+vue3基础，实现多地图切换，以及标记功能

<script setup>

import L from 'leaflet'

import 'leaflet/dist/leaflet.css'

import { onMounted } from 'vue'

import 'leaflet.chinatmsproviders'



//初始化地图

const initMap = () => {

  const mapKey = '你的天地图秘钥'

  // Define different tile layers for map display

  // TianDiTu normal and satellite map layers

  const normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {

      key: mapKey

    }),

    normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {

      key: mapKey

    }),

    imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {

      key: mapKey

    }),

    imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {

      key: mapKey

    })

  // Geoq normal layers

  const normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {})

  const normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {})

  const normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {})

  const normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {})

  const normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {})

  const normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {})



  // Google map layers

  const normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {})

  const satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {})



  // GaoDe map layers

  const Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {})

  const Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {})

  const Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {})

  const Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])



  // Create base layers with different tile layers

  const baseLayers = {

    智图地图: normalm1,

    智图多彩: normalm2,

    智图午夜蓝: normalm3,

    智图灰色: normalm4,

    智图暖色: normalm5,

    智图冷色: normalm6,

    天地图: L.layerGroup([normalm, normala]),

    天地图影像: L.layerGroup([imgm, imga]),

    谷歌地图: normalMap,

    谷歌影像: satelliteMap,

    高德地图: Gaode,

    高德影像: Gaodimage

  }



  // Initialize the map

  const map = L.map('map', {

    crs: L.CRS.EPSG3857,

    center: [30.6075, 104.1454],

    zoom: 12,

    maxZoom: 18,

    minZoom: 5,

    layers: [normalm1],

    zoomControl: false

  })



  // Add control layers and zoom control to the map

  L.control.layers(baseLayers, null).addTo(map)

  L.control

    .zoom({

      position: 'topleft',

      zoomInText: '大',

      zoomOutText: '小',

      zoomInTitle: '放大',

      zoomOutTitle: '缩小'

    })

    .addTo(map)



  // 创建自定义添加标记控件类

  L.Control.makeMarker = L.Control.extend({

    options: {

      position: 'topleft'

    },

    onAdd: function (map) {

      // 创建一个 DOM 元素作为控件容器

      const container = L.DomUtil.create(

        'div',

        'leaflet-bar leaflet-control leaflet-control-custom'

      )

      const button = L.DomUtil.create(

        'a',

        'leaflet-bar-part leaflet-bar-part-single',

        container

      )

      button.href = '#'

      button.title = '添加标点'

      button.innerHTML = '标记'

      // 绑定点击事件来执行你的逻辑

      L.DomEvent.on(button, 'click', function (e) {

        //改变鼠标箭头样式

        L.DomUtil.addClass(map._container, 'leaflet-cursor-pointer')

        L.DomEvent.stopPropagation(e) //阻止事件冒泡

        // L.DomEvent.preventDefault(e) //阻止默认行为的样式为pointer



        // 添加标记

        map.on('click', function (e) {

          const latlng = e.latlng

          // console.log(latlng.lat, latlng.lng)

          const marker = L.marker([latlng.lat, latlng.lng]).addTo(map)

          const popup = L.popup()

            .setLatLng([latlng.lat + 0.005, latlng.lng])

            .setContent(

              `当前坐标：${latlng.lat.toFixed(4)}, ${latlng.lng.toFixed(4)}`

            )

            .openOn(map)

          marker.on('click', () => {

            popup.openOn(map)

          })

        })

      })

      return container

    }

  })

  //创建自定义控件实例marker控件

  L.control.makeMarker = function (options) {

    return new L.Control.makeMarker(options)

  }

  //添加创建marker控件到地图

  L.control.makeMarker({}).addTo(map)



  //添加自定义控件，实现关闭marker功能

  L.Control.closeMarker = L.Control.extend({

    options: {

      position: 'topleft'

    },

    onAdd: function (map) {

      const container = L.DomUtil.create(

        'div',

        'leaflet-bar leaflet-control leaflet-control-custom'

      )

      const button = L.DomUtil.create(

        'a',

        'leaflet-bar-part leaflet-bar-part-single',

        container

      )

      button.href = '#'

      button.title = '关闭标点'

      button.innerHTML = 'X'

      L.DomEvent.on(button, 'click', function (e) {

        //改回鼠标样式

        L.DomUtil.removeClass(map._container, 'leaflet-cursor-pointer')

        //关闭marker功能

        map.off('click')

        //阻止事件冒泡

        e.stopPropagation()

        map.eachLayer(function (layer) {

          if (layer instanceof L.Marker) {

            map.removeLayer(layer)

          }

        })

      })

      return container

    }

  })

  //创建关闭marker控件

  L.control.closeMarker = function (options) {

    return new L.Control.closeMarker(options)

  }

  //添加关闭marker控件到地图

  L.control.closeMarker({}).addTo(map)

}



// 当组件挂载时调用initMap函数

onMounted(() => {

  initMap()

})

</script>



<template>

  <div>

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

  </div>

</template>



<style>

#map {

  height: 96vh;

  padding: 0;

  margin: 0;

  /* border: 10px solid pink; */

  display: flex;

}

.leaflet-cursor-pointer {

  cursor: pointer;

  /* cursor:url('../images/myCursor.png'), auto} */

}

</style>