Я разрабатываю приложение с использованием 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
Итак, как вы можете видеть, вторая функция, которая появляется после щелчка, у элементов управления рисованием даже нет координат.
Итак, мой вопрос: что здесь происходит? Как я могу заново нарисовать маршруты, которые я извлек и сохранил?