第 7 节：多边形点击弹窗 + 清空绘制按钮

功能：

保留上一节多点绘制多边形

点击绘制好的多边形区域弹出弹窗，展示多边形顶点信息

增加【清空绘制】按钮，一键清除所有图形、重置绘制状态
严格使用天地图 V4 原生 API，规避 V3 废弃接口

复制代码

<template>
  <div class="map-page">
    <h2>第7节：多边形点击弹窗 + 清空绘制按钮</h2>
    <div style="margin-bottom:8px;">
      <span>操作：单击地图添加顶点，双击完成闭合多边形；点击多边形查看信息</span>
      <button style="margin-left:20px;" @click="clearDraw">清空绘制</button>
    </div>
    <div id="map" class="map-container"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

const TDT_KEY = '替换成你的tk'
let map = null
let pointList = []
let polyline = null
let polygon = null

function loadTdtScript() {
  return new Promise((resolve, reject) => {
    if (window.T) {
      return resolve(window.T)
    }
    const script = document.createElement('script')
    script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TDT_KEY}`
    script.onload = () => resolve(window.T)
    script.onerror = err => reject(err)
    document.body.appendChild(script)
  })
}

async function initMap() {
  const T = await loadTdtScript()
  const mapDom = document.getElementById('map')
  if (mapDom.children.length > 0) return

  map = new T.Map('map')
  const center = new T.LngLat(116.404, 39.915)
  map.centerAndZoom(center, 10)
  map.enableScrollWheelZoom(true)

  // 缩放控件
  const zoomCtrl = new T.Control.Zoom({
    position: 'topright'
  })
  map.addControl(zoomCtrl)
  // 比例尺控件
  const scaleCtrl = new T.Control.Scale({
    position: 'topleft'
  })
  map.addControl(scaleCtrl)

  // 单击添加顶点
  map.on('click', (e) => {
    if (!e || !e.lnglat) return
    const lnglat = e.lnglat
    pointList.push(lnglat)

    if (polyline) {
      map.removeOverLay(polyline)
    }
    polyline = new T.Polyline(pointList, {
      color: '#ff4444',
      weight: 3
    })
    map.addOverLay(polyline)
  })

  // 双击闭合生成多边形
  map.on('dblclick', () => {
    if (pointList.length < 3) {
      alert('至少3个点才能构成多边形，请继续点击地图添加顶点')
      return
    }
    if (polyline) {
      map.removeOverLay(polyline)
      polyline = null
    }
    polygon = new T.Polygon(pointList, {
      color: '#0066ff',
      weight: 2,
      fillColor: 'rgba(0,102,255,0.3)'
    })
    map.addOverLay(polygon)

    // 多边形点击事件，弹出信息窗
    polygon.on('click', () => {
      // 格式化顶点字符串
      const pointStr = pointList.map(p => `[${p.lng.toFixed(6)},${p.lat.toFixed(6)}]`).join('<br/>')
      const winContent = `
        <div style="padding:6px;">
          <div><b>多边形信息</b></div>
          <div>顶点数量：${pointList.length}</div>
          <div>顶点坐标：<br/>${pointStr}</div>
        </div>
      `
      const infoWin = new T.InfoWindow(winContent)
      // 弹窗在多边形第一个顶点位置打开
      map.openInfoWindow(infoWin, pointList[0])
    })

    console.log('多边形顶点：', pointList)
    pointList = []
  })
}

// 清空绘制
const clearDraw = () => {
  if(polyline) {
    map.removeOverLay(polyline)
    polyline = null
  }
  if(polygon) {
    map.removeOverLay(polygon)
    polygon = null
  }
  pointList = []
  // 关闭打开的弹窗
  map.closeInfoWindow()
}

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

onUnmounted(() => {
  if(map){
    clearDraw()
    const dom = document.getElementById('map')
    dom.innerHTML = ''
    map = null
  }
})
</script>

<style scoped>
.map-page {
  padding: 20px;
}
.map-container {
  width: 100%;
  height: 600px;
  border:1px solid #ccc;
}
</style>

操作说明

单击地图添加顶点，红色折线实时预览
至少 3 个点，双击地图生成蓝色半透明多边形
点击多边形内部，弹出信息窗口，展示顶点数量与所有坐标
点击【清空绘制】：清除折线、多边形，关闭弹窗，重置绘制状态