高德地图图形绘制，切割。。。未完待续

项目中使用到的技术

使用的组件库Turf.js， @amap/amap-jsapi-loader

1.注册账号并申请Key

高德地图官网

2..vue文件中引入AMapLoader

import AMapLoader from '@amap/amap-jsapi-loader';

const props = defineProps({
  plugins: {
        type: Array,
        default: () => ['AMap.PolygonEditor', 'AMap.MouseTool'],
    },
})

AMapLoader.load({
        key: '你的KEY',
        version: '2.0',
        plugins: props.plugins,
    }).then(amap => {
        AMap = amap;
        map = new AMap.Map(uuid, {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: props.zoom, // 级别
            mapStyle: props.mapStyle, // 设置颜色底层
            center: props.center, // 中心点坐标
            viewMode: props.viewMode, // 使用3D视图
            ...props.parameters, // 剩余参数
        });
        drawRectangle = new AMap.MouseTool(map) // 多变形编辑工具
        polyEditor = new AMap.PolygonEditor(map) // 鼠标绘制工具
        cuttingLine = new AMap.MouseTool(map)// 绘制切割图形
    })
    
<div class="map-content" :id="uuid"></div>

3.绘制多边形

编辑矢量图形

鼠标工具 MouseTool

鼠标工具可以绘制多种多图形 以多变形为例

drawPolygonFn

drawRectangle