Рисование и вставка фигур на карту (предварительная версия)

[Данный раздел посвящен предварительному выпуску и может быть изменен.]

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

Снимок экрана элемента управления Карта с примерами нарисованных и помеченных фигур.

Важно!

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

Предварительные условия

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

Рисование и подписывание фигур на интерактивной карте

  1. В области Свойства элемента управления Карта включите следующие свойства:

    • (Предварительная версия) Включить рисование фигур

    • (Предварительная версия) Включить удаление фигур и изменение меток

      Снимок экрана панели свойств элемента управления Карта, на котором показаны включенные свойства рисования фигур.

    Панель рисования появляется в верхнем левом углу элемента управления Карта.

    Снимок экрана элемента управления Карта в приложении на основе холста с выделенной панелью рисования.

    На панели есть три инструмента:

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

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

Чтобы удалить фигуру, выберите ее, а затем выберите корзину.

Снимок экрана элемента управления Карта с примерами форм и меток, с выделенными значком корзины и полем меток.

Импортируйте фигуры GeoJSON на карту

Если у вас уже есть фигуры, определенные в формате GeoJSON, вы можете импортировать их на свою карту. Например, у вас может быть фигура, определяющая определенную область, которую вы хотите выделить.

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

Чтобы импортировать фигуры, сначала подключите источник данных к элементу управления Карта. Затем назначьте свойства элемента управления соответствующим столбцам в источнике данных, как в следующем примере:

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

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

Описание столбца Соответствует Обязательно
Координаты GeoJSON фигуры в правильном формате ФормаГеоJSONОбъекты Обязательно
Метка фигуры МеткиФигуры Необязательно
Цвет фигуры ЦветаФигуры Необязательно

Совет

Укажите цвет с помощью имя, определение цвета CSS или значения RGBA. Если цвет не указан, для формы будут использоваться значения по умолчанию приложения.

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

Снимок экрана таблицы в Excel с данными фигуры GeoJSON.

  1. Скопируйте следующие образцы данных в пустую книгу, отформатируйте их как таблицу и назовите таблицу Seattle1. Затем подключите книгу к карте как источник данных. Подробные инструкции по аналогичному примеру см. в Использование источника данных для размещения булавок на карте.

    Район/Округ GeoJSON TotalCases Цвет
    Adams {"type":"FeatureCollection","properties":{"kind":"state","state":"WA"},"features":[{"type":"Feature","properties":{"kind":"county","name":"Adams","state":"WA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-118.9503,47.2640],[-117.9590,47.2586],[-117.9699,46.8697],[-118.0466,46.7711],[-118.2109,46.7383],[-119.2132,46.7383],[-119.3720,46.7383],[-119.3665,46.9135],[-118.9832,46.9135],[-118.9777,47.2640]]]]}}]} 1689 RGB(184,210,232)
    Asotin {"type":"FeatureCollection","properties":{"kind":"state","state":"WA"},"features":[{"type":"Feature","properties":{"kind":"county","name":"Asotin","state":"WA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-117.0388,46.4261],[-117.0607,46.3549],[-116.9841,46.2946],[-116.9676,46.2015],[-116.9238,46.1687],[-116.9841,46.0920],[-116.9183,45.9934],[-117.4825,45.9989],[-117.4825,46.1194],[-117.4222,46.1194],[-117.4222,46.3823],[-117.2305,46.4096],[-117.2305,46.4644],[-117.1977,46.4206]]]]}}]} 1096 RGB(184,210,232)
    Benton {"type":"FeatureCollection","properties":{"kind":"state","state":"WA"},"features":[{"type":"Feature","properties":{"kind":"county","name":"Benton","state":"WA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-119.8759,46.6287],[-119.6240,46.6452],[-119.5144,46.7273],[-119.4542,46.6780],[-119.2680,46.5192],[-119.2680,46.2727],[-119.0434,46.1906],[-118.9448,46.0756],[-118.9393,46.0263],[-118.9886,45.9989],[-119.1256,45.9332],[-119.4323,45.9167],[-119.5692,45.9277],[-119.6678,45.8565],[-119.8704,45.8346],[-119.8649,46.0427],[-119.8759,46.6287]]]]}}]} 13111 RGB(13,106,191)
    Chelan {"type":"FeatureCollection","properties":{"kind":"state","state":"WA"},"features":[{"type":"Feature","properties":{"kind":"county","name":"Chelan","state":"WA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-120.7029,48.5292],[-120.6536,48.5347],[-120.6262,48.4964],[-120.6646,48.4471],[-120.6481,48.3978],[-120.5605,48.3704],[-120.5879,48.3211],[-120.5112,48.3101],[-120.3524,48.2170],[-120.3633,48.1568],[-120.3250,48.1294],[-120.1443,48.0637],[-120.1443,48.0363],[-120.0895,48.0199],[-120.0512,47.9596],[-119.8704,47.9596],[-119.9964,47.7789],[-120.2100,47.7515],[-120.1990,47.6803],[-120.2374,47.5872],[-120.3031,47.5215],[-120.3195,47.4557],[-120.2921,47.4010],[-120.0895,47.3407],[-120.0950,47.2640],[-120.3907,47.2586],[-120.5276,47.3352],[-120.5605,47.3079],[-120.8015,47.4229],[-120.9165,47.4284],[-121.1137,47.5981],[-121.1301,47.6748],[-121.0644,47.7132],[-121.1192,47.7789],[-121.0699,47.8282],[-121.1520,47.8446],[-121.1739,47.8884],[-121.1630,47.9541],[-121.1192,47.9980],[-121.1520,48.0418],[-121.0151,48.0746],[-120.9439,48.1130],[-120.9548,48.1513],[-120.9056,48.1623],[-121.0041,48.2937],[-121.0699,48.3156],[-121.0425,48.3485],[-121.0644,48.3923],[-121.0370,48.4306],[-121.0480,48.4854],[-120.8563,48.5511],[-120.7851,48.5073]]]]}}]} 5324 RGB(112,187,255)
  2. Свяжите следующие расширенные свойства элемента управления Карта с соответствующими столбцами в источнике данных:

    Свойство Столбец
    ФормаГеоJSONОбъекты GeoJSON
    МеткиФигуры Район/Округ
    ЦветаФигуры Цвет

    Ваша карта должна выглядеть примерно так:

    Снимок экрана карты с импортированными фигурами, которые выделяют определенные области.

Отображение периметра и площади нарисованных или вставленных фигур (предварительная версия)

Ваши приложения могут показать периметр (в футах) и площадь (в квадратных футах) выбранной фигуры на карте.

  1. В своем приложении откройте вкладку Вставить и разверните Показать.
  2. Выберите элемент управления Text label для вставки метки на экране приложения. Переместите и измените размер, как вам нравится.
  3. Измените свойство Text элемента управления Подпись на [Карта].SelectedShape.Area или [Карта].SelectedShape.Perimeter для отображения площади или периметра выбранной фигуры. (Подсказка: введите заданное значение в строку формул или на вкладке Свойства в зависимости от того, что вы предпочитаете.)

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

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

Другие функции интерактивной карты

Другие элементы управления geospatial

Для просмотра предложений динамического адреса при вводе используйте элемент управления Ввод адреса.

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).