Оползень в штате Вашингтон – до и после
Создание веб-карты
После анализа изображений или подготовки геопространственных данных вы часто публикуете эти элементы в виде слоев в ArcGIS Online, чтобы поделиться ими со своей аудиторией. Хороший способ представить эти слои в привлекательной форме - оформить их в веб-приложение.
Прежде чем вы сможете создать веб-приложение, вам сначала нужно собрать все интересующие слои на веб-карте. Сначала вы создадите новую веб-карту в ArcGIS Online.
- Войдите под учётной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- На ленте щелкните Карта.
Новая карта создана.
Подсказка:
Если вы начали новый сеанс работы, щелкните Карта для открытия новой карты. В противном случае на этой странице будет отображаться последняя карта, с которой вы работали. Если открылась существующая карта, щелкните Новая карта.
Далее вы добавите интересующие вас слои и начнете систематизировать карту. Первый слой - это снимки, сделанные сразу после оползня 2014 года.
Примечание:
Для этого урока слои уже были опубликованы в ArcGIS Online. В реальном проекте слои, скорее всего, были бы опубликованы вами или вашей организацией. Вы можете узнать, как загрузить свои собственные изображения в ArcGIS Online в руководстве Оценка ущерба от града на кукурузных полях с помощью спутниковых снимков в ArcGIS Online в разделе Создание онлайн слоев изображений, разбитых на листы. Либо вы также могли бы использовать уже существующие слои из надежных и авторитетных источников, таких как ArcGIS Living Atlas of the World.
- На панели Слои щёлкните Добавить.
Появится панель Добавить слой.
- На панели Добавить слой щелкните Мои ресурсы и выберите ArcGIS Online.
- В поисковом окне введите Aerial Imagery Oso Slide Area owner: esri_event.
Появится несколько результатов.
- Для слоя Aerial Imagery Oso Slide Area нажмите на кнопку Добавить.
Слой добавляется на карту, и карта приближается к его экстенту. Слой содержит изображение, сделанное сразу после оползня в Осо в 2014 году в сельской местности округа Снохомиш, штат Вашингтон (к северу от Сиэтла). Светлое пятно в центре изображения - результат селя. Сель начался на северном холме и пошел вниз, перегораживая реку, перекрывая близлежащее шоссе и погребая под собой общину Стилхед Драйв. Трагическое событие унесло жизни 43 человек.
Поскольку создаваемая вами карта будет в основном состоять из изображений, вам нужно выбрать базовую карту на основе спутниковых снимков.
- На панели Содержание (темной) щелкните Базовая карта. Выберите базовую карту Изображение.
Эта базовая карта показывает спутниковый снимок всего мира и является фоном для остальных слоев. Теперь вы добавите полигональный слой, чтобы показать границу воздействия оползня.
- На панели инструментов Содержание щелкните Слои. На панели Слои щёлкните Добавить.
- Найдите в ArcGIS Online слой Oso Mudslide Impact Area owner:Learn_ArcGIS. Добавьте слой Oso Mudslide Impact Area.
Слой будет добавлен на карту.
Этот слой представляет собой границы воздействия оползня, включая сам оползень и наводнение, вызванное им на восточной стороне в результате перекрытия близлежащей реки Стилагуамич. Вы измените его символику, чтобы убедиться, что он не скрывает изображения.
- Вверху панели Добавить слой щелкните стрелку назад.
На панели Слои перечислены все добавленные вами слои.
- Убедитесь, что выбран Oso Mudslide Impact Area. На панели инструментов Настройки (светлая) щелкните Стили.
- На панели Стили под Попробовать стиль отображения в Местоположение (единый символ) щелкните Опции стиля.
- Для Стиль символа щелкните кнопку редактирования.
- В окне Стиль символа щелкните значок Нет цвета. Для Цвета контура щелкните кнопку редактировать.
- На панели Выбрать цвет для # введите ff0000 и нажмите Enter. Щелкните Готово.
- Для Ширины контура увеличьте значение до 5.
- На панели Опции стиля щелкните Готово. Щелкните Готово снова.
Карта теперь показывает границу бедствия, не закрывая изображения.
Теперь вы дадите слоям более короткие и понятные имена.
- На панели Слои для слоя Oso Mudslide Impact Area щелкните кнопку Опции и выберите Переименовать.
- Переименуйте слой в Impact area и щёлкните OK.
- Таким же образом переименуйте слой Aerial Imagery Oso Slide Area в Postevent imagery.
Добавление исторической базовой карты
Одна из проблем с картой заключается в том, что базовая карта изображений по умолчанию показывает текущий ландшафт. Для сравнения было бы полезнее иметь базовую карту, которая показывает ландшафт до того, как произошел оползень. Для этого вы добавите слой исторических изображений в качестве базовой карты.
- На панели инструментов Содержание щелкните Базовая карта. На панели Базовая карта щелкните Текущая базовая карта.
- Под World Imagery щелкните кнопку Добавить.
- На панели Добавить слой выполните поиск в ArcGIS Online для Oso_2012 owner:Learn_ArcGIS. Для слоя Oso_2012 щелкните кнопку Добавить.
- В верхней части панели щелкните стрелку назад. При необходимости увеличивайте масштаб карты до тех пор, пока не появятся снимки 2012.
Новый слой теперь является частью базовой карты, показывая ландшафт до события. Это изображение было снято в 2012 году, за два года до оползня в Осо, и показывает сообщество Steelhead Drive до того, как оно было разрушено оползнем. Часть снимков перекрывается снимками, сделанными после оползня.
Если пользователь масштабирует изображение за пределы экстента изображения Oso 2012, будет отображаться обычная базовая карта изображения, что обеспечивает удобство работы.
- На панели инструментов Содержание щелкните Слои.
- На панели Слои наведите курсор на Postevent imagery и щелкните кнопку Видимость, чтобы сравнить ландшафт до и после события.
Вы можете увидеть, как местное сообщество Стилхед Драйв было полностью погребено под оползнем.
Примечание:
В зависимости от размера экрана вам может потребоваться увеличить масштаб, чтобы увидеть разницу между двумя слоями.
Выбрав более точный экстент, вы сохраните карту.
- При необходимости включите слой Postevent imagery.
- Для слоя Impact Area щелкните кнопку Опции и выберите Приблизить к.
Вся затронутая зона отобразится в экстенте карты.
- На панели инструментов Содержание щелкните Сохранить и открыть и выберите Сохранить как.
- В окне Сохранить карту введите следующую информацию:
- Для Заголовка введите 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.
- Щелкните Сохранить.
Добавление слоя скетча
Далее вы добавите примечания к своей карте, чтобы облегчить понимание. Вы добавите эти примечания со слоем скетча. Создание слоя скетча - хороший способ добавить на карту небольшое количество объектов, таких как стрелки и надписи. Объекты в слое скетчей сохраняются вместе с картой, поэтому только вы, как автор этой карты, можете их редактировать и сохранять.
- Отключите слой Postevent imagery.
- На панели инструментов Ресурсы щелкните Добавить и выберите Создать слой скетча.
Откроется панель Скетч. Кроме того, на карте появится панель инструментов с вариантами геометрии слоя скетча.
Примечание:
Если появится окно Новый слой скетча, его можно закрыть.
- На панели инструментов карты щелкните кнопку Линия.
На панели Скетч появятся варианты символов линейных объектов..
- На панели Скетч в разделе Цвет щелкните редактировать символ. Убедитесь, что установлен цвет #ffffff и щелкните Готово.
- Для Ширины задайте 6. Для Стрелки выберите символ, который заканчивается стрелкой справа.
- Нажмите на карту в районе, где начался оползень.
На карте появляется точка и от нее тянется линия, управляемая указателем мыши.
- Дважды щелкните местоположение сообщества Steelhead Drive, чтобы создать стрелку конечной точки и завершить линию.
Стрелка должна показывать направление оползня.
Примечание:
Чтобы изменить стрелку, щелкните на панели инструментов карты кнопку Выбрать. Нажмите на линию, чтобы выбрать ее на карте. Вы можете перетащить маркеры объекта, чтобы изменить его размер или повернуть.
Затем вы добавите несколько надписей.
- На панели инструментов карты щелкните кнопку Текст.
На панели Скетч появятся варианты текста.
- На карте щелкните местоположение над началом стрелки оползня. На панели Скетч для Ресурсов замените текст на Landslide.
Текст на карте обновится. Вы добавите тексту эффект гало, чтобы он лучше выделялся на фоне базовой карты.
- На панели Скетч включите Гало. В разделе Гало для Цвета щелкните кнопку редактировать.
- На панели Выбрать цвет, для # введите 2b2b2b и нажмите Enter. Щелкните Готово.
Текстовый объект теперь лучше виден на карте.
Примечание:
Если вам нужно переместить текстовый объект, щелкните на панели инструментов карты кнопку Выбрать. Щелкните текстовый объект, чтобы выбрать его. Задержите курсор на текстовом объекте, пока он не изменится на символ перемещения объекта. Перетащите текстовый объект в нужное местоположение.
- Точно так же создайте текстовые объекты для обозначения места затопления вверх по течению, расположенного к востоку от пострадавшей области, и сообщества Стилхед Драйв. Убедитесь, что у обоих текстовых объектов появилось черное гало.
Добавленные вами текстовые объекты - это надписи. Далее вы добавите пунктирные линии, чтобы указать затронутые сообщества.
- На панели инструментов карты щелкните кнопку Линия. На карте щелкните под текстовым элементом сообщества Steelhead Drive и дважды щелкните рядом с группой домов, составляющих центр сообщества.
- На панели Скетч для Штрихов выберите пунктирную линию со штрихами среднего размера.
- Для Ширины введите 4.
Стиль штрихов линии обновится на карте.
Слой примечаний карты готов. Теперь вы завершите работу над картой и опубликуете ее.
- Закройте панель Скетч. На панели Слои снова включите слой Postevent imagery.
- Уменьшайте масштаб, пока не увидите все объекты на карте, но не настолько близко, чтобы текст стал огромным по сравнению с изображением.
- На панели Слои для слоя Скетч щелкните кнопку Опции и выберите Переименовать. Переименуйте слой в Reference information
- На панели инструментов Содержание щелкните Сохранить и открыть и выберите Сохранить.
Наконец, вы опубликуете карту.
- На панели Содержание щелкните Опубликовать карту. В окне Опубликовать выберите Для всех (общий) и щелкните Сохранить.
Вы создали онлайн-карту, содержащую все изображения до и после события, а также дополнительные данные и примечания, чтобы помочь пользователям разобраться в карте. Сопоставление изображений до и после показывает нам завершённую историю о разрушениях, вызванных оползнем, хотя взгляд на эти изображения рядом был бы удобнее, чем включение и выключение слоя. Вы оформите карту в веб-приложение, чтобы расширить её функциональные возможности и сделать более удобной для пользователя.
Создание приложения
Теперь, когда ваша веб-карта готова, вы добавите ее в веб-приложение, чтобы представить информацию наилучшим образом. Приложение использует веб-карту и добавляет функции и инструменты для улучшения взаимодействия с пользователем. Ваша цель - позволить вашей аудитории легко сравнивать изображения. Вы создадите приложение с функциональностью Спрятать, позволяющее пользователям перемещаться между изображениями «до» и «после».
- На панели инструментов Содержание щелкните Создать приложение и выберите Instant Apps.
ArcGIS Instant Apps открывается в новой вкладке. Instant Apps предоставляет вам шаблоны приложений, которые вы можете использовать для создания своего приложения. Вы будете использовать шаблон Media Map, который включает функциональность Спрятать.
- Для Media Map щелкните Выбрать.
Подсказка:
Чтобы узнать больше о шаблоне, прежде чем активировать его, щелкните на стрелку рядом с названием шаблона.
- В окне Создать приложение - Media Map для Заголовка введите Oso Mudslide Before and After.
- Щелкните Создать приложение.
Создается приложение, основанное на этом шаблоне. Оно показывает вашу карту и имеет дополнительные настройки.
Сбоку от карты находится панель настройки приложения. Панель состоит из четырех шагов, каждый из которых отвечает за свой пакет настроек. Во-первых, вы хотите включить в приложении функциональность Спрятать. Вы можете добавить инструмент Спрятать, выполнив поиск.
- Щелкните Настройки поиска. В окне Настройки поиска найдите Спрятать и нажмите инструмент Спрятать в результатах.
Появится сообщение с предложением отключить режим экспресс. Экспресс-режим является режимом по умолчанию для настройки приложений в Instant Apps и обеспечивает упрощенную настройку. Инструмент Спрятать не входит в число настроек экспресс-режима, поэтому для его включения необходимо отключить экспресс-режим.
- В окне Отключить экспресс-режим щелкните Продолжить.
Появится панель Интерактивность с несколькими доступными опциями по интерактивности.
- Включите инструмент Спрятать.
Появятся опции для настройки инструмента. Вы можете настроить переключение между слоями и изменить направление шторки. Вы хотите, чтобы изображения после события появлялись по умолчанию, но исчезали при использовании инструмента Спрятать. Чтобы добиться этого эффекта, вы сделаете изображения после события ведущим слоем в инструменте Спрятать.
- Для Выбор ведущих слоев разверните Postevent imagery. Проверьте Изображение.
- На карте перетащите ползунок вперед и назад, чтобы проверить функциональность.
С использованием этого инструмента становится проще сопоставлять то, как территория выглядела до и после происшествия. Эти изображения показывают, что поселение Стилхед Драйв было полностью погребено под оползнем и практически не оставило следов своего существования.
Добавить больше функциональности
Далее вы добавите больше полезных функций в приложение. В частности, вы добавите масштабную линейку и инструмент измерения, чтобы пользователи могли понять масштабы катастрофы.
- Щелкните Настройки поиска и введите Масштабная линейка. В списке результатов щелкните Масштабная линейка.
Появится панель Интерактивность.
- Под Навигация включите Масштабную линейку.
Масштабная линейка добавится в нижний угол карты.
Инструменты измерения также доступны на этой панели, поэтому вам не нужно их искать.
- На панели Интерактивность включите Инструменты измерения.
Кнопка Открыть Измерение добавится в верхний угол карты.
- Нажмите кнопку Открыть Измерение. На панели инструментов измерения щелкните кнопку Измерить площадь.
- Нарисуйте полигон на карте. Дважды щелкните для завершения рисования.
Площадь нарисованного вами полигона указана в квадратных метрах, а периметр – в метрах.
Используя этот инструмент, пользователи могут измерить, как далеко продвинулся оползень, и какую площадь он затронул.
- Щелкните кнопку Очистить.
Измерение очищено.
- Нажмите кнопку Открыть Измерение, чтобы закрыть панели инструментов измерения.
В конце вы удалите кнопку Открыть легенду, которая находится под кнопкой Открыть Измерение. Эта кнопка включена в приложение по умолчанию, но для вашей карты она бесполезна.
- Щелкните Настройки поиска и введите Легенда. В списке результатов щелкните Легенда.
Появится панель О приложении с настройками для легенды.
- Выключите Легенду.
Кнопка Открыть легенду удалена из приложения.
Завершение создания приложения
Прежде, чем вы запустите приложение и протестируете виджеты, вы добавите текстовую информацию о цели приложения и поменяете его тему.
- Щелкните О приложении.
Появится панель О приложении.
- Щелкните Сведения о приложении.
- Включите Панель введения. Для Содержание панели введения щелкните Редактировать.
- В окне Содержание панели введения скопируйте и вставьте или введите следующий текст:
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.
- Щелкните Закрыть.
Кнопка Открыть панель введения появится в верхней части карты рядом с кнопкой Открыть измерение. Когда вы нажмете кнопку Открыть панель введения, текст появится в окне.
Далее вы добавите заголовок с названием приложения.
- На панели Сведения о приложении включите Заголовок.
Заголовок появится в верхней части карты.
Затем вы измените тему приложения.
- Щелкните Тема и компоновка.
- На панели Тема и компоновка щелкните Тема.
- Для Выбрать режим выберите Темный.
Заголовок и кнопки на карте меняют цвет с белого на черный. Черный цвет создаст серьезный тон, соответствующий серьезности бедствия.
Вы закончили настраивать приложение. Далее вы опубликуете его.
- В нижней части панели Тема щелкните Опубликовать.
- В окне Опубликовать щелкните Подтвердить.
Через несколько секунд приложение будет опубликовано. Появится окно Общий доступ с вариантами совместного использования приложения.
- В окне Общий доступ щелкните Запустить.
Приложение запустится в новой вкладке браузера.
- При желании протестируйте функциональность готового приложения, например инструмент Скрыть, инструмент Измерение или панель Введение.
Добавление метаданных
Последний шаг перед завершением работы над приложением – добавление метаданных. Метаданные – это информация, объясняющая, о чем ваше приложение. У всех элементов в ArcGIS Online есть метаданные, которые вы можете увидеть на странице элемента.
- Закройте приложение. В верхней части редактора приложения щелкните кнопку дополнительных параметров и выберите Ресурсы.
Теперь веб-картографическое приложение Oso Mudslide Before and After находится на вашей странице Ресурсы. Приложение и карта, на которой оно основано, должны быть выложены в общий доступ, прежде чем вы сможете показать его кому-то еще. Вы уже опубликовали карту для всех, и теперь вы опубликуете приложение.
- Сделайте отметку рядом с приложением Oso Mudslide Before and After.
- Над списком элементов щелкните Общий доступ. В окне Общий доступ выберите Для всех (общий).
- Щелкните Сохранить.
Теперь, когда ваше приложение выложено в общий доступ, вы добавите метаданные.
- Щелкните заголовок веб-приложения Oso Mudslide Before and After.
Появится страница с информацией. Вы ранее заполнили некоторые метаданные, такие как краткая информация и теги, при первом создании приложения. Однако у приложения по-прежнему нет описания и информации об авторах. А также оно использует универсальный эскиз по умолчанию.
Для начала вы замените стандартный эскиз. Можете его заменить на экранный снимок приложения, любое изображение или рисунок с сайта Learn ArcGIS.
- Над рисунком образца щёлкните Редактировать образец.
- В окне Создать образец в разделе Загрузить изображение щелкните Обзор.
- Укажите файл который вы выбрали и дважды щёлкните. В окне Создать образец щелкните Сохранить.
Теперь надо добавить описание.
- На странице элемента рядом с Описанием щелкните Редактировать. Скопируйте и вставьте следующее описание:
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.
- Щелкните Сохранить.
- В Условиях использования щёлкните Редактировать и введите Нет. Щелкните Сохранить.
- Внизу сбоку страницы для Информации об авторских правах щёлкните Редактировать и введите Esri Disaster Response Program, FEMA, NGA, Snohomish County, and Washington Department of Transportation.
Это организация, которая изначально собрала данные.
- Щелкните Сохранить.
Метаданные были добавлены к информации об элементе. Ваше приложение готово.
На этом уроке вы взяли существующие слои изображений, относящиеся к оползню Осо 2014 года, и собрали их в веб-карту в ArcGIS Online. Затем вы инкапсулировали встроили веб-карту в веб-приложение с помощью Web AppBuilder. Вы добавили в ваше приложение виджеты, чтобы подогнать пользовательский интерфейс под ваши задачи. Затем вы выложили приложение в общий доступ и добавили метаданные. Теперь у вас есть приложение, которое вы можете показать своей аудитории, чтобы рассказать историю катастрофы.
Вы можете найти больше учебных пособий в галерее учебных пособий.
