Создание приложения с использованием Web AppBuilder

Изучение карты

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

  1. Перейдите в группу ArcGIS Online, называющуюся Oso Mudslide - Before and After.
  2. Щелкните Войти и войдите с использованием учетной записи организации ArcGIS.
    Примечание:

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

    Группа содержит единственный элемент – веб-карту с названием 2014 Oso Mudslide Imagery and Extent автора Learn_ArcGIS.

  3. Щелкните на образце, чтобы открыть карту.

    Образец элемента группы

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

    Карта оползня

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

    Панель Содержание

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

  5. На панели Содержание задержите курсор на слое Post-Event Imagery. Щелкните кнопку Дополнительные опции и воспользуйтесь командой Приблизить.

    Приблизить к

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

    Изображение после события

  6. На панели Содержание отключите слой Post-Event Imagery.

    Отключить слой

    Слой отключен, позволяя вам увидеть базовую карту. Базовая карта Изображение была обновлена с 2014 года, поэтому слой базовой карты Imagery на этой веб-карте фактически содержит два слоя. Нижним слоем группы является базовая карта World Imagery. Наверху находится слой с названием Pre-Event Imagery, в котором отрисован сервис изображений на базе ортофото 2012, опубликованных округом Snohomish.

  7. Приблизьтесь к карте, дважды щелкнув на области с надписью Steelhead Drive Community, она находится к югу от излучины реки. В зависимости от разрешения и размеров вашего экрана, может понадобиться увеличить на два и более уровня).

    Стилхед Драйв

    Изображение до события показывает общину Стилхед Драйв до ее уничтожения оползнем.

  8. На панели Содержание снова включите слой Post-Event Imagery.

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

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

  9. Снова приблизьтесь к экстенту слоя Post-Event Imagery.
  10. На ленте над картой щелкните Сохранить и выберите Сохранить как.

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

  11. В диалоговом окне Сохранить карту измените название на 2014 Oso Mudslide Imagery and Extent. Оставьте Теги и Краткую информацию без изменений и нажмите Сохранить карту.

    Копия карты сохранилась у вас на странице Мои ресурсы.

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

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

  1. Щелкните На главную и выберите Ресурсы.

    На главную

    Вкладка Мои ресурсы на странице ресурсов содержит все ваши элементы ArcGIS Online. Она содержит сохраненную копию карты 2014 Oso Mudslide Imagery and Extent, из которой вы будете строить приложение. Обладать собственной картой для построения приложения не обязательно, но все внесённые на карту изменения отразятся в вашем приложении. Используя собственную копию вы можете быть уверены, что никто другой не изменит карту.

    Примечание:

    Сохранение копии карты не дает вам права собственности на слои этой карты, такие как слой Post-Event Imagery. Если владелец этих слоев удалит их, то это повлияет и на вашу карту и на ваше приложение. В этом упражнении вам не нужно беспокоиться о потенциальной возможности внезапного удаления этих слоев.

  2. Над списком элементов щелкните Создать, а затем Web AppBuilder.

    Создание приложения с помощью Web AppBuilder

    Создание приложения с помощью Web AppBuilder

    Откроется окно Создание веб приложения.

  3. В качестве заголовка введите Oso Mudslide Before and After. Добавьте теги, описывающие географию и содержание карты, например, Осо, Вашингтон и оползень. В строке Краткая информация напишите Pre- and post-event imagery of the 2014 Oso mudslide.
  4. Щёлкните OK, чтобы открыть Web AppBuilder.

    Web AppBuilder

    Web AppBuilder откроется с картой по умолчанию. Слева от карты находится панель, которая позволяет настроить приложение. На панели четыре вкладки, каждая из которых отвечает за свой пакет настроек. Первая вкладка Тема. Она позволяет вам изменять стиль и компоновку приложения.

  5. На вкладке Тема, под Стилем, выберите черный стиль.

    Стиль

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

  6. Щелкните вкладку Карта.

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

  7. Щелкните Выбрать веб-карту. В окне Выбрать веб-карту под Моими ресурсами щелкните копию карты 2014 Oso Mudslide Imagery and Extent и нажмите ОК.

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

  8. Масштабируйте и перемещайте карту до тех пор, пока все слои не станут видимы.

    Полный экстент

  9. На вкладке Карта под Настройкой текущего экстента щелкните Использовать текущий вид карты.

    Настроить исходный экстент

Настройка виджетов

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

  1. Щелкните вкладку Виджет.

    Вкладка Виджет

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

  2. Наведите на виджет Таблица артибутов и щелкните кнопку Спрятать этот виджет.

    Виджет Таблица атрибутов

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

  3. Спрячьте виджеты Мое местоположение и Поиск.

    Виджеты Поиск и Моё местоположение

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

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

    Примечание:

    Более подробно об отдельных виджетах см. документацию Web AppBuilder for ArcGIS.

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

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

    Виджет Масштабная линейка плохо видно. Вы настроите виджет Масштабная линейка так, чтобы сделать его более читаемым.

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

    Виджет Масштабная линейка

    Появляется окно Настроить масштабную линейку.

  6. В качестве Стиля выберите Линейка.

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

    Примечание:

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

  7. Нажмите OK.

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

  8. Щелкните на первом пустом виджете.

    Первый виджет

    Откроется окно Выбор виджета, показывающее дополнительные виджеты.

  9. Щелкните виджет Шторка.

    Виджет Шторка

  10. Нажмите OK.

    Появится окно Настроить шторку.

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

    Выберите стиль инструмента Шторка

  12. В опции Выберите слой, который хотите спрятать выберите Post-Event Imagery, это слой, который вы хотите, чтобы пользователи могли спрятать.

    Post-Event Imagery выбран в качестве слоя с возможностью спрятать по умолчанию

  13. Нажмите OK.

    Виджет Шторка

    Виджет добавлен в левом верхнем углу карты. Виджет Шторка позволяет пользователям изменять видимость слоя, перетаскивая бегунок через него. В вашем случае необходимо, чтобы пользователь мог изменять видимость слоя Post-Event Imagery так, чтобы сопоставлять с нижним изображением.

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

  14. Щелкните по первому пустому виджету, теперь он под номером 1.

    Первый пустой виджет

  15. В окне Выбор виджета выберите виджет Описание и щелкните OK.

    О карте

    Появится окно Описание.

  16. В большом текстовом окне удалите иконку глобуса по умолчанию и напишите 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.
  17. Выделите текст и измените его размер на большой.

    Размер шрифта

  18. Нажмите OK.

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

  19. На вкладке Виджет щелкните следующий пустой виджет (переименованный на 1). В окне Выбор виджета выберите Измерение и щелкните OK.

    Измерение

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

  20. В окне Настроить измерение щелкните OK.

    Виджет Измерение появился рядом с виджетом Описание в левом верхнем углу карты. У вас есть место еще для двух виджетов, но вы можете оставить их пустыми. Если хотите, то посмотрите оставшиеся виджеты и, возможно, вы найдете полезные для вашего приложения.

    Наконец, вы установите виджеты на контроллере заголовка (титульной полоске).

  21. На вкладке Виджет щелкните Настроить виджеты в этом контроллере.

    Контроллер заголовка

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

  22. На вкладке Виджет наведите курсор на виджет Легенда и щелкните кнопку Удалить этот виджет.

    Виджет Легенда с нажатой кнопкой Удалить этот виджет

  23. Когда появится окно «Вы уверены, что хотите удалить этот виджет?» щелкните OK.

    Виджет Легенда удалился из контроллера заголовка. Вы настроили свои виджеты.

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

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

  1. Щелкните вкладку Атрибут.

    Вкладка Атрибут

    Вкладка Атрибут позволяет изменять некоторые детали в полосе заголовка. Вы можете изменить Название, Подзаголовок и Логотип, а также добавить ссылки. Для начала вы загрузите изображение символа округа Снохомиш, чтобы использовать в качестве логотипа.

  2. Сохраните символ Snohomish County на ваш компьютер так, чтобы легко найти его.
  3. Во вкладке Атрибут под Названием бренда щелкните лого по умолчанию рядом с названием и подзаголовком и щёлкните Пользовательский.
  4. В окне Задать логотип щёлкните Загрузить и укажите место, где только что сохранили изображение. Нажмите OK.

    Snohomish County

    Логотип также появился в приложении.

    Полоса заголовка

    Теперь вы добавите ссылки на справочную информацию о селе 2014 в Осо.

  5. Во вкладке Атрибут под Ссылками щелкните Добавить новую ссылку.

    Добавить новую ссылку

  6. В качестве имени ссылки введите Additional Information. Скопируйте и вставьте следующий путь:

    https://www.snohomishcountywa.gov/2371/SR-530-Slide-Permit-Building-Info

    Этот URL ведет на сайт округа Снохомиш на страницу оползня в Осо (названного SR 530 по имени трассы, разрушенной в ходе стихийного бедствия). Страница содержит множество ресурсов и будет хорошим стартом для пользователей, которые хотят узнать больше об этом событии.

  7. Нажмите OK.
  8. На титульной полоске справа от названия щелкните ссылку Additional Information.

    Ссылка откроется на новой странице.

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

    Сохранить

    Теперь вы запустите приложение и протестируете некоторые виджеты.

  11. Слева от кнопки Сохранено щелкните Запустить.

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

    Приложение откроется. Сначала вы протестируете виджет Шторка.

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

    Инструмент Шторка

    По умолчанию выбран слой Post-Event Imagery – слой, который вы хотите спрятать.

    Спрятать слой

    На карте появился вертикальный бегунок. Слева от бегунка слой Post-Event Imagery видим, а справа он скрыт.

  13. Перетащите бегунок влево или вправо, чтобы показать или скрыть детали.

    Регулятор Шторка

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

  14. Щелкните виджет Шторка, чтобы выключить его.

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

  15. Масштабируйте и перетяните карту так, чтобы видеть начало оползня и поселение Стилхед Драйв.

    Расстояние

  16. В левом верхнем углу карты щёлкните виджет Измерение.

    Виджет Измерение

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

    Примечание:

    Вы можете перемещать окно Измерение, перетаскивая за титульную полоску.

  17. В окне Измерение щелкните кнопку Расстояние.

    Расстояние

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

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

    Начало оползня

    Примечание:

    Не беспокойтесь по поводу точного щелчка на приведенных изображениях.

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

  19. Щелкните на конце большой стрелки, чтобы поставить другой маркер.

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

    Окно Измерение выдаст расстояние между двумя этими маркерами. Получится приблизительно 0,3–0,4 мили. Это примерно половина пути до поселения. Вы можете продолжить, добавляя к линии сегменты, щелкая другие точки на карте. Измерение прекращается, когда вы дважды щелкаете на карте.

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

    Край оползня

    Расстояние, пройденное оползнем до поселения, получится около 0,6 мили.

  21. Чтобы убрать маркеры измерений, щелкните Очистить.

    Кнопка очистки результатов измерений

  22. Закройте окно Измерение.

    Линии и маркеры уберутся с карты. Вы только что протестировали некоторые виджеты в вашем приложении. Попробуйте использовать другие виджеты на ваше усмотрение (вы можете вернуться к редактированию через страницу Мои ресурсы). Сейчас вы перейдете к завершающей части урока.

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

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

  1. Закройте приложение. В редакторе приложения, который все еще открыт, щелкните На главную и выберите Мои ресурсы.

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

  2. Отметьте карту 2014 Oso Mudslide Imagery and Extent и приложение Oso Mudslide Before and After.
  3. Над списком элементов щелкните Общий доступ. Откройте доступ для всех, вашей организации или конкретной группе, в зависимости от того, кто должен иметь доступ к вашему приложению.
  4. Нажмите Сохранить.

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

  5. Щелкните на стрелке рядом с картой Red Rock Canyon Hiking Map и выберите Просмотр информации об элементе.

    Просмотр информации об элементе

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

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

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

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

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

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

  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, и создали на ее основе веб-приложение с помощью Web AppBuilder. Вы добавили в ваше приложение виджеты, чтобы подогнать пользовательский интерфейс под ваши задачи. Затем вы выложили приложение в общий доступ и добавили метаданные. Теперь у вас есть приложение, которое вы можете показать другим людям, чтобы поведать им историю катастрофы.

Еще больше уроков вы найдете в Галерее уроков Learn ArcGIS.