Leaflet介绍及使用示例

一、Leaflet介绍

Leaflet是一个开源的JavaScript库，专门用于构建交互式的地图应用程序。它以其轻量级、高性能和易于使用的API而著称，方便开发者在网页中集成地图功能。Leaflet支持多种地图提供商的瓦片图层，如OpenStreetMap、Mapbox等，并允许用户自定义地图样式和交互功能。此外，Leaflet还提供了丰富的向量图层类型，如点、线、多边形等，以及标记和弹出窗口等功能，使得开发者能够轻松地在地图上展示和操作地理数据。

二、Leaflet使用示例

1. 引入Leaflet库

import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import './eaflet.tilelayer.wmts.min'
import leafletMapUtil from '@/utils/leafletMap.js' --- 封装的地图工具方法

2. 创建地图容器

在HTML文件中添加一个具有特定id的div元素，用于展示地图：

<template>
    <div id="leaflet" class="map-container"></div>
</template>

3. 初始化地图

使用JavaScript代码初始化Leaflet地图对象，并设置地图容器、初始中心坐标和缩放级别：

 this.mapInstance = L.map(id, {
      minZoom: options.minZoom || 1,
      maxZoom: options.maxZoom || 20,
      center: options.center || center,
      zoom: options.zoom || zoom,
      zoomControl: options.zoomControl || false,
      attributionControl: false,
    })

4. 添加瓦片图层

使用Leaflet提供的L.tileLayer()方法创建一个瓦片图层对象，并将其添加到地图上：

/**
   * 添加图层
   * @param layerUrl 地图图层url
   * @param layerOption 图层配置项（zIndex, opacity等）
   * @param layerName 图层名称
   * @param layerType 图层类型 wmts或其他，发布的图层使用wmts
   */
  addLayer(layerUrl, layerName = '', layerOption = {}, layerType = '') {
    let layer = null
    if (layerType === 'WMTS') {
      layer = L.tileLayer.wmts(layerUrl, {
        tileMatrixSet: 'GoogleMapsCompatible_' + layerName,
        format: 'image/png',
        layer: layerName,
        ...layerOption,
      })
    } else {
      layer = L.tileLayer(layerUrl, layerOption)
    }

    layer.addTo(this.mapInstance)

    if (layerName) {
      this.layers[layerName] = layer
    }
    return layer
  },

5. 绘制标记

使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：

/**
   * 添加地图marker
   * @param lat
   * @param lng
   * @param icon
   * @param props
   * @param groupName
   * @param iconType
   * @returns {*|boolean}
   */
  addMarker(lat, lng, icon, props = {}, iconType = 'icon') {
    let icon_marker = null
    if (iconType === 'icon') {
      icon_marker = L.divIcon({
        iconSize: props.iconSize || [32, 38],
        className: 'icon_marker',
        html: `<img src="${icon}" style="width: 100%;height: 100%;"/>`,
      })
    } else if (iconType === 'html') {
      let defaultHtml = {
        className: 'icon_marker',
        html: '',
        iconSize: [20, 20],
      }
      if (typeof icon === 'object') {
        defaultHtml = { ...defaultHtml, ...icon }
        icon_marker = L.divIcon(defaultHtml)
      } else if (typeof icon === 'string') {
        defaultHtml.html = icon
        icon_marker = L.divIcon(defaultHtml)
      }
    }
    if (!icon_marker) {
      return
    }
    if (lat && lng) {
      const marker = L.marker([lat, lng], { icon: icon_marker, ...props })
      marker.addTo(this.mapInstance).on("click", (e) => {
        EventBus.$emit('triggerMarkerClick', e)
      });
      return marker
    } else {
      return null
    }
  },

6. 清除图层

使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：

  /**
   * 删除图层
   * @param layerName
   */
  removeLayer(layerName) {
    const layer = this.layers[layerName]
    if (layer) this.mapInstance.removeLayer(layer)
  },

7. 清除标记

使用Leaflet的L.marker()方法创建一个标记对象，然后将标记对象添加到地图上：

 /**
   * 删除marker
   * @param marker
   */
  removeMarker(marker) {
    if (marker) {
      marker.remove()
    }
  },

  /**
   * 删除markers markerlist或者markerGroupName
   * @param markers
   */
  removeMarkers(markers) {
    if (typeof markers === 'string') {
      if (this.markers[markers]) {
        this.markers[markers].forEach((marker) => {
          this.removeMarker(marker)
        })
      }
    } else {
      markers.forEach((marker) => {
        this.removeMarker(marker)
      })
    }
  },

三、Leaflet示例展示

通过以上步骤，您就可以创建一个简单的Leaflet地图应用程序，并在地图上展示一个标记。您可以根据需要进一步扩展和定制地图功能，如添加更多的向量图层、实现用户交互等。