Пользовательская карта на изображении

Ожидаемый результат#

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

Способ реализации#

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

Описание для внутренней сети#

Для использования страницы настройки карты требуется онлайн доступ к API Amap или добавьте в белый список следующие map API: webapi.amap.com , vdata.amap.com , restapi.amap.com .

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

Создание пользовательского изображения#

Войдите на платформу как администратор, выберите Управление системой > Географическая информация > Пользовательское изображение, кликните на иконку добавления пользовательского изображения, назовите изображение Карта ТЦ и нажмите ОК.

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

Примечания: 1. Импортированные изображения масштабируются адаптивно, также возможно масштабирование с помощью колесика мыши. 2. Максимальный размер загружаемых изображений — 2 МБ. Это значение можно увеличить до неограниченного.

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

Пользовательское изображение будет создано, а генерируемый файл JSON сохранится в директории webapps\webroot\WEB-INF\assets\map\image.

Примечание: Файлы JSON можно копировать/вставлять в другие проекты.

Создание пользовательской карты-изображения#

Подготовка данных#

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

2. Нажмите Создать -> Добавить набор данных. Затем нажмите Локальный файл Excel и выберите Загрузить Excel, как показано на следующем рисунке.

3. После загрузки нажмите Ок.

Создание компонента#

1. Нажмите Создать -> Добавить компонент в правом верхнем углу.

2. Кликните на иконку поля Зона и установите Географическая роль (Нет) на Пользовательское изображение.

3. Выберите Карта ТЦ из выпадающего списка Пользовательское изображение — название магазина автоматически сопоставится с названием области.

4. Нажмите иконку Карта областей в Типе диаграммы, перетащите поле Зона (долгота) на Горизонтальная ось, Зона (широта) на Вертикальная ось. Перетащите поле Зона в Цвет и Ярлык, а поле Продажи в Тултипы.

Отображение результата#