@vuemap/vue-amap高德vue组件库常用技巧（七）- 电子围栏

@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库，支持vue2、vue3版本。首页地址：https://vue-amap.guyixi.cn/

在上一个分享中，主要讲解了如何在地图上展示点的聚合方式。这一次主要讲解怎么基于地图组件实现矢量图形的绘制。

矢量图形绘制主要用于电子围栏等场景使用，在使用过程中我们一般需要绘制点、折线、圆、矩形、多边形。高德提供了一个功能丰富的插件AMap.MouseTool，组件库在该插件的基础上预置了很多功能，包含数据处理，鼠标tip提示等等。下面我们使用一个细致的示例来展示怎么通过el-amap-mouse-tool组件以及其他基础的点、线等组件实现电子围栏功能。

示例代码如下：

<template>
  <div class="map-page-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
    >
      <el-amap-layer-satellite />
      <el-amap-mouse-tool
        ref="mouseRef"
        v-if="created"
        :type="type"
        :auto-clear="true"
        @draw="draw"
      />
      <el-amap-marker v-if="markerPosition" v-model:position="markerPosition" :draggable="true"></el-amap-marker>
      <el-amap-circle v-if="circle.center" v-model:center="circle.center" v-model:radius="circle.radius" :editable="true"></el-amap-circle>
      <el-amap-polyline v-if="polylinePath.length >= 2" v-model:path="polylinePath" :editable="true"></el-amap-polyline>
      <el-amap-rectangle v-if="rectanglePath" v-model:bounds="rectanglePath" :editable="true"></el-amap-rectangle>
      <el-amap-polygon v-if="polygonPath.length >= 3" v-model:path="polygonPath" :editable="true"></el-amap-polygon>
    </el-amap>
  </div>
  <div class="toolbar">
    <button @click="created = !created">
      {{ created ? '销毁' : '创建' }}
    </button>
    <button @click="changeType('marker')">
      绘制标号
    </button>
    <button @click="changeType('circle')">
      绘制圆
    </button>
    <button @click="changeType('rectangle')">
      绘制矩形
    </button>
    <button @click="changeType('polyline')">
      绘制线
    </button>
    <button @click="changeType('polygon')">
      绘制面
    </button>
    <button @click="changeType('measureArea')">
      计算面积
    </button>
    <button @click="changeType('rule')">
      计算距离
    </button>
    <button @click="changeType('rectZoomIn')">
      框选放大地图
    </button>
    <button @click="changeType('rectZoomOut')">
      框选缩小地图
    </button>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap,ElAmapLayerSatellite, ElAmapMouseTool, ElAmapMarker, ElAmapCircle, ElAmapPolygon, ElAmapPolyline, ElAmapRectangle} from "@vuemap/vue-amap";

const center = ref([121.5273285, 31.21515044]);
const zoom = ref(16);
const type = ref('marker');
const created = ref(true);

const mouseRef = ref()

const markerPosition = ref()

const circle = ref({
  center: undefined,
  radius: 0
})

const polylinePath = ref([])

const rectanglePath = ref()

const polygonPath = ref([])

const draw = (e, target) => {
  console.log('绘制完成 : ', e, target)
  if(type.value === 'marker'){
    markerPosition.value = e;
  }else if(type.value === 'circle'){
    circle.value = e;
  }else if(type.value === 'polyline'){
    polylinePath.value = e;
  }else if(type.value === 'rectangle'){
    rectanglePath.value = e;
  }else if(type.value === 'polygon'){
    polygonPath.value = e;
  }
  mouseRef.value?.$$close();
}
const changeType = (newType: string) => {
  type.value = newType;
  mouseRef.value?.$$open()
}

</script>

<style scoped>
</style>

效果图：

在示例中我们看出整个矢量图形的绘制中基本没有方法的操作，通过vue提供的双向绑定功能，将整个绘制过程调整为对数据的控制，在对el-amap-mouse-tool组件的设计过程中，通过对draw事件的处理，将原本繁琐的原生对象，调整为简单的数据结构，同时对现有的矢量图形组件改造，将他们的核心属性类如 position、center、path等调整为支持v-model的双向绑定属性，可以简单快捷的进行图形编辑，实现数据的所见即所得效果。