使用 Leaflet 结合 Vue 3 实现任意经纬度框选及经纬度范围提取

在地图上实现任意经纬度框选：通过结合 Leaflet 与 Vue 3 实现区域经纬度范围提取功能，用户手动选择特定的区域并提取其起始经纬度。

效果预览

技术栈

• Vue 3
• leaflet
• leaflet-draw插件

核心功能

1. 地图初始化与框选操作

首先，我们需要使用 Leaflet 在地图上实现鼠标的框选操作。当用户按下鼠标左键时，地图的拖拽功能会被禁用，系统将开始记录鼠标拖动的起点。随着鼠标移动，矩形区域会动态更新，直到用户释放鼠标来确定区域的终点。因为我的地图在父组件中进行了初始化，所以我在onMounted中去监听地图事件。

onMounted(() => {
  // 鼠标按下事件，记录起点坐标
  map.on('mousedown', function (e) {
    map.dragging.disable() // 禁用地图拖动
    drawing.value = true // 开始绘制
    startLatLng.value = e.latlng // 获取起点经纬度
    clearRectangle() // 清除已有矩形
    rectangle.value = L.rectangle([startLatLng.value, startLatLng.value], { color: '#ff7800', weight: 1 }).addTo(map)
  })

  // 鼠标移动事件，更新矩形边界
  map.on('mousemove', function (e) {
    if (!drawing.value) return
    var currentLatLng = e.latlng
    var bounds = L.latLngBounds(startLatLng.value, currentLatLng)
    if (rectangle.value) {
      rectangle.value.setBounds(bounds)
    }
  })

  // 鼠标抬起事件，获取矩形顶点坐标
  map.on('mouseup', function () {
    drawing.value = false
    if (rectangle.value) {
      var bounds = rectangle.value.getBounds()
      const northWest = bounds.getNorthWest()
      const southEast = bounds.getSouthEast()
      startLon.value = northWest.lng.toFixed(2)
      endLon.value = southEast.lng.toFixed(2)
      startLat.value = southEast.lat.toFixed(2)
      endLat.value = northWest.lat.toFixed(2)
    }
  })
})

2. 清理与重置功能

为了确保每次框选新的区域时，不会和之前的结果混淆，组件中加入了清理功能，确保用户在新操作时能获得正确的坐标信息。在组件关闭时会进行清理，也可手动调用。

function clearRectangle() {
  if (rectangle.value) {
    map.removeLayer(rectangle.value)
    rectangle.value = null
  }
}
onBeforeUnmount(() => {
  clearRectangle()
  map.off('mousedown') // 停止监听鼠标按下事件
  map.dragging.enable() // 激活地图拖动
})

4. 表单与显示

在 UI 上，我们通过 Element Plus 组件展示经纬度输入框与按钮，用户可以直观地看到当前框选区域的起始与终止经纬度。

<template>
  <div>
    <span>按住鼠标左键框选范围，单击右键结束</span>
    <div>
      <div>起始经度：</div>
      <el-input v-model="startLon" /> ~ <el-input v-model="endLon"  />
    </div>
    <div>
      <div>起始纬度：</div>
      <el-input v-model="startLat"/> ~ <el-input v-model="endLat"  />
    </div>
  </div>
</template>

逻辑概述

1. 绘制矩形：通过鼠标按下事件，开始绘制矩形区域，松开鼠标时确定边界。
2. 提取经纬度：框选结束后，提取矩形的起点和终点经纬度。
3. 清理操作：每次操作前，清理之前的矩形，避免多次操作造成混淆。

结语

通过 Vue 3 与 Leaflet 的结合，我们可以方便地在地图上实现用户自定义区域的选择，并提取其经纬度数据。如果你也有类似的需求，本文提供了一个快速上手的实现方案，如果需要完整代码，可以下载文中资源。