高德地图绘图，点标记，并计算中心点

 

效果图

代码如下

/ 地图初始化
const map: any = ref(null)
const marker: any = ref(null)
const polyEditor: any = ref(null)
const view: any = ref(false)
const squareVertices: any = ref([])
const init = () => {
  workSpacesCurrent(workspaceId, {}).then((res) => {
    console.log('地图呢', res.data)
    map.value = new AMap.Map('container6', {
      center: [res.data.longitude, res.data.latitude],
      // center:
      //   ['118.622184', '32.096262'],
      layers: [
        // 卫星
        new AMap.TileLayer.Satellite(),
        // 路网
        new AMap.TileLayer.RoadNet(),
      ],
      zoom: 17, // 地图显示的缩放级别
      zooms: [0, 19], // 设置缩放级别范围为3至16
    })

    pointMark()
  })
}

// 点标记
function pointMark () {
  if (cameraId.value !== 0) {
    console.log('你是多少', cameraId.value)
    console.log('cameraLngInpt', cameraLngInpt.value)
    console.log('cameraLatInpt', cameraLatInpt.value)
    setTimeout(() => {
      marker.value = new AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [cameraLngInpt.value, cameraLatInpt.value],
      })
      map.value.add(marker.value)
    }, 5000)
  } else {
    if (squareVertices.value.length === 0) {
      map.value.on('click', (e) => {
        if (view.value) {
          polyEditor.value.close()
          polyEditor.value = null
          map.value.clearMap()
        }
        console.log('地图点击进来啦吗')
        console.log('e', e)
        marker.value = new AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: [e.lnglat.lng, e.lnglat.lat],
        })
        map.value.add(marker.value)
        // marker.value.setMap(map.value)
        console.log('地图点击点标记', marker.value)
        const cameralng = e.lnglat.lng
        const cameralat = e.lnglat.lat
        cameraLngInpt.value = cameralng
        cameraLatInpt.value = cameralat
        // 绘图
        drawMark(e)
      })
    } else {
      // centerPointFn()
    }
  }
}

// 绘图
function drawMark (e: any) {
  squareVertices.value = calculateSquareVertices(
    e.lnglat.lat,
    e.lnglat.lng,
    1000
  )
  console.log('squareVertices.value', squareVertices.value)
  markerQure()
}

// 监听绘图变化
const markerQure = () => {
  console.log('进来了没有地图渲染')
  console.log('squareVertices.value', squareVertices.value)
  if (view.value) {
    // polyEditor.value.close()
    // polyEditor.value = null
    // map.value.clearMap()
  }
  const path: any = []
  if (cameraId.value !== 0) {
    squareVertices.value.forEach((i) => {
      path.push([i[0], i[1]])
    })
  } else {
    squareVertices.value.forEach((i) => {
      path.push([i.lng, i.lat])
    })
  }
  console.log('path', path)
  const polygon = new AMap.Polygon({
    path: path,
    strokeColor: '#FF33FF',
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillOpacity: 0.4,
    fillColor: '#1791fc',
    zIndex: 50,
    bubble: true,
  })
  console.log('polygon', polygon)
  map.value.add([polygon])
  map.value.setFitView()
  centerPointFn()
  polyEditor.value = new AMap.PolygonEditor(map.value, polygon)
  polyEditor.value.addAdsorbPolygons([polygon])
  polyEditor.value.open()
  // 监听坐标点的变化
  polyEditor.value.on('addnode', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('这里有吗', squareVertices.value)
    clearMarker()
    setTimeout(() => {
      pointMark()
    }, 500)

    centerPointFn()
  })
  view.value = true
  // 监听拖动变化
  polyEditor.value.on('adjust', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('坐标参数', squareVertices.value)
    clearMarker()
    pointMark()
    centerPointFn()
  })
  polyEditor.value.on('removenode', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('坐标参数2', squareVertices.value)
    clearMarker()
    pointMark()
    centerPointFn()
  })
}

// 画图各个点标记
const calculateSquareVertices = (centerLat, centerLng, sideLength) => {
  // 将长度从米转换为经度差值
  const deltaLat = (sideLength / 111300) * 1.1
  const deltaLng =
    (sideLength / (111300 * Math.cos(centerLat * (Math.PI / 180)))) * 1.1

  const vertices = [
    { lat: centerLat + deltaLat, lng: centerLng - deltaLng }, // 右上角
    { lat: centerLat - deltaLat, lng: centerLng - deltaLng }, // 右下角
    { lat: centerLat - deltaLat, lng: centerLng + deltaLng }, // 左下角
    { lat: centerLat + deltaLat, lng: centerLng + deltaLng }, // 左上角
  ]

  return vertices
}


// 中心点坐标
function centerPointFn () {
  let sumLng = 0
  let sumLat = 0
  if (cameraId.value !== 0) {
    console.log('是否进来')
    for (let i = 0; i < squareVertices.value.length; i++) {
      sumLng += squareVertices.value[i][0]
      sumLat += squareVertices.value[i][1]
    }
  } else {
    for (let i = 0; i < squareVertices.value.length; i++) {
      sumLng += squareVertices.value[i].lng
      sumLat += squareVertices.value[i].lat
    }
  }

  const centerLng = sumLng / squareVertices.value.length
  const centerLat = sumLat / squareVertices.value.length
  // 创建多边形的中心点坐标对象
  const centerPoint = new AMap.LngLat(centerLng, centerLat)
  const centerPointInpp = [centerLng, centerLat]
  centerPointInpt.value = centerPointInpp.toString()
  addMarker(centerLng, centerLat)
  console.log('参数3', centerPointInpt.value)
  console.log(
    '多边形的中心点经度：' +
      centerPoint.getLng() +
      '，纬度：' +
      centerPoint.getLat()
  )

  // const marker = new AMap.Marker({
  //   icon: '/src/assets/center.png',
  //   position: [centerLng, centerLat],
  //   offset: new AMap.Pixel(-13, -30),
  // })
  // map.value.add(marker)
}


// 添加标记点
function addMarker (lng, lat) {
  if (marker.value) {
    console.log('添加点坐标更新')
    marker.value.setPosition([lng, lat]) // 更新点坐标
  } else {
    marker.value = new AMap.Marker({
      // icon: '/src/assets/center.png',
      map: map.value,
      position: [lng, lat],
      offset: new AMap.Pixel(-13, -30),
    })
  }
}

// 清除标记点
function clearMarker () {
  console.log('清除打点位置', marker.value)
  if (marker.value) {
    marker.value.setMap(null)
    marker.value = null
  }
}