Оползень в штате Вашингтон – до и после

Создание веб-карты

После анализа изображений или подготовки геопространственных данных вы часто публикуете эти элементы в виде слоев в ArcGIS Online, чтобы поделиться ими со своей аудиторией. Хороший способ представить эти слои в привлекательной форме - оформить их в веб-приложение.

Прежде чем вы сможете создать веб-приложение, вам сначала нужно собрать все интересующие слои на веб-карте. Сначала вы создадите новую веб-карту в ArcGIS Online.

  1. Войдите под учётной записью организации ArcGIS.
    Примечание:

    Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.

  2. На ленте щелкните Карта.

    Опция Карта

    Новая карта создана.

    Подсказка:

    Если вы начали новый сеанс работы, щелкните Карта для открытия новой карты. В противном случае на этой странице будет отображаться последняя карта, с которой вы работали. Если открылась существующая карта, щелкните Новая карта.

    Пустая карта в Map Viewer

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

    Примечание:

    Для этого урока слои уже были опубликованы в ArcGIS Online. В реальном проекте слои, скорее всего, были бы опубликованы вами или вашей организацией. Или вы также могли бы использовать уже существующие слои из надежных и авторитетных источников, таких как ArcGIS Living Atlas of the World.

  3. На панели Слои щёлкните Добавить.

    Кнопка Добавить на панели Слои

    Появится панель Добавить слой.

  4. На панели Добавить слой щелкните Мои ресурсы и выберите ArcGIS Online.
  5. В поисковом окне введите Aerial Imagery Oso Slide Area owner: esri_event.

    Появится несколько результатов.

  6. Для слоя Aerial Imagery Oso Slide Area нажмите на кнопку Добавить.

    Кнопка Добавить для слоя Aerial Imagery Oso Slide Area

    Слой добавляется на карту, и карта приближается к его экстенту. Слой содержит изображение, сделанное сразу после оползня в Осо в 2014 году в сельской местности округа Снохомиш, штат Вашингтон (к северу от Сиэтла). Светлое пятно в центре изображения - результат селя. Сель начался на северном холме и пошел вниз, перегораживая реку, перекрывая близлежащее шоссе и погребая под собой общину Стилхед Драйв. Трагическое событие унесло жизни 43 человек.

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

  7. На панели Содержание (темной) щелкните Базовая карта. Выберите базовую карту Изображение.

    Базовая карта Изображение

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

  8. На панели инструментов Ресурсы щелкните Слои. На панели Слои щёлкните Добавить.
  9. Найдите в ArcGIS Online слой Oso Mudslide Impact Area owner:Learn_ArcGIS. Добавьте слой Oso Mudslide Impact Area.

    Слой будет добавлен на карту.

    Слой Oso Mudslide Impact Area на карте

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

  10. Вверху панели Добавить слой щелкните стрелку назад.

    Стрелка Назад

    На панели Слои перечислены все добавленные вами слои.

  11. Убедитесь, что выбран Oso Mudslide Impact Area. На панели инструментов Настройки (светлая) щелкните Стили.

    Опция Стили

  12. На панели Стили под Попробовать стиль отображения в Местоположение (единый символ) щелкните Опции стиля.

    Кнопка Опции стилей

  13. Для Стиль символа щелкните кнопку редактирования.
  14. В окне Стиль символа щелкните значок Нет цвета. Для Цвета контура щелкните кнопку редактировать.

    Настройки Стиля символа

  15. На панели Выбрать цвет для # введите ff0000 и нажмите Enter. Щелкните Готово.

    Красный цвет контура

  16. Для Ширины контура увеличьте значение до 5.

    Опция Ширина контура установлена на 5

  17. На панели Опции стиля щелкните Готово. Щелкните Готово снова.

    Карта теперь показывает границу бедствия, не закрывая изображения.

    Карта с красной границей бедствия

    Теперь вы дадите слоям более короткие и понятные имена.

  18. На панели Слои для слоя Oso Mudslide Impact Area щелкните кнопку Опции и выберите Переименовать.

    Опция Переименовать

  19. Переименуйте слой в Impact area и щёлкните OK.
  20. Таким же образом переименуйте слой Aerial Imagery Oso Slide Area в Postevent imagery.

Добавление исторической базовой карты

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

  1. На панели инструментов Содержание щелкните Базовая карта. На панели Базовая карта щелкните Текущая базовая карта.

    Опция Текущая базовая карта

  2. Под World Imagery щелкните кнопку Добавить.

    Кнопка Добавить на панели Базовая карта

  3. На панели Добавить слой выполните поиск в ArcGIS Online для Oso_2012 owner:Learn_ArcGIS. Для слоя Oso_2012 щелкните кнопку Добавить.

    Кнопка Добавить для слоя Oso_2012

  4. В верхней части панели щелкните стрелку назад. При необходимости увеличивайте масштаб карты до тех пор, пока не появятся снимки 2012.

    Снимок 2012 года добавлен на карту

    Новый слой теперь является частью базовой карты, показывая ландшафт до события. Это изображение было снято в 2012 году, за два года до оползня в Осо, и показывает сообщество Steelhead Drive до того, как оно было разрушено оползнем. Часть снимков перекрывается снимками, сделанными после оползня.

    Если пользователь масштабирует изображение за пределы экстента изображения Oso 2012, будет отображаться обычная базовая карта изображения, что обеспечивает удобство работы.

  5. На панели инструментов Ресурсы щелкните Слои.
  6. На панели Слои наведите курсор на Postevent imagery и щелкните кнопку Видимость, чтобы сравнить ландшафт до и после события.

    Кнопка видимости

    Вы можете увидеть, как местное сообщество Стилхед Драйв было полностью погребено под оползнем.

    Область, где находился поселок Стилхед Драйв

    Примечание:

    В зависимости от размера экрана вам может потребоваться увеличить масштаб, чтобы увидеть разницу между двумя слоями.

    Выбрав более точный экстент, вы сохраните карту.

  7. При необходимости включите слой Postevent imagery.
  8. Для слоя Impact Area щелкните кнопку Опции и выберите Приблизить к.

    Вся затронутая зона отобразится в экстенте карты.

  9. На панели инструментов Содержание щелкните Сохранить и открыть и выберите Сохранить как.

    Кнопка Сохранить как

  10. В окне Сохранить карту введите следующую информацию:
    • Для Заголовка введите 2014 Oso Mudslide Imagery and Extent.
    • Для Тегов введите Oso, Washington и mudslide, нажмите Enter после каждого слова.
    • Для Краткой информации введите This web map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath.

    Окно Сохранить карту

  11. Щелкните Сохранить.

Добавление слоя скетча

Далее вы добавите примечания к своей карте, чтобы облегчить понимание. Вы добавите эти примечания со слоем скетча. Создание слоя скетча - хороший способ добавить на карту небольшое количество объектов, таких как стрелки и надписи. Объекты в слое скетчей сохраняются вместе с картой, поэтому только вы, как автор этой карты, можете их редактировать и сохранять.

  1. Отключите слой Postevent imagery.
  2. На панели инструментов Ресурсы щелкните Добавить и выберите Создать слой скетча.

    Опция Создать слой скетча в меню Добавить

    Откроется панель Скетч. Кроме того, на карте появится панель инструментов с вариантами геометрии слоя скетча.

    Примечание:

    Если появится окно Новый слой скетча, его можно закрыть.

  3. На панели инструментов карты щелкните кнопку Линия.

    Кнопка Линия

    На панели Скетч появятся варианты символов линейных объектов..

  4. На панели Скетч в разделе Цвет щелкните редактировать символ. Убедитесь, что установлен цвет #ffffff и щелкните Готово.
  5. Для Ширины задайте 6. Для Стрелки выберите символ, который заканчивается стрелкой справа.

    Параметры Ширина и Стрелка

  6. Нажмите на карту в районе, где начался оползень.

    На карте появляется точка и от нее тянется линия, управляемая указателем мыши.

  7. Дважды щелкните местоположение сообщества Steelhead Drive, чтобы создать стрелку конечной точки и завершить линию.

    Стрелка должна показывать направление оползня.

    Скетч стрелки на карте

    Примечание:

    Чтобы изменить стрелку, щелкните на панели инструментов карты кнопку Выбрать. Нажмите на линию, чтобы выбрать ее на карте. Вы можете перетащить маркеры объекта, чтобы изменить его размер или повернуть.

    Затем вы добавите несколько надписей.

  8. На панели инструментов карты щелкните кнопку Текст.

    Кнопка Текст

    На панели Скетч появятся варианты текста.

  9. На карте щелкните местоположение над началом стрелки оползня. На панели Скетч для Ресурсов замените текст на Landslide.

    Текст изменен на Landslide

    Текст на карте обновится. Вы добавите тексту эффект гало, чтобы он лучше выделялся на фоне базовой карты.

  10. На панели Скетч включите Гало. В разделе Гало для Цвета щелкните кнопку редактировать.

    Настройки гало

  11. На панели Выбрать цвет, для # введите 2b2b2b и нажмите Enter. Щелкните Готово.

    Текстовый объект теперь лучше виден на карте.

    Текстовый объект на карте

    Примечание:

    Если вам нужно переместить текстовый объект, щелкните на панели инструментов карты кнопку Выбрать. Щелкните текстовый объект, чтобы выбрать его. Задержите курсор на текстовом объекте, пока он не изменится на символ перемещения объекта. Перетащите текстовый объект в нужное местоположение.

  12. Точно так же создайте текстовые объекты для обозначения места затопления вверх по течению, расположенного к востоку от пострадавшей области, и сообщества Стилхед Драйв. Убедитесь, что у обоих текстовых объектов появилось черное гало.

    На карту добавлены два дополнительных текстовых объекта

    Добавленные вами текстовые объекты - это надписи. Далее вы добавите пунктирные линии, чтобы указать затронутые сообщества.

  13. На панели инструментов карты щелкните кнопку Линия. На карте щелкните под текстовым элементом сообщества Steelhead Drive и дважды щелкните рядом с группой домов, составляющих центр сообщества.

    Первая линия добавлена

  14. На панели Скетч для Штрихов выберите пунктирную линию со штрихами среднего размера.

    Пунктирная линия со средними штрихами

  15. Для Ширины введите 4.

    Стиль штрихов линии обновится на карте.

    Линия отформатирована на карте

    Слой примечаний карты готов. Теперь вы завершите работу над картой и опубликуете ее.

  16. Закройте панель Скетч. На панели Слои снова включите слой Postevent imagery.
  17. Уменьшайте масштаб, пока не увидите все объекты на карте, но не настолько близко, чтобы текст стал огромным по сравнению с изображением.
  18. На панели Слои для слоя Скетч щелкните кнопку Опции и выберите Переименовать. Переименуйте слой в Reference information
  19. На панели инструментов Содержание щелкните Сохранить и открыть и выберите Сохранить.

    Наконец, вы опубликуете карту.

  20. На панели Содержание щелкните Опубликовать карту. В окне Опубликовать выберите Для всех (общий) и щелкните Сохранить.

    Вы создали онлайн-карту, содержащую все изображения до и после события, а также дополнительные данные и примечания, чтобы помочь пользователям разобраться в карте. Сопоставление изображений до и после показывает нам завершённую историю о разрушениях, вызванных оползнем, хотя взгляд на эти изображения рядом был бы удобнее, чем включение и выключение слоя. Вы оформите карту в веб-приложение, чтобы расширить её функциональные возможности и сделать более удобной для пользователя.

Создание приложения

Теперь, когда ваша веб-карта готова, вы добавите ее в веб-приложение, чтобы представить информацию наилучшим образом. Приложение использует веб-карту и добавляет функции и инструменты для улучшения взаимодействия с пользователем. Ваша цель - позволить вашей аудитории легко сравнивать изображения. Вы создадите приложение с функциональностью Спрятать, позволяющее пользователям перемещаться между изображениями «до» и «после».

  1. На панели инструментов Содержание щелкните Создать приложение и выберите Instant Apps.

    Опция Instant Apps

    ArcGIS Instant Apps открывается в новой вкладке. Instant Apps предоставляет вам шаблоны приложений, которые вы можете использовать для создания своего приложения. Вы будете использовать шаблон Media Map, который включает функциональность Спрятать.

  2. Для Media Map щелкните Выбрать.

    Шаблон Карта медиа

    Подсказка:

    Чтобы узнать больше о шаблоне, прежде чем активировать его, щелкните на стрелку рядом с названием шаблона.

  3. В окне Создать приложение - Media Map для Заголовка введите Oso Mudslide Before and After.

    Окно Создать приложение – Media Map

  4. Щелкните Создать приложение.

    Создается приложение, основанное на этом шаблоне. Оно показывает вашу карту и имеет дополнительные настройки.

    Приложение по умолчанию

    Сбоку от карты находится панель настройки приложения. Панель состоит из четырех шагов, каждый из которых отвечает за свой пакет настроек. Во-первых, вы хотите включить в приложении функциональность Спрятать. Вы можете добавить инструмент Спрятать, выполнив поиск.

  5. Щелкните Настройки поиска. В окне Настройки поиска найдите Спрятать и нажмите инструмент Спрятать в результатах.

    Инструмент Спрятать в результатах поиска

    Появится сообщение с предложением отключить режим экспресс. Экспресс-режим является режимом по умолчанию для настройки приложений в Instant Apps и обеспечивает упрощенную настройку. Инструмент Спрятать не входит в число настроек экспресс-режима, поэтому для его включения необходимо отключить экспресс-режим.

  6. В окне Отключить экспресс-режим щелкните Продолжить.

    Появится панель Интерактивность с несколькими доступными опциями по интерактивности.

  7. Включите инструмент Спрятать.

    Инструмент Спрятать включен

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

  8. Для Выбор ведущих слоев разверните Postevent imagery. Проверьте Изображение.

    Опция Выбор ведущих слоев

  9. На карте перетащите ползунок вперед и назад, чтобы проверить функциональность.

    Инструмент Спрятать на карте

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

Добавить больше функциональности

Далее вы добавите больше полезных функций в приложение. В частности, вы добавите масштабную линейку и инструмент измерения, чтобы пользователи могли понять масштабы катастрофы.

  1. Щелкните Настройки поиска и введите Масштабная линейка. В списке результатов щелкните Масштабная линейка.

    Масштабная линейка в результатах поиска

    Появится панель Интерактивность.

  2. Под Навигация включите Масштабную линейку.

    Настройки инструмента Масштабная линейка

    Масштабная линейка добавится в нижний угол карты.

    Масштабная линейка на карте

    Инструменты измерения также доступны на этой панели, поэтому вам не нужно их искать.

  3. На панели Интерактивность включите Инструменты измерения.

    Опция Инструменты измерения

    Кнопка Открыть Измерение добавится в верхний угол карты.

    Кнопка Открыть Измерение

  4. Нажмите кнопку Открыть Измерение. На панели инструментов измерения щелкните кнопку Измерить площадь.

    Кнопка Измерить площадь

  5. Нарисуйте полигон на карте. Дважды щелкните для завершения рисования.

    Площадь нарисованного вами полигона указана в квадратных метрах, а периметр – в метрах.

    Тестовое измерение на карте

    Используя этот инструмент, пользователи могут измерить, как далеко продвинулся оползень, и какую площадь он затронул.

  6. Щелкните кнопку Очистить.

    Кнопка Очистить

    Измерение очищено.

  7. Нажмите кнопку Открыть Измерение, чтобы закрыть панели инструментов измерения.

    В конце вы удалите кнопку Открыть легенду, которая находится под кнопкой Открыть Измерение. Эта кнопка включена в приложение по умолчанию, но для вашей карты она бесполезна.

  8. Щелкните Настройки поиска и введите Легенда. В списке результатов щелкните Легенда.

    Появится панель О приложении с настройками для легенды.

  9. Выключите Легенду.

    Инструмент Легенда выключен

    Кнопка Открыть легенду удалена из приложения.

Завершение создания приложения

Прежде, чем вы запустите приложение и протестируете виджеты, вы добавите текстовую информацию о цели приложения и поменяете его тему.

  1. Щелкните О приложении.

    Опция О приложении

    Появится панель О приложении.

  2. Щелкните Сведения о приложении.

    Опция Сведения о приложении

  3. Включите Панель введения. Для Содержание панели введения щелкните Редактировать.

    Опции панели Введение

  4. В окне Содержание панели введения скопируйте и вставьте или введите следующий текст:

    This app shows imagery from the 2014 Oso mudslide in Snohomish County, Washington. Use the Swipe tool to compare imagery from before and after the slide.

    The red outline shows the extent of the slide's impact, including flooding.

    This disaster led to the deaths of 43 people and caused millions of dollars of damage.

    Окно Содержание панели введения

  5. Щелкните Закрыть.

    Кнопка Открыть панель введения появится в верхней части карты рядом с кнопкой Открыть измерение. Когда вы нажмете кнопку Открыть панель введения, текст появится в окне.

    Далее вы добавите заголовок с названием приложения.

  6. На панели Сведения о приложении включите Заголовок.

    Инструмент Заголовок включен

    Заголовок появится в верхней части карты.

    Заголовок на карте

    Затем вы измените тему приложения.

  7. Щелкните Тема и компоновка.

    Опция Тема и компоновка

  8. На панели Тема и компоновка щелкните Тема.
  9. Для Выбрать режим выберите Темный.

    Установите Выбрать режим на Темный

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

    Вы закончили настраивать приложение. Далее вы опубликуете его.

  10. В нижней части панели Тема щелкните Опубликовать.

    Кнопка Опубликовать

  11. В окне Опубликовать щелкните Подтвердить.

    Через несколько секунд приложение будет опубликовано. Появится окно Общий доступ с вариантами совместного использования приложения.

  12. В окне Общий доступ щелкните Запустить.

    Приложение запустится в новой вкладке браузера.

    Готовое приложение

  13. При желании протестируйте функциональность готового приложения, например инструмент Скрыть, инструмент Измерение или панель Введение.

Добавление метаданных

Последний шаг перед завершением работы над приложением – добавление метаданных. Метаданные – это информация, объясняющая, о чем ваше приложение. У всех элементов в ArcGIS Online есть метаданные, которые вы можете увидеть на странице элемента.

  1. Закройте приложение. В верхней части редактора приложения щелкните кнопку дополнительных параметров и выберите Ресурсы.

    Кнопка Ресурсы

    Теперь веб-картографическое приложение Oso Mudslide Before and After находится на вашей странице Ресурсы. Приложение и карта, на которой оно основано, должны быть выложены в общий доступ, прежде чем вы сможете показать его кому-то еще. Вы уже опубликовали карту для всех, и теперь вы опубликуете приложение.

  2. Сделайте отметку рядом с приложением Oso Mudslide Before and After.

    Выбрано приложение Oso Mudslide

  3. Над списком элементов щелкните Общий доступ. В окне Общий доступ выберите Для всех (общий).
  4. Щелкните Сохранить.

    Теперь, когда ваше приложение выложено в общий доступ, вы добавите метаданные.

  5. Щелкните заголовок веб-приложения Oso Mudslide Before and After.

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

    Для начала вы замените стандартный эскиз. Можете его заменить на экранный снимок приложения, любое изображение или рисунок с сайта Learn ArcGIS.

  6. Над рисунком образца щёлкните Редактировать образец.

    Опция Редактировать образец

  7. В окне Создать образец в разделе Загрузить изображение щелкните Обзор.
  8. Укажите файл который вы выбрали и дважды щёлкните. В окне Создать образец щелкните Сохранить.

    Теперь надо добавить описание.

  9. На странице элемента рядом с Описанием щелкните Редактировать. Скопируйте и вставьте следующее описание:

    This map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath. The Impact Area Boundary layer was created from remote-sensing imagery and provided by FEMA and the NGA. The Post-Event Imagery layer is an image of the Oso mudslide area taken two days after the event.

  10. Щелкните Сохранить.
  11. В Условиях использования щёлкните Редактировать и введите Нет. Щелкните Сохранить.
  12. Внизу сбоку страницы для Информации об авторских правах щёлкните Редактировать и введите Esri Disaster Response Program, FEMA, NGA, Snohomish County, and Washington Department of Transportation.

    Это организация, которая изначально собрала данные.

  13. Щелкните Сохранить.

    Метаданные были добавлены к информации об элементе. Ваше приложение готово.

На этом уроке вы взяли существующие слои изображений, относящиеся к оползню Осо 2014 года, и собрали их в веб-карту в ArcGIS Online. Затем вы инкапсулировали встроили веб-карту в веб-приложение с помощью Web AppBuilder. Вы добавили в ваше приложение виджеты, чтобы подогнать пользовательский интерфейс под ваши задачи. Затем вы выложили приложение в общий доступ и добавили метаданные. Теперь у вас есть приложение, которое вы можете показать своей аудитории, чтобы рассказать историю катастрофы.

Вы можете найти больше учебных пособий в галерее учебных пособий.