Превращение веб-карты в веб-приложение
Ваша команда согласна с тем, что веб-приложение, ориентированное на карты, является лучшим средством коммуникации для вашей истории. Вы найдете и измените веб-карту, создадите новое веб-приложение на основе карты и настроите его базовую структуру компоновки.
Поиск карты с данными о жилье
Вместо того, чтобы начинать с пустой веб-карты, вы измените существующую. ArcGIS Living Atlas of the World представляет собой тщательно отобранную коллекцию географических данных и карт. Он включает в себя Esri Maps for Public Policy, сайт, посвященный повышению уровня пространственной грамотности и грамотности данных в государственной политике. Вы будете искать на этом сайте данные и карты, связанные с жилищной политикой.
- Перейдите на сайт Esri Maps for Public Policy.
Здесь вы можете искать ресурсы данных, связанные с различными темами государственной политики. В этом уроке вы ищете веб-карту, связанную с жильем.
- Щелкните вкладку Issues.
- Щелкните вкладку Housing. В строке поиска введите Owned, rented, or vacant housing units и нажмите Enter.
- В результатах поиска щелкните заголовок веб-карты с названием Owned, rented, or vacant housing units, принадлежащей esri_demographics.
Появится страница элемента карты, где вы можете прочитать о карте и содержащихся в ней данных. На этой карте показано, где больше распространено собственное жилье, арендованное жилье или свободное жилье. Данные на этой карте взяты из American Community Survey (ACS), который проводится Бюро переписи населения США. Эта карта является хорошей отправной точкой для вашего приложения.
Примечание:
Пятилетние оценки ACS обычно используются для принятия решений в области государственной политики и охватывают широкий спектр тем, таких как бедность, доход, жилье и многое другое. Чтобы узнать больше о слоях ACS, доступных в ArcGIS Living Atlas, просмотрите Узнайте больше о своем сообществе, используя слои Census ACS в Living Atlas.
Вам нужно использовать эту карту в общедоступном веб-приложении, поэтому, прежде чем продолжить, проверьте, существуют ли какие-либо особые условия или ограничения на использование контента.
- Прокрутите вниз страницы элемента и найдите раздел Условия использования.
Веб-карта лицензируется в соответствии с Условиями использования веб-сервисов и API для Esri. Вы можете узнать больше об этих условиях, щелкнув либо View Summary либо View Terms of Use. В краткой информации поясняется, что любой может использовать эту веб-карту как для внутреннего, так и для внешнего использования при условии указания авторства Esri и поставщиков данных.
- Прокрутите вверх и найдите секцию Авторские права третьих лиц.
Это информация, необходимая для правильной атрибутации поставщиков данных. Вы будете использовать эту информацию позже.
Настройка веб-карты
На данный момент вы нашли веб-карту о занятости жилья, которую можно использовать в качестве основных ресурсов для своего веб-приложения, и подтвердили, что у вас есть разрешение на ее использование для вашего конкретного проекта. Далее вы сохраните копию веб-карты и перенастроите ее слои, чтобы они лучше соответствовали целям вашего веб-приложения.
- Прокрутите вверх страницы элемента и щелкните Войти. Войдите под учётной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- В верхней части страницы элемента щелкните кнопку Открыть в Map Viewer.
Появится карта.
- На панели Содержание (темной) щелкните кнопку Слои.
Откроется панель Слои. Перечислены три слоя, содержащие данные о жилье на уровне штата, округа и переписного участка. Каждый слой настроен так, чтобы отображаться в разных масштабах, поэтому в данный момент виден только слой Tract.
Ваша группа по защите интересов занимается жилищными вопросами на местном уровне, поэтому вас интересуют только данные на уровне переписных участков. Вы сохраните копию веб-карты только со слоем Tract.
- На панели Слои рядом со State щелкните кнопку Опции. Щелкните Удалить.
- Также удалите слой County.
Остаются только данные, относящиеся к вашему веб-приложению. Далее вы убедитесь, что он виден во всех масштабах.
- Щелкните слой Tract.
Панель Свойства появится на другой стороне карты.
Подсказка:
Если панель Свойства не видна на панели инструментов Настройки (светлая) щелкните кнопку Свойства.
- Прокрутите вниз на панели Свойства. Отрегулируйте бегунок Видимый диапазон, пока он не будет находиться в диапазоне от Весь мир до Комната.
- На панели инструментов Содержание щелкните кнопку Сохранить и открыть и щелкните Сохранить как.
- В окне Сохранить для Заголовка введите Housing map. В окне Краткая информация замените существующий текст следующим:
This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23
- Щелкните Сохранить.
Создание веб-приложения
Теперь у вас есть веб-карта, настроенная для ваших нужд. Вы создадите веб-приложение из этой карты с помощью ArcGIS Experience Builder. Вы разработаете компоновку приложения с картой и столбцом.
- На панели инструментов Содержание щелкните кнопку Создать приложение.
Появится список опций. Существует несколько продуктов ArcGIS, позволяющих создавать веб-приложения из веб-карт. Каждый предлагает разные инструменты и подходит для разных ситуаций. В этом проекте вы хотите в значительной степени контролировать внешний вид приложения, чтобы оно соответствовало как веб-карте, так и стилю вашей организации. Вы выберете ArcGIS Experience Builder, потому что он обеспечивает максимальный пользовательский контроль над настройками.
- Щелкните Experience Builder.
Появится галерея шаблонов. Для будущих проектов эти шаблоны могут сэкономить ваше время за счет предварительной настройки компоновки проекта, но в этом уроке вы начнете с чистой канвы, чтобы научиться структурировать компоновку.
- На карточке Пустое полноэкранное приложение щелкните Создать.
- Если появится окно Начало работы, щелкните Пропустить.
ArcGIS Experience Builder появляется, показывая карту в центре канвы. Вы переименуете свой интерфейс более значащим названием.
- На ленте щелкните Интерфейс без названия и введите Housing Availability.
Далее вы убедитесь, что видите всю канву.
- В правом нижнем углу экрана щелкните кнопку Подогнать ширину под текущее окно.
- Если панель Вставка виджета еще не видна, на боковой панели инструментов щелкните кнопку Вставить.
- Прокрутите вниз панель Вставка виджета, чтобы найти раздел Компоновка.
Виджеты компоновки помогают упорядочивать группы виджетов в приложении. Аккуратное изменение размера и позиционирование виджетов часто бывает проще, когда они находятся внутри виджета компоновки.
- Перетащите виджет Столбец на канву.
- На панели инструментов виджета Столбец щелкните кнопку Выровнять и выберите Полная высота.
- Щелкните кнопку Выровнять снова и щелкните Замкнуть влево.
Теперь, когда столбец на месте, вы измените размер карты. Одной из целей вашего проекта является то, что карта должна быть в центре внимания приложения, поэтому вы заставите ее заполнить всю канву.
- Щелкните виджет Карта, чтобы выбрать его. На панели инструментов карты щелкните кнопку Выровнять и выберите Полный размер.
Карта расширяется, чтобы заполнить всю канву, а ее часть скрыта за столбцом. Далее вы определите экстент карты по умолчанию в настройках свойств карты.
- На панели Карта рядом с Начальный вид щелкните стрелку, чтобы развернуть этот раздел.
- Щелкните Пользовательский и щелкните Изменить.
Появляется окно Изменить начальный вид.
- Приблизьтесь к своему сообществу или другому району США, который вас интересует, например, остров Манхэттен в Нью-Йорке.
- Нажмите OK.
Вы выполните еще несколько настроек для виджета Карта.
- На панели Карта разверните Инструменты и отключите Поиск.
Позже вы добавите виджет Поиск, который будет более управляемым.
- В нижней части панели Карта разверните Компоновка инструментов. В разделе Крупный и средний размер выберите вторую опцию.
Элементы управления навигацией по карте переместятся в правый нижний угол карты. Раньше они были скрыты за столбцом.
Наконец, вы отключите всплывающие окна. Позже в этом уроке вы добавите виджеты для отображения информации о количестве единиц жилья каждого типа в каждом районе. Эта информация сделает всплывающие окна ненужными.
- В нижней части панели Карта разверните Опции и выключите опцию Включить всплывающее окно.
- На панели инструментов конструктора нажмите кнопку Сохранить.
- Закройте вкладку браузера Map Viewer и вкладку браузера Esri Maps for Public Policy.
На этом уроке вы нашли веб-карту, изменили ее для своих задач и преобразовали в веб-приложение в ArcGIS Experience Builder.
Добавление и настройка виджетов
Теперь, когда вы настроили карту, пришло время добавить несколько виджетов, которые помогут пользователям понять и изучить данные. Вы добавите виджеты Диаграмма, Текст, Поиск и Меню.
Добавление виджета Диаграмма
Вы добавите круговую диаграмму в пустой столбец. Вы подключите диаграмму к данным на карте, чтобы она отображала жилищный состав выбранного переписного участка.
- При необходимости заново откройте приложение Housing Availability в ArcGIS Experience Builder.
- На панели Вставить виджет щелкните кнопку Поиск и введите диаграмма.
- В результатах поиска перетащите виджет Диаграмма в столбец.
В столбце появится пустой виджет Диаграмма. Остальная часть столбца выглядит прозрачной, так как по умолчанию она не имеет фонового цвета.
Далее вы настроите диаграмму так, чтобы она отображала информацию о жилье с карты.
- На панели Диаграмма щелкните Выбрать данные.
- На панели Выбрать данные разверните Housing map и щелкните Tract.
- На панели Диаграмма в разделе Tract, щелкните По умолчанию и выберите Выбранные объекты.
- В разделе Тип диаграммы щелкните Выбрать диаграмму, а на панели Тип диаграммы выберите Круговая диаграмма.
Для этих данных подходит круговая диаграмма, поскольку она разделена на три категории (занятые собственником, занятые арендатором и свободные), которые вместе составляют до 100 процентов единиц жилья.
- На панели Диаграмма в разделе Данные задайте следующие параметры:
- Для Типа категории выберите По полю.
- Для Числовых полей отметьте Vacant Housing Units, Owner-Occupied Housing Units и Renter-Occupied Housing Units.
- Для Статистики выберите Сумма.
- Для Сортировать по выберите Категория.
На диаграмме показано предупреждение Данные не найдены. Это предупреждение появляется, так как вы выбрали отображение выбранных объектов на диаграмме, а в настоящее время нет выбранных объектов.
- На панели инструментов конструктора щелкните Просмотр в реальном времени.
В режиме просмотра в реальном времени вы можете взаимодействовать со своим веб-приложением так же, как и пользователь. Вы не можете выбирать виджеты и перемещать их.
- Щёлкните на карте любой переписной участок.
Теперь, когда переписной участок выбран, круговая диаграмма становится синей, а предупреждение исчезает. Вы выйдете из режима просмотра в реальном времени, чтобы продолжить настройку виджета Диаграмма.
- Отключите Просмотр в реальном времени. Щелкните виджет Диаграмма.
Снова появится панель Диаграмма.
- На панели Диаграмма разверните Общие. В поле Заголовок диаграммы удалите текст.
- Убедитесь, что опция Легенда включена и установлена на Категория.
- Для Положения Легенды выберите По нижнему краю. Для Максимальная ширина введите 300.
Далее вы добавите цвет к диаграмме так, чтобы он соответствовал цветам на карте.
- Разверните раздел Срезы. В разделе Цвет щелкните Использовать цвет из слоя и выберите Пользовательский цвет.
- Убедитесь, что выбрано По категориям, и щелкните кнопку опций.
- На панели Цвет сектора выберите B25002_003E. Сотрите существующий текст и наберите Vacant housing units
- Измените имя B25003_002E на Owner-Occupied housing units и B25003_003E на Renter-Occupied housing units.
Надписи на легенде диаграммы изменятся соответственно.
- На панели Цвет сектора выберите цвет рядом с Vacant housing units и щелкните Дополнительно.
- Для Hex введите #aa7b7b и нажмите Enter.
Цвет обновляется до приглушенного красного цвета.
- Измените цвет для Owner-Occupied housing units на #d3c268, желтый цвет. Измените цвет для Renter-Occupied housing units на #6b99b5, голубой цвет.
Диаграмма и ее легенда теперь соответствуют цветам карты. Если выбранный переписной участок окрашен желтым цветом, самый большой фрагмент круговой диаграммы также будет желтым.
Настройка диаграммы в соответствии с цветами на карте облегчает чтение диаграммы, а также позволяет использовать ее в качестве легенды карты.
- Включите Просмотр в реальном времени и щелкайте разные участки, чтобы наблюдать за изменениями на диаграмме.
Примечание:
Несколько переписных участков будут отображать только один или два сектора, потому что они имеют только один или два типа жилья.
Настройка вида для пустых выборок
Виджет Диаграмма не будет отображать диаграмму в трех ситуациях: при первом запуске приложения, при щелчке вне переписного участка (например, по области воды или другой стране) и при щелчке по переписного участку без жилья (показан серым цветом на карте). Вы настроите работу с серыми переписными участками позже. Сначала вы выберете переписной участок, который будет использоваться в качестве объекта по умолчанию. Если переписной участок не выбран, то на диаграмме будут отображаться данные для объекта по умолчанию.
- На карте щелкните любую область воды.
Диаграмма вернется к виду Данные не найдены. Диаграмма также будет выглядеть так при первом открытии веб-приложения. Вы можете решить эту проблему, настроив вид для пустых выборок.
- На боковой панели инструментов щелкните кнопку Данные. На панели Данные щелкните карточку Housing map.
- В разделе Используется щелкните карточку Tract.
- Внизу панели отметьте Просмотр пустой выборки.
Виджет Диаграмма заполнится красными, синими и желтыми секторами. Эта настройка гарантирует, что диаграмма не будет отображаться пустой, если не выбран ни один объект.
- Рядом с отметкой щелкните кнопку Настройки.
Появится окно Просмотр пустой выборки. Здесь вы выбираете, какой переписной участок будет отображаться, если на карте не выбран ни один из них. На следующих шагах вы выберете Переписной участок 94 в округе Нью-Йорк, штат Нью-Йорк. Если вы решили центрировать карту над другим городом, вместо этого выберите участок в этом районе.
- На вкладке Фильтр щелкните Добавить и выберите Условие.
Появится незаполненное условие.
- Еще два раза нажмите Добавить и Условие.
Теперь там три условия. Вы будете использовать первое условие, чтобы сузить данные по штатам.
- Для первого условия щелкните OBJECTID и выберите State. Для второго меню выберите равно.
- Рядом с третьим меню щелкните кнопку Выберите тип источника и выберите Уникальный.
Теперь вы можете выбирать из списка всех уникальных значений в поле State.
- Щелкните третье меню. В поисковом окне введите new и выберите New York или интересующий вас штат.
- Настройте второе условие так, чтобы оно читалось как County равно New York County или интересующий вас округ. Если округ не отображается в третьем меню, щелкните Искать больше, чтобы открыть дополнительные результаты поиска.
Подсказка:
Не забудьте изменить тип источника на Уникальный.
- Настройте третье условие так, чтобы оно читалось как NAME равно Census Tract 94 или переписной участок в интересующей вас области.
- Убедитесь, что для элемента управления над условиями установлено значение И.
При выборе И объект должен удовлетворять всем трем условиям. В таблице показана одна строка для одного объекта, выбранного по трем условиям. На круговой диаграмме будут показаны результаты для этого переписного участка, если на карте ничего не выбрано.
- Щелкните Применить изменения.
Изменение внешнего вида диаграммы
Вы завершите виджет Диаграмма, настроив некоторые свойства его оформления. Вы начнете с удаления кнопок в верхней части виджета. Они предоставляют функции, которые не нужны в вашем приложении. Вы удалите их, чтобы они не отвлекали от сообщения карты.
- Отключите Просмотр в реальном времени и выберите виджет Диаграмма.
- На панели Диаграмма разверните раздел Инструменты. Отключите Выборку.
Две кнопки исчезнут из виджета Диаграмма.
- Щелкните вкладку Действие и щелкните вкладку Действие с данными. Отключите опцию Активировать действие с данными.
Третья кнопка исчезнет из диаграммы. Далее, вы измените цвет фона виджета Диаграмма.
- Щелкните вкладку Содержание и разверните раздел Оформление. Щелкните цвет фона и щелкните Дополнительно.
- Для Hex введите #000000. Для A введите 75.
A означает Альфа и управляет прозрачностью цвета. Карта теперь частично видна за виджетом Диаграмма. Однако текст практически не виден. Вы измените его на белый.
- Рядом с Элементами Текста щелкните кнопку настройки.
- На панели Элементы Текста рядом с Подписью легенды щелкните кнопку редактировать.
- Щелкните черный квадрат. В разделе Стандартные цвета выберите белый.
- На панели Диаграмма разверните раздел Сектора. Измените цвет Контура на черный.
Готовый виджет Диаграмма имеет белый текст на темном фоне.
Добавление виджета Текст
Далее вы добавите Текст, чтобы придать контекст карте, включая заголовок и подтверждение данных. Вы отформатируете различные части текста, чтобы сделать его более читаемым, и добавите несколько ссылок, по которым пользователи вашего приложения смогут найти дополнительную информацию о данных, отображаемых на карте.
- На боковой панели инструментов нажмите кнопку Вставить. На панели Вставить виджет очистите поиск.
- В разделе Элементы страницы перетащите виджет Текст в столбец под диаграммой.
Виджет Текст автоматически разместится под виджетом Диаграмма с небольшим промежутком между ними.
- Дважды щелкнув виджет Текст, скопируйте и вставьте следующий текст:
Owned, Rented, or Vacant?
Click a Census Tract to see housing information for that area.
Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.
Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2019-2023 5-year estimates, Table B25002.
Включите пробелы между строками текста. Третья строка текста станет более понятной позже, когда вы добавите динамические элементы.
Подсказка:
Используйте Ctrl+Shift+V или Command+Shift+V, чтобы вставить текст без форматирования.
Далее вы измените высоту виджета Текст.
- На панели Текст щелкните вкладку Стиль. Рядом с Высотой щелкните кнопку со стрелкой и выберите Авто.
Благодаря этой настройке виджет Текст всегда будет достаточно, но не слишком высоким, чтобы можно было увидеть все его содержимое.
Далее вы выберете те же цвета текста и фона, что и для виджета Диаграмма.
- На панели Текст рядом с Фоном щелкните кнопку Быстрый стиль и щелкните Пользовательский.
- Щелкните цвет Заливки и в разделе Последние цвета выберите полупрозрачный черный цвет, который вы создали для фона круговой диаграммы.
- На панели Текст щелкните вкладку Содержание.
- В разделе Формат текста щелкните кнопку Цвет шрифта. В разделе Стандартные цвета выберите белый.
- Нажмите кнопку выравнивания По центру.
Текст диаграммы теперь белый и выровнен по центру. Далее вы отформатируете первую строку текста - заголовок вашего приложения - так, чтобы она была крупнее и жирнее.
- Выделите первую строку текста. На панели инструментов текст щелкните кнопку Полужирный и измените размер на 25 пикселов.
Подсказка:
Если панель инструментов текст не отображается, измените свойства шрифта на вкладке Содержание на панели Текст.
Затем вы включите ссылку на ресурс United States Census Bureau для читателей, которые могут не знать, что такое переписной участок.
- Во второй строке текста выделите слова Census Tract. На панели Текст на вкладке Содержание в разделе Форматировать текст щелкните кнопку Ссылка.
- В панели Задать ссылку для Ссылка на выберите URL. Для URL скопируйте и вставьте https://www2.census.gov/geo/pdfs/reference/GARM/Ch10GARM.pdf.
- Для опции Открыть в выберите Новом окне. Нажмите OK.
- Сделайте текст Census Tract полужирным.
Вы также получите ссылку на дополнительную информацию о American Community Survey. Ваша визуализация данных будет считаться более достоверной, если она предоставит информацию о том, как данные были собраны и кем.
- В последней сроке выделите текст American Community Survey (ACS) и свяжите его со следующим URL-адресом: https://www.census.gov/programs-surveys/acs/about.html.
- Сделайте текст American Community Survey (ACS) полужирным.
Поскольку виджет Текст содержит заголовок карты, вы поместите его вверху столбца.
- Перетащите виджет Диаграмма под виджет Текст.
Вы также уберете зазор между элементами столбца.
- Щелкните пустую нижнюю часть столбца или промежуток между виджетами Текст и Диаграмма, чтобы выбрать столбец.
- На панели Столбец для Зазор введите 0 пикселов.
Теперь виджеты Текст и Диаграмма отображаются как один элемент.
Добавление динамического текста
В третью строку текста вы добавите информацию о жилье, которая будет обновляться, чтобы отражать выборки на карте, так же, как и на диаграмме. Вы видели поля, доступные в данных, при настройке круговой диаграммы. Вы отобразите некоторые из этих полей в виджете Текст.
- Выберите виджет Текст. На панели Текст включите Подключение к данным. Щелкните Выбрать данные.
- На панели Выбрать данные разверните Housing map и щелкните Tract.
Теперь у виджета Текст есть доступ к данным жилья на карте.
- В виджете Текст во втором предложении выделите слово Tract.
Вы замените этот текст динамическим содержимым.
- На панели инструментов виджета Текст щелкните кнопку Динамическое содержимое.
- В окне Динамическое содержимое щелкните поле NAME.
В виджете Текст выделенный текст будет заменен на {NAME}. Также был добавлен дополнительный пробел между полем и запятой.
- Удалите дополнительный пробел.
- Замените следующие слова следующими полями:
- Замените слово County полем County.
- Замените слово State полем State.
- Замените слово Rent полем Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent).
- Замените слово Value полем Median Home Value (for Owner-Occupied Housing Units).
Подсказка:
Чтобы увидеть полное имя поля, наведите курсор на поле.
- Удалите лишние пробелы.
- Выделите все динамические поля полужирным шрифтом.
- Включите Просмотр в реальном времени и щелкайте по разным переписным участкам на карте.
Динамический текст обновляется, отражая информацию о жилье для выбранного участка.
Добавьте текст для переписных участков без жилья
Вы продублируете текстовый виджет и настроите его для вывода сообщения в случае, когда диаграмма пуста.
- Включите Просмотр в реальном времени.
- Щёлкните на карте любой серый переписной участок, например Центральный парк в Нью-Йорке.
Диаграмма исчезнет.
- Отключите Просмотр в реальном времени.
- Щелкните текстовый виджет. На его панели инструментов нажмите кнопку Дублировать.
- В новом текстовом виджете замените Owned, Rented, or Vacant? на This census tract contains no housing units. Пожалуйста, выберите другой переписной участок.
- Удалите остальной текст в этом виджете.
Далее вы настроите текстовый виджет так, чтобы текст отображался только при выборе серого переписного участка.
- При необходимости выберите новый текстовый виджет. Прокрутите вниз панель Текст 2 и включите Динамический стиль.
Эта опция доступна, потому что текстовый виджет, как и тот, с которого он был скопирован, связан с данными.
- Рядом с Динамическим стилем щелкните кнопку Настройки.
- На панели Динамический стиль убедитесь, что выбрана опция Использовать атрибут и статистику.
- Щелкните меню и выберите Total Housing Units.
- Щелкните Добавить условие стиля.
- Во втором меню введите 0 и нажмите Enter.
- Разверните раздел Формат текста. Щелкните ## и введите 20 пикселов, чтобы изменить размер шрифта.
Вы задали, как будет отображаться текст в случае, если в выбранном переписном участке нет жилищных единиц. Далее вы настроите отображение текста при выборе синего, красного или желтого переписного участка.
- Снова щелкните Добавить условие стиля. Во втором условии для параметра Если значение выберите не равно.
- Во втором меню введите 0 и нажмите Enter.
- Под вторым условием разверните раздел Формат текста. Щелкните ## и введите 0.
Размер шрифта изменится на 4. Это минимально возможный размер шрифта.
- Щелкните кнопку цавет шрифта. В разделе Стандартные цвета выберите Прозрачный.
- Включите Просмотр в реальном времени и протестируйте, щелкая по разным переписным участкам на карте.
Когда выбран участок синего, красного или желтого цвета, текст не видно. Когда выбран серый участок, виджет диаграммы пуст, но текст отображается.
Добавление виджета Поиск
Ранее вы удалили панель поиска из виджета Карта. Теперь вы замените ее виджетом Поиск. Этот виджет предлагает больше возможностей для настройки, чем встроенный инструмент. Например, вы можете разместить его в любом месте и изменить его внешний вид.
- Отключите Просмотр в реальном времени. На панели Вставить виджет в группе Ориентированный на данные, щелкните виджет Поиск и перетащите его на карту.
- Разместите виджет Поиск в правом верхнем углу карты.
Текст подсказки виджета Поиск по умолчанию - Find address or place (Найти адрес или место). Вы перефразируете этот текст.
- На панели Поиск в разделе Источник щелкните Добавить пользовательские источники поиска и выберите ArcGIS World Geocoding Service.
Появится панель Задать источник локатора.
- На панели Установить источник локатора в разделе Параметры поиска для Подсказки введите Search for your area.
Текст подсказки в виджете Поиск изменится.
Далее вы подключите виджет Поиск к виджету Карта с действием.
- На панели Поиск щелкните вкладку Действие. Щелкните Добавить триггер.
- На панели Выбрать триггер щелкните Изменения выборки записей.
- В разделе Виджеты щелкните Карта. В разделе Выбрать действие щелкните Переместить к.
- Закройте панель Настройки действия.
Вы проверите виджет Поиск, чтобы убедиться, что данное действие настроено правильно.
- Включите Просмотр в реальном времени. В виджете Поиск введите название места. В результатах поиска щелкните одно из названий мест.
Карта приблизится к выбранному местоположению.
- На карте рядом с элементами управления масштабированием щелкните кнопку На главную.
- На панели инструментов конструктора отключите Просмотр в реальном времени и щелкните Сохранить.
Добавление страницы
Ваша визуализация данных завершена. Далее вы добавите соответствующую статью, написанную вашими коллегами. Можно добавить ссылку на историю в виджет Текст, но будет лучше, если эта история будет более заметной и будет восприниматься как часть веб-приложения. Вы добавите в приложение вторую страницу и встроите в нее историю.
- На боковой панели инструментов нажмите кнопку Страница.
- На панели Страница щелкните кнопку Добавить страницу и щелкните опцию Пустое полноэкранное приложение.
Появится новая пустая канва.
- На панели Страница переименуйте Страницу 2 в Историю.
- Переименуйте Страницу в Карту.
- На панели Вставить виджет добавьте виджет Встроить на канву.
- На панели инструментов виджета Встроить щелкните кнопку Выровнять и выберите Полный размер.
В этом руководстве вы встроите статью How the Age of Housing Impacts Affordability, написанную Стивеном Авилесом из команды Esri Policy Maps.
- На панели Встроить для опции Встроить по выберите URL.
- Вставьте следующий URL-адрес: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.
История появляется на канве. Она была создана в ArcGIS StoryMaps.
Добавление виджета Меню
Далее вы добавите виджет Меню. Он даст пользователям возможность переключаться между двумя страницами вашего приложения. Чтобы меню не скрывало части истории, вы сначала добавите заголовок на страницу.
- На боковой панели инструментов нажмите кнопку Страница. На панели Страница щелкните страницу История.
- На панели История включите Заголовок.
В верхней части страницы появится синяя полоса.
- Для Высоты введите 60 пикселов.
- Наведите курсор на заголовок и щелкните Редактировать заголовок.
- На панели Вставить виджет в группе Меню и панели инструментов добавьте виджет Меню к заголовку страницы.
- Прикрепите виджет Меню к правой стороне.
- На панели Меню на вкладке Содержание для Стиля выберите Знак.
Синий цвет заголовка и виджета Меню не соответствует остальной части вашего приложения. Вместо того, чтобы менять цвета в нескольких местах, вы измените тему приложения.
- На боковой панели инструментов нажмите кнопку Тема. На панели Тема щелкните Перо.
Заголовок становится белым, а знак меню становится темно-серым.
Виджет Меню позволяет пользователям переключаться с истории на карту. Вы добавите тот же виджет Меню на страницу карты, чтобы она также могла переключаться на историю.
- Откройте панель Страница и щелкните страницу Карта.
Вам не нужно добавлять заголовок на страницу, так как пользователи могут перемещаться по карте, чтобы увидеть области, скрытые виджетами.
- На панели Вставить виджет добавьте виджет Меню на страницу.
- На панели Меню 2 для Стиля выберите Знак.
- Разместите виджет меню в верхнем левом углу приложения. Переместите виджет Поиск ниже, чтобы освободить место.
- Включите Просмотр в реальном времени. Щелкайте кнопки меню, чтобы проверить переключение между двумя страницами.
- На панели Страница убедитесь, что кнопка Сделать главной страницей видна рядом со страницей Карта.
Эта кнопка указывает, какая страница является главной. Главная страница появится при первом запуске приложения.
- Щелкните Сохранить.
Вы создали веб-приложение с двумя страницами, содержащими карту и историю. Вы настроили виджеты Карта, Столбец, Диаграмма, Текст, Поиск, Встроить и Меню. Вы подключили виджеты с помощью действий и динамического содержимого, чтобы помочь пользователям узнать о наличии жилья.
Оптимизация приложения для мобильных устройств
На данный момент вы достигли четырех целей веб-приложения:
- Карта должна быть в фокусе приложения.
- Приложение должно позволять пользователям искать свой собственный адрес или области интереса.
- Приложение должно включать динамический текст и диаграммы, чтобы пользователи могли исследовать данные и взаимодействовать с ними.
- Карта должна сопровождаться репортажем.
Осталась одна цель: приложение должно работать как на мобильном устройстве, так и на экране настольного компьютера.
В настоящее время ваше веб-приложение хорошо выглядит только на большом экране. Чтобы закончить проект, вы будете настраивать элементы, пока приложение не будет хорошо выглядеть на экране любого размера.
Оптимизация страницы истории для мобильных устройств
Чтобы страница истории работала на экранах разных размеров, необходимо изменить размер виджета Меню с относительного (в процентах) на абсолютный (в пикселах).
- При необходимости заново откройте приложение Housing Availability в ArcGIS Experience Builder. Включите Просмотр в реальном времени.
- При необходимости в меню приложения щелкните ячейку История, чтобы просмотреть страницу История.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с маленьким экраном, чтобы переключиться в режим маленького экрана.
Этот вид имитирует то, как ваше приложение будет выглядеть на мобильном устройстве.
- Прокрутите историю, чтобы убедиться, что ни текст, ни карты не обрезаны.
Истории ArcGIS StoryMaps уже настроены на изменение размера для мобильных устройств. Однако виджет Меню в заголовке страницы слишком короткий, чтобы его можно было прочитать.
Вы можете создать собственную компоновку для небольших экранов, но в этом случае вы можете решить эту проблему, изменив размер виджета Меню для всех размеров экрана. Решения, которые работают на всех размерах экрана, предпочтительнее пользовательских решений для разных размеров экрана, поскольку они упрощают редактирование и обслуживание приложения в будущем.
- На панели инструментов конструктора щелкните кнопку Изменить страницу для устройств с большим экраном.
Необходимо переключиться в режим большого экрана, чтобы перенастроить виджеты.
- Отключите Просмотр в реальном времени. Щелкните Редактировать заголовок и щелкните виджет Меню.
- На панели Меню щелкните вкладку Стиль. Найдите свойство Ширина.
Свойство Ширина определяется в процентах от ширины экрана, которое становится слишком маленьким на узких экранах. Вместо этого вы зададите ширину в пикселах, чтобы убедиться, что она всегда одинакова, независимо от размера экрана.
- Рядом с Шириной щелкните кнопку Изменить единицы и выберите px.
- Установите Ширину на 250 пикселов.
- Переключитесь в режим маленького экрана.
Меню теперь достаточно большое, чтобы читать его на маленьком экране.
Оптимизация страницы карты для мобильных устройств
Далее вы настроите страницу карты, чтобы она работала на всех размерах экрана. Вы измените некоторые элементы на абсолютные размеры. Вы также настроите собственную компоновку для мобильных устройств.
- На панели Страница щелкните страницу Карта.
Все виджеты на этой странице слишком узкие. Большая часть текста не читается.
- На панели инструментов конструктора щелкните кнопку Отредактировать страницу для устройств со средним экраном, чтобы переключиться в режим среднего экрана.
Этот вид имитирует то, как ваше приложение будет выглядеть на планшете. Выглядит лучше, но легенда диаграммы и меню по-прежнему обрезаны. Вы отрегулируете их ширину до абсолютного размера.
- Переключитесь в режим большого экрана.
- Выберите виджет Меню. На панели Меню 2 на вкладке Стиль измените Ширину на 250 пикселов.
- Выберите виджет Поиск. Измените его Ширину на 250 пикселов.
- Щелкните под диаграммой, чтобы выбрать виджет Столбец. Установите его Ширину на 300 пикселов.
- Переключитесь в режим среднего экрана.
Изменения компоновки действуют на экране этого размера.
- Переключитесь в режим маленького экрана.
Изменения здесь неэффективны. Карта почти полностью скрыта за виджетами Текст и Диаграмма. Вы поговорили с коллегами и решили, что диаграмма не нужна для мобильной версии вашего веб-приложения. Вы скроете ее из виду, когда размер экрана небольшой. Для этого вам нужно создать собственную компоновку для маленьких экранов.
- Рядом с канвой щелкните Пользовательский.
- Во всплывающем окне предупреждения щелкните OK.
Теперь вы можете вносить изменения в компоновку, которые повлияют на приложение только при просмотре на маленьких экранах. Вы скроете виджет Диаграмма так, чтобы он появлялся, когда экран большой, и исчезал, когда экран маленький.
- Щелкните виджет Диаграмма. На его панели инструментов щелкните кнопку Переместить в лист ожидания.
Виджет Диаграмма исчезнет.
Важно, чтобы вы не удаляли виджет Диаграмма. Даже если вы находитесь в пользовательском режиме, если вы удалите виджет, он будет удален из всех версий приложения. Лист ожидания позволяет удалить виджеты из поля зрения, не удаляя их.
Подсказка:
Если вы случайно удалили виджет Диаграмма, щелкните кнопку Отмена на панели инструментов конструктора. Если позднее вы решите добавить Диаграмму обратно, вы сможете найти ее на панели виджета Вставка на вкладке Ожидающие.
- Выберите текстовый виджет, содержащий невидимый текст, и также переместите его в лист ожидания.
Далее вы измените размер и положение виджета Текст так, чтобы он не скрывал виджеты Поиск и Меню.
- Щелкните оставшийся виджет Текст. Перетащите его за пределы столбца и поместите на карту.
- Переместите виджет Столбец в лист ожидания.
- Прикрепите виджет Текст к левому нижнему углу.
- На панели Текст щелкните вкладку Стиль. Измените Ширину на 90 процентов, а Высоту - на 35 процентов.
Этот размер не позволяет элементам управления навигацией по карте скрывать какой-либо текст.
Примечание:
В пользовательском режиме вы можете изменить размер и положение виджетов, не затрагивая другие размеры экрана. Однако изменения других свойств будут видны на всех размерах экрана. Например, если вы выберете меньший размер шрифта для виджета Текст, он будет отображаться меньшего размера на всех размерах экрана. Если вам нужен меньший размер шрифта только на маленьких экранах, вы должны создать копию виджета Текст, переместить исходный виджет в лист ожидания и изменить размер шрифта в новом виджете.
Завершение и публикация
Чтобы завершить проект, вы предварительно просмотрите, опубликуете и поделитесь веб-приложением.
- На панели инструментов конструктора нажмите кнопку Сохранить.
- Когда появится сообщение Сохранено успешно, нажмите кнопку Предварительный просмотр.
Появится новое окно браузера с вашим приложением.
- Протестируйте приложение, исследуя карту, диаграмму и историю.
- Измените размер окна браузера, чтобы протестировать компоновку приложения на разных размерах экрана.
- Вернитесь на вкладку редактирования Experience Builder. На панели инструментов конструктора щелкните Опубликовать.
Вы также обновите настройки общего доступа к приложению, чтобы сделать его общедоступным.
- Щелкните кнопку Дополнительно и щелкните Изменить настройки публикации.
Отобразится страница элемента для веб-приложения.
- Щёлкните Опубликовать.
- Щелкните Для всех (общий) и затем Сохранить.
- В окне Публикация элемента успешно обновлена щелкните Просмотр публикации.
Необходимо настроить общий доступ не только для приложения, но и для веб-карты.
- В окне Просмотр публикации щелкните Обновить параметры публикации.
На этом уроке вы создали многостраничное веб-приложение с картой и историей о заполняемости жилья в США. Вы добавили интерактивные виджеты, чтобы улучшить понимание данных читателями. Наконец, вы изменили компоновку, чтобы она работала на экранах всех размеров.
Теперь вы и ваши товарищи по команде можете размещать свою работу на веб-сайте вашей группы защиты жилья или делиться ссылками на веб-приложение в социальных сетях.
Вы можете найти больше учебных пособий в галерее учебных пособий.
