Как проверить Mapbox GL JS Состояние рисования - PullRequest
Новая
       7

Как проверить Mapbox GL JS Состояние рисования

1 голос
/ 11 марта 2020

Как проверить состояние объекта new MapboxDraw перед отправкой его бэкэнду? Например, чтобы показать пользователю некоторые предупреждения, когда он пытается отправить некоторые действия, не создавая объект (в моем случае многоугольник) на карте. 

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

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете прикрепить много событий из Mapbox Draw к вашей текущей карте.

Например, 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
});
...