Leaflet+Leaflet-Geoman绘制天地图

安装所需依赖

yarn add leaflet @geoman-io/leaflet-geoman-free

文档地址
https://leafletjs.cn/https://geoman.io/

<template>
  <div id="map"></div>
  <div class="handle">
    <button @click="drawMap">绘制区块</button>
    <button @click="cancelDrawMap">取消绘制</button>
    <button @click="editMap">编辑区块</button>
    <button @click="cancelEditMap">取消编辑区块</button>
    <button @click="deleteMap">删除区块</button>
    <button @click="cancelDeleteMap">取消删除区块</button>
    <button @click="getDrawData">获取区块数据</button>
  </div>

</template>
<script setup lang='ts'>
import { onMounted, ref, toRaw } from 'vue'
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import "@geoman-io/leaflet-geoman-free"
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"

const mapTk = import.meta.env.VITE_BASE_MAPTK

onMounted(() => {
  initMap()
})

const map = ref()
const initMap = () => {
  map.value = L.map('map', {
    center: [22.542800, 114.058000], //地图中心显示
    zoom: 16, //缩放等级
    minZoom: 3, // 最小缩放
    maxZoom: 18, // 最大缩放
    attributionControl: false, // 隐藏leaflet图标
    zoomControl: false, //隐藏缩放控件
    preferCanvas: true //使用canvas渲染，性能比svg更好
  })
  L.layerGroup([
    // 影像底图
    L.tileLayer(`http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${mapTk}`),
    // 地形注记
    L.tileLayer(`http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${mapTk}`),
  ]).addTo(map.value)

  requireMarker()
  requirePolygon()

  map.value.pm.setLang('zh')

  watchFunc()
}

// 绘制锚点
const requireMarker = () => {
  const arr = [
    { id: 1, marker: [22.542800, 114.058000] },
    { id: 2, marker: [22.54, 114.05] }
  ]
  const markerIcon = L.icon({
    iconUrl: '../src/assets/imgs/qf.png',
    iconSize: [40, 40]
  })
  for (let item of arr) {
    const marker = L.marker(item.marker as unknown as L.LatLngExpression, { icon: markerIcon }).addTo(map.value)
    L.Util.extend(marker, { params: { ...item } })
    marker.on('click', markerClick)
  }
}
const markerClick = (e: L.LeafletEvent) => {
  console.log(e.target.params)
}


// 绘制区块
const requirePolygon = () => {
  const arr = [
    {
      id: 1,
      polygon: [[22.548728, 114.061196], [22.546925, 114.059222], [22.540107, 114.064929], [22.546806, 114.068127], [22.548728, 114.061196]]
    },
    {
      id: 2,
      polygon: [[22.550096, 114.056904], [22.548986, 114.056818], [22.549937, 114.058599], [22.550096, 114.056904]]
    }
  ]
  for (let item of arr) {
    // 使用 toRaw 处理popup关闭后伸缩地图报错：Cannot read properties of null (reading '_latLngToNewLayerPoint')
    const polygon = new L.Polygon(item.polygon as unknown as L.LatLngExpression[][], { color: "#19a7d8" }).addTo(toRaw(map.value))
    L.Util.extend(polygon, { params: { ...item } }) //携带自定义参数
  }
}


const watchFunc = () => {
  map.value.on('pm:remove', (e: any) => {
    console.log("监听删除", e)
  })

  map.value.on('pm:create', (e: any) => {
    console.log("监听创建", e)
  })
}

const drawMap = () => {
  map.value.pm.enableDraw('Polygon', {
    allowSelfIntersection: false, //不允许自相交
  })
}

const cancelDrawMap = () => {
  map.value.pm.disableDraw()
}

const editMap = () => {
  map.value.pm.enableGlobalEditMode({ allowSelfIntersection: false })
}

const cancelEditMap = () => {
  map.value.pm.disableGlobalEditMode()
}

const deleteMap = () => {
  map.value.pm.enableGlobalRemovalMode()
}

const cancelDeleteMap = () => {
  map.value.pm.disableGlobalRemovalMode()
}

const getDrawData = () => {
  const newLayers = map.value.pm.getGeomanDrawLayers() //获取新绘制图层
  console.log(newLayers)
  const allLayers = map.value.pm.getGeomanLayers() // 获取所有的图层
  console.log(allLayers)
}
</script>
<style lang='scss' scoped>
#map {
  width: 100vw;
  height: 100vh;
}

.handle {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 401;
}
</style>