mapbox-gl的draw组件绘制图形，禁止拖拽、禁止编辑节点、禁止新增中心点

思路：

1、以mapbox绘制的多边形为例，如果需要禁止编辑，可以给绘制后的多边形加上特定属性，用于判断是否需要禁止编辑。

2、点击多边形时首先进入“simple_select”模式，再次点击多边形进入“direct_select”模式，此时可以编辑节点，可以新增两条线之间的中心点。定义draw组件时，重写direct_select模式和simple_select模式，根据多边形属性判断是否需要编辑。

定义drawzuji

import MapboxDraw from '@mapbox/mapbox-gl-draw'


const customDirectSelectMode = {
    ...MapboxDraw.modes.direct_select,
    type: 'customDirectSelectMode',
    onMidpoint: function (state, e) {
        const feature = state.feature
        // 当绘制的几何图形属性中disabledEdit为true时禁止新增中点
        if (feature.properties.disabledEdit) {
            return
        } else {
            this.startDragging(state, e)
            const about = e.featureTarget.properties
            state.feature.addCoordinate(
                about.coord_path,
                about.lng,
                about.lat,
            )
            this.fireUpdate()
            state.selectedCoordPaths = [about.coord_path]
        }
    },
    dragVertex: function (state, e, delta) {
        const feature = state.feature
        // 当绘制的几何图形属性中disabledEdit为true时禁止编辑节点
        if (feature.properties.disabledEdit) {
            return
        } else {
            const selectedCoords = state.selectedCoordPaths.map(
                (coord_path) => state.feature.getCoordinate(coord_path),
            )

            const selectedCoordPoints = selectedCoords.map((coords) => ({
                type: 'Feature',
                properties: {},
                geometry: {
                    type: 'Point',
                    coordinates: coords,
                },
            }))

            const constrainedDelta = constrainFeatureMovement(
                selectedCoordPoints,
                delta,
            )

            for (let i = 0; i < selectedCoords.length; i++) {
                const coord = selectedCoords[i]
                state.feature.updateCoordinate(
                    state.selectedCoordPaths[i],
                    coord[0] + constrainedDelta.lng,
                    coord[1] + constrainedDelta.lat,
                )
            }
        }
    },
    startDragging: function (state, e) {
        if (state.initialDragPanState == null) {
            state.initialDragPanState = this.map.dragPan.isEnabled()
        }
        this.map.dragPan.disable()
        // 当绘制的几何图形属性中disabledEdit为true时禁止平移
        if (e.featureTarget.properties.user_disabledEdit) {
            state.canDragMove = false
        } else {
            state.canDragMove = true
            state.dragMoveLocation = e.lngLat
        }
    },
}

const customSimpleSelectMode = {
    ...MapboxDraw.modes.simple_select,
    type: 'customSimpleSelectMode',
    startOnActiveFeature: function (state, e) {
        this.stopExtendedInteractions(state)
        this.map.dragPan.disable()
        this.doRender(e.featureTarget.properties.id)

        // 当绘制的几何图形属性中disabledEdit为true时禁止平移
        if (e.featureTarget.properties.user_disabledEdit) {
            state.canDragMove = false
        } else {
            state.canDragMove = true
            state.dragMoveLocation = e.lngLat
        }
    },
}


// 定义绘制工具
let drawTool = new MapboxDraw({
    userProperties: true,
    displayControlsDefault: false,
    modes: {
        ...MapboxDraw.modes,
        direct_select: customDirectSelectMode,
        simple_select: customSimpleSelectMode
    }
})

// 绘制工具添加到地图上
map.addControl(drawTool)

绘制图形以后添加属性：

map.on('draw.create', updateArea)


function updateArea(e) {
    if(e.type === 'draw.create'){
        e.features.forEach((feature) => {
            feature.properties.disabledEdit = true
            map._drawTool.add(feature)
        });
    }
}