526互联

vue3使用高德地图进行多边形的绘制，编辑以及创建

发布时间 2023-10-17 14:47:33作者: 小万子呀

npm i @amap/amap-jsapi-loader --save

<!-- 高德地图 -->
<template>
  <div style="display: flex;">
    <div id="container" style="width: 800px; height: 500px; border: 1px solid red;"></div>
    <div class="input-card" style="width: 200px">
      <h4 style="margin-bottom: 10px; font-weight: 600">利用mouseTool绘制和编辑多边形</h4>
      <button class="btn" @click="drawPolygon" style="margin-bottom: 5px">绘制多边形</button>
      <button class="btn" @click="getPolygon" style="margin-bottom: 5px">获取多边形</button>
      <button class="btn" @click="createPolygon" style="margin-bottom: 5px">创建多边形</button>
      <button class="btn" @click="editorPolygon" style="margin-bottom: 5px">编辑多边形</button>
      <button class="btn" @click="saveEditedPolygon" style="margin-bottom: 5px" :disabled="!editMode">保存编辑</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'

const map = shallowRef(null)
const mouseTool = shallowRef(null)
const polyEditor = shallowRef(null)
const path = ref([
  [105.522044, 37.045952],
  [105.559123, 37.028686],
  [105.497668, 37.024575],
  [105.495265, 37.051158]
])

const polygonOverlay = shallowRef(null)
const editMode = ref(false)

onMounted(() => {
  setTimeout(() => {
    mapInit()
  }, 10)
})

const mapInit = () => {
  AMapLoader.load({
    key: "you key",
    version: "2.0",
    plugins: [],
  }).then((AMap) => {
    map.value = new AMap.Map("container", {
      viewMode: "3D",
      zoom: 12,
      center: [105.602725, 37.076636],
    })

    AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.HawkEye', 'AMap.MapType', 'AMap.MouseTool','AMap.PolyEditor'], function () {
      const scale = new AMap.Scale()
      map.value.addControl(scale)
      map.value.addControl(new AMap.ToolBar())
      map.value.addControl(new AMap.HawkEye())
      map.value.addControl(new AMap.MapType())
    })

    mouseTool.value = new AMap.MouseTool(map.value)
    map.value.on('click', function (ev) {
      // 地图点击事件
    })
  }).catch(e => {
    console.log(e)
  })

}

// 绘制多边形
const drawPolygon = () => {
  if (mouseTool.value) {
    mouseTool.value.polygon({
      strokeColor: "#000",
      strokeOpacity: 1,
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: '#1791fc',
      fillOpacity: 0.1,
      strokeStyle: "solid",
    })
    mouseTool.value.on('draw', function (event) {
      // 获取绘制的覆盖物
      polygonOverlay.value = event.obj
    })
  }
}

// 获取绘制的多边形
const getPolygon = () => {
  if (polygonOverlay.value) {
    // 在控制台中查看多边形的路径坐标
    console.log("多边形路径坐标:", polygonOverlay.value.getPath())
  }
}

// 创建多边形
const createPolygon = () => {
  var polygon = new AMap.Polygon({
    path: path.value,
    // strokeColor: "#FF33FF",
    // strokeWeight: 1,
    // strokeOpacity: 0.2,
    // fillOpacity: 0.4,
    // fillColor: '#1791fc',
    zIndex: 50,
    bubble: true,
  })
  map.value.add([polygon])
  polygonOverlay.value = polygon
}

// 多边形编辑
const editorPolygon = () => {
  if (polygonOverlay.value) {
    console.log(polygonOverlay.value);
    if (!polyEditor.value) {
      // 创建多边形编辑工具
      polyEditor.value = new AMap.PolyEditor(map.value, polygonOverlay.value)
    }
    // 进入编辑模式
    polyEditor.value.open()
    editMode.value = true
  }
}

// 保存编辑后的多边形
const saveEditedPolygon = () => {
  if (editMode.value && polyEditor.value) {
    // 退出编辑模式
    polyEditor.value.close()
    editMode.value = false
  }
}
</script>