Перерисовка нарисованных функций GL Mapbox

Я разрабатываю приложение с использованием angular 1.5 и библиотеки javascript Mapbox GL.

Я загрузил https://github.com/mapbox/mapbox-gl-draw/, позволяющий пользователям рисовать собственные линии и многоугольники. Это прекрасно работает.

Теперь хочу, чтобы нарисованные линии были стойкими. Поэтому, когда пользователь покидает страницу и возвращается, ранее нарисованные линии перерисовываются и могут быть отредактированы и удалены, как и следовало ожидать.

Чтобы сохранить нарисованные линии, которые я прослушиваю для события draw.create, используйте Draw.getAll (), чтобы захватить все нарисованные слои и сохранить их где-нибудь, чтобы они были доступны во всем моем приложении.

Пока все хорошо.

Теперь о настойчивости; всякий раз, когда я повторно посещаю страницу карты, у меня есть все необходимые данные, и я использую следующий вызов API, чтобы попытаться перерисовать элементы.

function reDrawRoutes(){
    var id = Draw.add(scope.model.drawn_routes);
}

Я также пробовал следующий метод (так как оба должны иметь одинаковые результаты в соответствии с документами mapbox-gl-draw):

function reDrawRoutes(){
    var id = Draw.set(scope.model.drawn_routes);
}

К вашему сведению; scope.model.drawn_routes содержит массив таких объектов:

Array[1]
    0: Object
        geometry: Object
            coordinates: Array[2]
            type: "LineString"
        id: "23f7fd3af36d6ba6ea02907b10f40391"
        properties: Object
            type: "Feature"

Теперь о странной части;

Каждый раз, когда я вызываю вышеуказанный метод, никаких видимых изменений не происходит. Тем не мение! Когда я нажимаю кнопки «рисовать линию» или «рисовать многоугольник», маршруты фактически рисуются на карте!

Так что что-то происходит, мне не хватает. Я копнул немного глубже и вызвал Draw.getAll () сразу после того, как вызвал метод Draw.set () / add () и увидел добавленную мной функцию, как и следовало ожидать.

Но когда я вызвал метод Draw.getAll () сразу после срабатывания события draw.mode_changed (которое срабатывает после того, как я нажимаю кнопку рисования линии / многоугольника), я вижу, что внезапно появляется дополнительная функция. Таким образом, нажатие кнопок на самом деле создает линии, которые я хочу нарисовать.

Результат Draw.getAll () после вызова Draw.set (scope.model.drawn_routes):

Object
    type: "FeatureCollection"
    features: Array[1]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

Draw.getAll () приводит к результатам после нажатия кнопки рисования линии или многоугольника:

Object
    type: "FeatureCollection"
    features: Array[2]
        0: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[2]
                type: "LineString"
            id: "b89da95478ca83d653cf9756a1531f0b"
            properties: Object
                // empty object

        1: Object
            type: "Feature"
            geometry: Object
                coordinates: Array[0]
                type: "LineString"
            id: "79cad278991d533454612e2b783f5abe"
            properties: Object
                // empty object

Итак, как вы можете видеть, вторая функция, которая появляется после щелчка, у элементов управления рисованием даже нет координат.

Итак, мой вопрос: что здесь происходит? Как я могу заново нарисовать маршруты, которые я извлек и сохранил?


person Nick Verheijen    schedule 06.03.2017    source источник


Ответы (1)


Ник,

Проблема, с которой вы столкнулись, заключается в том, что вы вызываете Draw.set() до того, как все ресурсы, необходимые для рендеринга карты, будут загружены. Чтобы исправить это, убедитесь, что вы инициализируете Draw внутри обратного вызова map.on('load', function() { ... });. Люди часто путают load и style.load. load - это событие, к которому нужно прислушиваться.

person Matthew Whittemore    schedule 03.04.2017
comment
Немного поздно, но спасибо за ответ! Это оказалось проблемой. - person Nick Verheijen; 05.07.2017