高德地图JS API 2.0绘制编辑多个矢量图形（圆形和多边形）

1650880115625

官网地址：JS API 2.0 示例中心

功能：1.可选择绘制类型（圆形或多边形），2.可选择不同区域并随当前区域自适应地图缩放。 3.编辑图形时可根据大小自适应地图缩放。

默认初始矢量图：1.圆形：根据中心点位置，半径1公里圆。2、多边形矢量图默认生成正方形。根据中心点位置，计算生成1公里四个方位的位置。
代码如下：

<template>
  <div>
    <div id="container">
      <div class="region_list">
        <div class="region-list-bg">
          <div
            v-for="(item, i) in mapListSetting"
            :key="i"
            :class="[
              'region-list_block',
              'boxCardBlock',
              item.selected ? 'activeListBlock' : '',
            ]"
            @click="selectDelivery(i)"
          >
            <div v-if="mapListSetting.length != 1">
              <a class="close-modal-sub closeSmall" v-on:click.stop="RemoveItem(i)">
                ×
              </a>
            </div>
            <div class="displayRow alignItemsCenter jscontentbet mb10">
              <label
                class="block-label"
                :style="{ borderColor: item.colorStyle }"
              >
                <span
                  class="block-label_span"
                  :style="{ background: item.colorStyle, opacity: 0.2 }"
                ></span>
              </label>
              <el-input
                v-model="item.name"
                clearable
                placeholder="请输入内容"
                style="width: 150px"
              />
            </div>
            <div class="displayRow alignItemsCenter jscontentbet mb10">
              <label class="region-list_block-label">起送价：</label>
              <el-input
                v-model="item.minPriceout"
                placeholder="00.00"
                style="width: 110px"
                @blur="regExpChange(item.minPriceout,'minPriceout',i)"
                oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
              >
                <template slot="prepend">￥</template>
              </el-input>
            </div>
            <div class="displayRow alignItemsCenter jscontentbet" v-show="compute_type!='2'">
              <label class="region-list_block-label">配送费：</label>
              <el-input
                v-model="item.pscost"
                placeholder="00.00"
                style="width: 110px"
                @blur="regExpChange(item.pscost,'pscost',i)"
                oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
              >
                <template slot="prepend">￥</template>
              </el-input>
            </div>
            <div class="region-list_block-arrow">
            </div>
          </div>
          <div class="addPsqy" v-if="mapListSetting.length <= 10">
            <button
              class="region-list_add"
              type="button"
              @click="addOpenPoly()"
            >
              添加配送区域
            </button>
          </div>
        </div>
      </div>
      <div class="region_type">
        <div class="region_type_contain">
          <div class="region-type_row displayRow alignItemsCenter">
            <label class="region-type_label">配送区域：</label>
            <div class="mr20">
              <el-radio v-model="drawtype" label="0" @change="selectedTypeRadio">
                按半径框选
              </el-radio>
              <el-radio v-model="drawtype" label="1" @change="selectedTypeRadio">
                自定义框选
              </el-radio>
            </div>
            <div class="ml20">
              <label class="region-type_label">半径距离：</label>
              <div class="region-type_custom" v-if="drawtype=='1'">
                区域内
              </div>
              <span v-if="drawtype=='0'">
                <el-input  v-model="circleArea"  style="width: 70px"  @change="changeCircleArea"/>
                公里内
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="fullscreen" @click="clickFun">
        <vab-icon :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" style="font-size:20px"/>
      </div>
      
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import screenfull from 'screenfull'

export default {
   
  name: 'MapEdit',
  props: {
   
    //引用组件页面传来的值
    areas: {
   
      type: Array,
      default: function () {
   
        return []
      },
    },
    //中心点
    center: {
   
      type: Array,
      default: function () {
   
        return [116.403322, 39.920255]
      },
    },
    //绘制类型
    compute_type: {
   
      type: String,
      default: function () {
   
        return "2"
      },
    }
  },
  data() {
   
    return {
   
      isFullscreen:false,
      polyEditor: null,  //当前编辑的矢量图
      polygonPaths: [],  //编辑后的多边形对象
      map: null,   //初始化地图
      polygons: [],  //绘制的矢量图数组

      mapListIndex:0, //当前选择的区域index
      mapListSetting: [
        {
   
          name: '', //区域名称
          minPriceout: '0.00', //起送价
          pscost: '0.00',  //配送费
          selected: true,
          locations_object: [],
          colorStyle: '#1791fc',
          area_type:'1', //配送范围类型 0按半径 1自定义范围
          inkm