@amap/amap-jsapi-loader 实现高德地图中添加多边围栏，并可编辑，编辑后获得围栏各个点的经纬度

先上一张效果图 看看是不是大家想要的效果～ ❤️
希望其中的小点能帮助大家，主要看怎么绘制在地图上的代码即可

1.第一步要加入项目package.json中或者直接yarn install它都可以
想必大家应该都会

 "@amap/amap-jsapi-loader": "0.0.7"

2.加入项目中

import React, {
    PureComponent } from 'react';
import {
    Radio, Checkbox, Input, Button, message as AntMessage } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import {
    services } from '@comall-backend-builder/core';
import './index.less';

const {
    api } = services;
type Geofence = {
   
    /**
     * 圆形围栏中心点,格式：longitude,latitude
     */
    center?: string;
    /**
     * 围栏名称
     */
    name: string;
    /**
     * 多边形围栏坐标点,格式:lon1,lat1;lon2,lat2;lon3,lat3
     */
    points: string;
    /**
     * 圆形围栏半径,单位：米。范围0~5000
     */
    radius?: number;
};
type GeofenceValue = {
   
    geofences: Array<Geofence>;
    scope: string;
    isEdit?: boolean;
};
const DEFAULTSCOPE = 'CUSTOM';
const DEFAULTNAME = '默认区域';
interface GeofencesProps {
   
    onChange: (data: GeofenceValue) => void;
    /**
     * 当前值
     */
    value: GeofenceValue;
    row: any;
}

interface GeofencesStates {
   
    /**
     * 当前地图实例
     */
    map: any;
    /**
     * 地图api
     */
    AMap: any;
    /**
     * 多边形对象集合
     */
    polygons: any;
    /**
     * 门店位置标记
     */
    marker: any;
    /**
     * 当前的门店维度
     */
    centerPosition: any;
    /**
     * 当前的门店名称
     */
    subsiteName: string;
}

export class Geofences extends PureComponent<GeofencesProps, GeofencesStates> {
   
    constructor(props: any) {
   
        super(props);

        this.state = {
   
            map: undefined,
            AMap: undefined,
            polygons: undefined,
            marker: undefined,
            centerPosition: undefined,
            subsiteName: '',
        };
    }

    componentDidMount() {
   
        this.initMap();
    }

    initMap = () => {
   
        api.get({
   }, {
    apiPath: '/admin/amap/config' }).then((result: any) => {
   
            AMapLoader.load({
   
                key: result.key, // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Marker', 'AMap.Polygon', 'AMap.PolyEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then((AMap: any) => {
   
                    let map = new AMap.Map('mapContainer', {
   
                        zoom: 13,
                    });
                    this.initSubsiteCenterPosition(AMap, map);
                    this.setState({
    AMap