mapbox-gl-js - 如何检查 Mapbox GL JS 绘制状态

Question

如何在将 new MapboxDraw 对象发送到后端之前检查它的状态？例如，在用户尝试提交某些操作而不在 map 上创建对象(在我的例子中是多边形)时向用户显示一些警告。

this.draw = new MapboxDraw({
    controls: {
        trash: true,
        polygon: true
    },
    defaultMode: 'draw_polygon',
    displayControlsDefault: false,
})

# sudocode
if (user has not created a polygon on the map) {
    alert('You must create a polygon before submitting the form!')
}

我实际上尝试用下面的代码来解决这个问题，因为正确的多边形的长度值必须大于 3 个点。

if (draw.getAll().features[0].geometry.coordinates[0].length <= 3) {
    alert('You must create a polygon before submitting the form!')
}

上面的代码只在第一次执行时有效，但在第二次执行时它会导致错误，例如，如果用户试图创建一个由两个点组成的多边形，或者如果用户创建一个多边形然后将其删除

Uncaught TypeError: Cannot read property 'geometry' of undefined

Answer 1

您可以将 Mapbox Draw 中的许多事件附加到当前 map 。

例如，map.on('draw.crete', function() {}) 一旦创建了 1 个多边形，这将执行。

您还可以使用 draw.getMode() 来捕获您绘制的任何类型的多边形。

看下面的例子，希望对你有帮助:)

var draw = new mapboxDraw({

    displayControlsDefault: false,
    controls: {
        point: true,
        polygon: true,
        line_string: true,
        trash: true
    }

});

map.on('draw.create', function(e) {

    var drawMode = draw.getMode();
    var drawnFeature = e.features[0];

    switch (drawMode) {
        case 'draw_point':
            // Draw point here
            break;
        case 'draw_polygon':
            // Draw polygon here
            break;
        case 'draw_line_string':
            // Draw linestring here
            break;
        default: alert('no draw options'); break;
    }

});

map.on('draw.update', function(e) {
    // This will call once you edit drawn polygon
});

map.on('draw.delete', function(e) {
    // This will call once you delete any polygon
});