基于leaflet 的高德离线地图/瓦片地图，以及简单的自定义样式、限制可视范围、右键菜单

预览效果

前期准备

• leaflet中文网，下载css和js，我这里还用到两个插件，一个是用来改颜色，一个是右键菜单
• 什么是瓦片地图？简而言之就是一堆图片组合，所以可以使用css对图片的操作
• 瓦片地图下载： https://blog.csdn.net/m0_37942304/article/details/131434276
• 其实也可以用原生的高德地图api离线版，不过很难弄到，操作也很有限

<!-- 离线地图 -->
  <link rel="stylesheet" href="./leaflet/leaflet.css" />
  <!-- 右键菜单插件 -->
  <link rel="stylesheet" href="./leaflet/leaflet.contextmenu.min.css" />
  <script src="./leaflet/leaflet.js"></script>
  <script src="./leaflet/leaflet-tilelayer-colorizr.js"></script>

具体代码

注意事项

• 不清楚leaflet的具体实现，直接使用路径存在一定问题，只能用导入图片的方式，并且nextTick也是必须的

import greenCir from '@/assets/gif/breath_green.gif'
import red1 from '@/assets/gif/breath_red.gif'


async initMap() {
      // 如果要海量点参考： https://blog.csdn.net/qq_36947128/article/details/106418080
      // this.loading = true
      // 初始化地图
      this.$nextTick(() => {
        // 第一种设置方式，可行
        //四个参数分别对应 下 、 左 、 上 、 右
        var corner1 = L.latLng(0, 60) //设置左上角经纬度
        var corner2 = L.latLng(55, 140) //设置右下点经纬度
        var bounds = L.latLngBounds(corner1, corner2) //构建视图限制范

        // this.map = L.map('map').setView([40.02404009136253, 116.50641060224784], 4)
        this.map = L.map('map', {
          center: [40.02404009136253, 116.50641060224784],
          zoom: 4,
          zoomControl: false, // + -号放大缩小
          attributionControl: false, // 右下角leaflet.js图标
          maxBounds: bounds,
        })

        // 这里的图片少下几个层级作为调试用，然后使用你服务器的地址，使用网络资源加载
        // ./map_zxy/{z}/{x}/{y}.png
        L.tileLayer
          .colorizr('/map/{z}/{x}/{y}.png', {
            minZoom: 4,
            maxZoom: 13, //13
            attribution: '<b style="color:#40a9ff">高德地图</b>', //版权信息
            colorize: function (pixel) {
              // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
              const { r, g, b } = pixel
              // 判断是否海洋
              if ((r == 163, g == 204, b == 255)) {
                pixel.r = 252
                pixel.g = 209
                pixel.b = 150
              }
              return pixel
            },
          })
          .addTo(this.map)
        this.map
          .on('contextmenu', (e) => {
            //右键
            this.map.setView([104.1017375, 30.3809537], 4)
          })
          .on('click', () => {
            console.log('info', this.info)
            this.info = ''
          })

        this.drawCircle()
      })
    },

    // 画点
    drawCircle() {
      this.layerGroup?.clearLayers()
      // 创建 AMap.Icon 实例：
      const greenIcon = L.icon({
        iconUrl: greenCir,
        iconSize: [25, 25],
      })
      const redIcon = L.icon({
        iconUrl: red1, // Icon的图像
        iconSize: [25, 25], // 根据所设置的大小拉伸或压缩图片
      })

      // 用请求动画帧分批加载
      console.log('点数据', this.data)
      this.markers = []
      this.data[0].forEach((item) => {
        if (item.position?.length !== 2) return
        console.log('点位置', item.position)
        let icon
        if (item.alarm_device_list.length) {
          icon = redIcon
        } else {
          icon = greenIcon
        }

        // 将高德的国测坐标系gcj02 转换为 国际坐标系wgs84 以防止偏差  ---好像完全不需要，留着以防万一
        // console.log('转换前的经纬度', item.position)
        // item.position = coordtransform.gcj02towgs84(item.position[0], item.position[1])
        // console.log('转换后的经纬度', item.position)
        const marker = L.marker(
          {
            lng: item.position[0], //经度
            lat: item.position[1], //纬度
          },
          {
            icon: icon,
            title: item.name,
          }
        )
        marker.on('click', () => {
          this.info = item.name + '告警数量：' + item.alarm_device_list.length
          this.map.setView(
            {
              lng: item.position[0],
              lat: item.position[1],
            },
            13
          )
        })
        marker.on('contextmenu', (e) => {
          // e.originEvent.preventDefault()
          const timer = setTimeout(() => {
            if (item.alarm_device_list.length) {
              this.$router.push('/device/' + item.alarm_device_list[0])
            } else {
              this.$router.push('/device/' + item.device_list[0])
            }
            clearTimeout(timer)
          }, 100)
        })
        this.markers.push(marker)
      })

      this.layerGroup = L.layerGroup(this.markers)
      this.map.addLayer(this.layerGroup)
    },

• 改变样式主要是通过前面插件对rgb的修改和这里的filter过滤

.leaflet-zoom-animated img {
  /*  filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important; */
  /* 设置： invert：翻转颜色  saturate：饱和度  brightness：亮度 */
  -webkit-filter:invert(1) saturate(0.4) brightness(1.6) !important;
  -moz-filter:invert(1) saturate(0.4) brightness(1.6) !important;
  filter: invert(1) saturate(0.4) brightness(1.6) !important;
}