第 8 节：距离测量（测距工具）

第 8 节：距离测量（测距工具）

功能：

1. 增加【开始测距】、【清除测量】按钮
2. 单击地图添加测点，实时显示两点之间距离、总长度
3. 双击结束本次测距，保留测量线段与标记点
4. 全部使用天地图 V4 原生 API，规避 V3 废弃接口

<template>
  <div class="map-page">
    <h2>第8节：距离测量（测距工具）【V4修复】</h2>
    <div style="margin-bottom:8px;">
      <span>操作：点击开始测距，单击地图添加测点，双击结束测距</span>
      <button style="margin-left:20px;" @click="startMeasure">开始测距</button>
      <button style="margin-left:8px;" @click="clearMeasure">清除测量</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 measurePoints = []
let measurePolyline = null
let markerList = []
let isMeasuring = false

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 (!isMeasuring) return
    if (!e || !e.lnglat) return
    const lnglat = e.lnglat
    measurePoints.push(lnglat)

    // 添加点位Marker
    const marker = new T.Marker(lnglat)
    map.addOverLay(marker)
    markerList.push(marker)

    // 更新测距线
    if (measurePolyline) {
      map.removeOverLay(measurePolyline)
    }
    measurePolyline = new T.Polyline(measurePoints, {
      color: '#22aa22',
      weight:3
    })
    map.addOverLay(measurePolyline)
  })

  // 双击结束测距
  map.on('dblclick', () => {
    if (!isMeasuring) return
    if(measurePoints.length < 2) {
      alert("至少2个点才能测量距离！")
      return
    }
    isMeasuring = false
    // ✅ V4 正确：map.getDistance(点1,点2)
    let totalDist = 0
    for(let i=0; i<measurePoints.length -1; i++){
      totalDist += map.getDistance(measurePoints[i], measurePoints[i+1])
    }
    alert(`测距完成，总长度：${totalDist.toFixed(2)} 米`)
    console.log("测距点", measurePoints, "总距离(米)", totalDist)
  })
}

// 开启测距
const startMeasure = () => {
  clearMeasure()
  isMeasuring = true
  alert("已开启测距，点击地图添加测点，双击结束")
}

// 清空测量
const clearMeasure = () => {
  if(measurePolyline){
    map.removeOverLay(measurePolyline)
    measurePolyline = null
  }
  markerList.forEach(m => map.removeOverLay(m))
  markerList = []
  measurePoints = []
  isMeasuring = false
}

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

onUnmounted(() => {
  if(map){
    clearMeasure()
    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>

操作说明

1. 点击【开始测距】进入测量模式
2. 在地图单击添加测点，绿色线段连接各个点位
3. 至少 2 个测点，双击地图结束测距，弹窗展示总距离（单位米）
4. 【清除测量】一键删除所有测距线和测点标记，退出测量状态