Создание нового интерфейса
В ArcGIS вы можете создавать веб-приложения с помощью ArcGIS Dashboards, ArcGIS Instant Apps или ArcGIS StoryMaps. В этом проекте вы выберете ArcGIS Experience Builder для создания своего приложения, потому что он предлагает максимальный контроль и настройку компоновки.
Примечание:
Подробнее о том, какой конструктор приложений следует использовать в разных ситуациях, вы можете узнать из статьи Какой конструктор приложений выбрать?
Веб-приложения, созданные с помощью Experience Builder, также называются веб-интерфейсом. Вы начнете с создания нового интерфейса с помощью пустого полноэкранного шаблона.
- Откройте ArcGIS Online или свой портал ArcGIS Enterprise.
- Войдите под учетной записью ArcGIS.
Примечание:
Если у вас нет учетной записи ArcGIS, см. опции доступа к программному обеспечению.
- В верхней части страницы рядом со своим именем пользователя щелкните кнопку запуска приложения.
- Щелкните Experience Builder.
ArcGIS Experience Builder появится на новой вкладке.
- Щелкните кнопку Создать новый.
На странице Выбор шаблона для начала работы отображается список шаблонов, которые можно использовать для создания общих компоновок. В этом руководстве вы начнете с пустого шаблона, но вам, тем не менее, придется выбрать тип страницы: полноэкранный, сетка или прокрутка. Вы выберете полноэкранный режим, потому что это хороший выбор для приложений, где в фокусе карта, а также потому, что он дает вам наибольший контроль и свободу при работе с компоновкой. Он позволяет размещать виджеты на канве в любом месте, даже перекрывая друг друга.
- На карточке Пустое полноэкранное приложение щелкните Создать.
Примечание:
Если появится окно Начало работы, щелкните Пропустить тур.
Появится канва, где вы создадите свое веб-приложение.
- На панели инструментов конструктора в верхней части страницы щелкните Untitled Experience. Сотрите существующий текст и введите American River Marine Estuary.
Рядом с канвой открывается панель Вставить виджет. На этой панели перечислены все элементы, называемые виджетами, которые вы можете добавить в свою компоновку.
- Прокрутите вниз панель Вставка виджета и найдите раздел Компоновка.
Виджеты компоновки - это контейнеры, которые позволяют лучше организовать другие виджеты в канве. Они делают вашу компоновку аккуратной и сохраняют ее при изменении размера экрана. Проще всего разработать компоновку, добавив и расположив виджеты компоновки раньше других.
- На панели Вставить виджет перетащите виджет Строка на канву.
- На канве, на панели инструментов виджета строки нажмите кнопку Выровнять и выберите Полный размер.
Виджет строки расширяется, заполняя всю канву.
Добавление виджета карты с двумя картами
Вы уже составили две карты морских эстуариев, которые теперь нужно включить в интерфейс. Далее вы добавите виджет карты и настроите его на две карты.
- На панели Вставить виджет прокрутите страницу назад до верхней части панели и щелкните виджет Карта. Перетащите его на канву внутри виджета строки.
Карта по умолчанию также появится в канве.
- Перетащите левый или правый край виджета карты.
Появится пунктирная вертикальная линия. Виджеты строк размещают содержимое рядом друг с другом в двенадцати равных пространствах.
- Перетаскивайте края карты, пока она не заполнит все места в строке, кроме двух крайних левых.
Оставьте два левых места для легенды и других виджетов.
На другой стороне канвы видна панель Карта, в которой отображаются свойства выбранного виджета. Далее вы заполните виджет карты двумя картами, которые вы ранее создали для этого проекта.
- В панели Карта щелкните Выбрать карту.
- Внизу панели Выбрать данные щелкните Добавить новые данные.
- В окне Добавить данные щелкните вкладку ArcGIS Online. В окне поиска введите American River owner:Learn_ArcGIS.
- В результатах поиска выберите карточки Приливы и Растительный покров.
На выбранных картах появятся отметки.
- Щелкните Готово.
Две карты добавлены на панель Выбрать данные.
- На панели Выбрать данные щелкните Растительный покров и Приливы.
Две карты добавлены на панель Карта. На канве виджет карты теперь показывает одну из карт эстуариев, а не карту мира по умолчанию, которую он отображал ранее. Масштаб слишком маленький: устье реки выглядит крошечным в центре канвы. Вы измените экстент по умолчанию для виджета карты.
- На панели Карта в разделе Начальный вид, щелкните Пользовательский. Щелкните Изменить.
- В окне Изменить начальный вид переместитесь и выберите устье в центре вида.
- Нажмите OK.
На канве карта приближается до заданного масштаба и положения.
Просмотрите карты
Далее вы рассмотрите две карты и протестируете переключение между ними.
- На панели инструментов конструктора щелкните Просмотр в реальном времени.
В режиме просмотра в реальном времени вы можете взаимодействовать с канвой, как это делал бы пользователь, а не выбирать виджеты.
- В левом нижнем углу виджета карты щелкните кнопку переключения карты, чтобы показать другую карту.
- При необходимости нажмите кнопку переключения карты еще раз, пока не появится карта Приливов (с изображениями).
На этой карте определены литоральные, супралиторальные и мелководные приливные зоны эстуария. Эстуарии — это разновидность заболоченной местности. Это прибрежные водные объекты, в которых обычно смешиваются пресная вода из реки и соленая морская вода. Эта смесь обеспечивает множество питательных веществ, что приводит к высокому уровню биоразнообразия.
Этот эстуарий называется Американ-Ривер и находится на острове Кенгуру в Южной Австралии. Это важное место для ереговых и морских птиц, а также рыбы. Здесь расположен природоохранный парк "Лагуна Пеликан". Однако ему угрожает опасность, связанная с растущей застройкой, туризмом и биогенной нагрузкой.
Примечание:
Подробнее об Американ-Ривер и других морских эстуариях острова Кенгуру вы можете прочитать в отчете Управление природными ресурсами острова Кенгуру: Информационный пакет по эстуариям правительства Южной Австралии, Департамента окружающей среды и водных ресурсов.
- Снова нажмите кнопку переключения карты, чтобы просмотреть карту Растительного покрова.
На этой карте показан основной тип растительности или осадочных пород, покрывающих каждый участок эстуария. Вы могли бы включить эту информацию в первую карту, но ее легче читать на отдельной карте. Чем больше информации вы помещаете на одну карту, тем сложнее ее интерпретировать. Часто лучшим решением является создание второй карты.
- Переместите и измените масштаб карты.
- В левом верхнем углу карты щелкните кнопку Вид карты по умолчанию.
Карта возвращается к первоначальному виду, который вы настроили.
Примечание:
Если вы не видите полную компоновку на экране, в правом нижнем углу Experience Builder щелкните кнопку Подогнать ширину под текущее окно.
Настроить инструменты карты
Кнопка Вид карты по умолчанию является примером инструмента карты. Далее вы настроите другие инструменты, которые появятся поверх виджета карты. Потратьте время на то, чтобы определить, какие из них необходимы для вашего приложения. Не добавляйте что-то в компоновку только потому, что можете это сделать: вы всегда должны иметь возможность объяснить, почему это дополнение необходимо. Лишние элементы будут только отвлекать от посыла карты и могут даже запутать читателя.
- На панели Карта в разделе Инструменты отключите инструмент Поиск.
Кнопка Поиск исчезнет с карты. В эстуарии реки нет названий городов или улиц, поэтому строка поиска не нужна.
Инструмент Компас представляет собой стрелку севера. Не на каждой карте нужна стрелка севера, а на веб-картах она нужна реже, чем на статичных картах, потому что пользователи могут уменьшать масштаб, пока не увидят узнаваемую географию. Однако это приложение в первую очередь будет отображаться на устройствах с сенсорным экраном, поэтому велика вероятность того, что пользователи могут случайно повернуть карту. Вы можете облегчить им переориентацию карт, добавив стрелку севера.
- В разделе Инструменты включите инструмент Компас.
Кнопка Компас появляется на карте под кнопкой Вид карты по умолчанию.
Инструменты Слои и Базовая карта позволяют пользователям настроить, какие слои будут видны и какая базовая карта будет использоваться. Эти опции полезны, когда пользователю требуется большой контроль над исследованием для принятия решений. В данном случае вы пытаетесь рассказать управляемую историю об эстуарии реки. Предоставление пользователю способов изменения карты лишает вас контроля и может отвлекать от вашего замысла карты. Вы не будете включать инструменты Слои и Базовая карта.
Вашим пользователям не нужно вычислять площадь или расстояние, поэтому вы не будете включать инструмент Измерить, но их представление об эстуарии выиграет от лучшего понимания его размеров. На картах относительно немного визуальных индикаторов, помогающих пользователям интуитивно определить масштаб, поэтому вы добавите масштабную линейку.
- Включите инструмент Масштабная линейка.
В нижней части карты появляется масштабная линейка.
Примечание:
Обо всех инструментах карты вы можете прочитать на странице справки Виджет Карта.
- На панели инструментов конструктора отключите Просмотр в реальном времени.
Нет такого правила, которое подсказало бы, какие инструменты должны быть включены в карту. Вы должны рассматривать целесообразность каждого, исходя из цели карты, ее аудитории, посыла и того, как она будет использоваться.
Добавление заголовка с названием
Одно из преимуществ отображения карты в веб-приложении - возможность настроить значимый заголовок карты. Вы создадите заголовок для своей компоновки и добавите виджет Текст для заголовка. Заголовки и колонтитулы можно включить на панели Страница.
- На боковой панели инструментов нажмите кнопку Страница. В появившейся панели щелкните подсвеченный элемент Страница.
На другой стороне канвы появится панель Страница, где будут отображаться свойства страницы.
- В панели Страница включите переключатель Заголовок.
Синий заголовок появится поперек верхней части канвы. Виджет Строка переместится вниз, чтобы разместить его. Синий цвет заголовка по умолчанию не присутствует ни на одной из ваших карт. Чтобы сделать последовательную и целостную компоновку, придерживайтесь ограниченной палитры цветов — например, повторяйте цвета, используемые в картах.
Обе ваши карты очень красочные, и вы хотите, чтобы они выделялись. Использование нейтральных цветов, таких как черный, белый и серый, для элементов компоновки, не относящихся к карте, поможет картам выделиться. Черный — нейтральный цвет, а также цвет, используемый в картах, так что это хороший выбор для вашего заголовка.
- На панели Страница рядом с пунктом Заливка нажмите на синий квадрат. В разделе Стандартные цвета щелкните черный квадрат.
Цвет заголовка обновится. Затем вы добавите текстовый виджет для заголовка.
- На канве укажите на заголовок. Щелкните Редактировать заголовок.
- На боковой панели инструментов нажмите кнопку Вставить.
Откроется панель Вставить виджет.
- На панели Вставить виджет щелкните стрелку рядом с Ориентированный на карту, чтобы свернуть этот раздел.
- Также сверните раздел Ориентированный на данные.
- Под Элементы страницы щелкните и перетащите виджет Текст. Перетащите его на канву и поместите на заголовок.
На канве появляется виджет Текст и панель Текст. По умолчанию текст черный, он не будет виден на черном фоне заголовка, поэтому, прежде чем вводить текст, измените его цвет на белый.
- На панели Текст в разделе Формат текста щелкните кнопку Цвет шрифта. В разделе Стандартные цвета щелкните белый квадрат.
- Щелкните кнопку Полужирный.
- На канве дважды щелкните по виджету текста и введите American River Marine Estuary. Нажмите Ввод и наберите Kangaroo Island, South Australia.
Далее вы сделаете верхнюю строку текста более крупной.
- Дважды щелкните верхнюю строку текста, чтобы выделить ее. В появившейся панели инструментов измените размер шрифта на 25 и нажмите Ввод.
Теперь виджет текста недостаточно велик, чтобы показать полный заголовок. Вы увеличите его размер, чтобы заполнить заголовок.
- На панели Текст щелкните вкладку Стиль.
- Щелкните кнопку опции, расположенную сразу под вкладкой Стиль, и выберите Полный размер.
Если виджет текста будет занимать весь размер заголовка, то заголовку всегда будет отведено максимально возможное пространство для отображения текста. Это станет еще важнее, когда приложение будет просматриваться на небольших экранах.
- Нажмите на пустую часть виджета строки рядом с картой, чтобы прекратить редактирование заголовка.
- На панели инструментов конструктора нажмите кнопку Сохранить.
В этом руководстве вы создали веб-приложение с помощью ArcGIS Experience Builder. Оно содержит поле заголовка с текстом заголовка и виджет строки, содержащий виджет карты с двумя картами и несколькими инструментами карты. Вы узнали некоторые понятия дизайна, важные для разработки компоновок веб-приложений — например, как выбрать цвета для элементов, не относящихся к карте, и как определить, какие инструменты следует включить. Попробуйте следующее руководство из этой серии, Организация компоновки веб-приложения с несколькими виджетами, чтобы узнать, как добавить виджеты легенды, закладок и шторки для работы с интерфейсом American River Marine Estuary.
