Добавление слоя символов (пакет SDK для Android)
В этой статье показано, как отобразить данные точек из источника данных в качестве слоя символов на карте с помощью пакета SDK для Android в Azure Maps. Слои символов отображают точки в виде изображения и текста на карте.
Примечание.
Прекращение использования пакета SDK для Android для Azure Maps
Пакет SDK для машинного кода Azure Maps для Android теперь не рекомендуется и будет снят с 3.31.25. Чтобы избежать сбоев в работе служб, перейдите в веб-пакет SDK Azure Maps на 3/31/25. Дополнительные сведения см . в руководстве по миграции пакета SDK для Android для Azure Maps.
Совет
Слои символов по умолчанию отображают координаты всех геометрических объектов в источнике данных. Чтобы отображать в слое только геометрические объекты, присвойте параметру filter для этого слоя значение eq(geometryType(), "Point"). Если вам также нужно включить компоненты MultiPoint, присвойте параметру filter для этого слоя значение any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint")).
Необходимые компоненты
Обязательно выполните действия, описанные в кратком руководстве по созданию приложения Android. Блоки кода, приведенные в этой статье, можно поместить в обработчик событий onReady для карт.
Добавление слоя символов
Прежде чем добавить на карту слой символов, необходимо выполнить несколько действий. Сначала создайте источник данных и добавьте его на карту. Создание слоя символов. Затем передайте источник данных на слой символов, чтобы получить данные из источника данных. Наконец, добавьте данные в источник данных, чтобы отобразить что-либо.
В следующем коде показано, что следует добавить в карту после загрузки. Этот пример отображает единую точку на карте с помощью слоя символов.
//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);
//Create a point and add it to the data source.
source.add(Point.fromLngLat(0, 0));
//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source);
//Add the layer to the map.
map.layers.add(layer);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)
//Create a point and add it to the data source.
source.add(Point.fromLngLat(0, 0))
//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(source)
//Add the layer to the map.
map.layers.add(layer)
Есть три различных типа данных точек, которые можно добавить на карту:
- Описание геометрии в формате GeoJSON Multipoint — объект содержит только координаты точки. Статический метод
Point.fromLngLatможно использовать для простого создания этих объектов. - Описание геометрии в формате GeoJSON Multipoint — объект содержит только координаты нескольких точек. Передайте массив точек в класс
MultiPointдля создания этих объектов. - Функция GeoJSON — этот объект состоит из любой геометрической фигуры и набора свойств, содержащих метаданные, связанные с геометрическим объектом.
Дополнительные сведения см. в документе Создание источника данных для создания и добавления данных на карту.
В следующем примере кода создается геометрия точек в формате GeoJSON, которая передается в функцию GeoJSON и имеет значение title, добавленное к его свойствам. Свойство title отображается в виде текста над значком символа на карте.
//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);
//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(0, 0));
//Add a property to the feature.
feature.addStringProperty("title", "Hello World!");
//Add the feature to the data source.
source.add(feature);
//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source,
//Get the title property of the feature and display it on the map.
textField(get("title"))
);
//Add the layer to the map.
map.layers.add(layer);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)
//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(0, 0))
//Add a property to the feature.
feature.addStringProperty("title", "Hello World!")
//Add the feature to the data source.
source.add(feature)
//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
source, //Get the title property of the feature and display it on the map.
textField(get("title"))
)
//Add the layer to the map.
map.layers.add(layer)
На следующем снимке экрана показан код, представленный выше, с использованием значка и текстовой подписи со слоем символов.
Совет
По умолчанию слои символов оптимизируют отрисовку символов путем скрытия перекрывающихся символов. При изменении масштаба скрытые символы становятся видимыми. Чтобы отключить эту функцию и вывести все символы в любое время, для параметров iconAllowOverlap и textAllowOverlap задайте значение true.
Добавление пользовательского значка в слой символов
Слои символов преобразовываются для просмотра с помощью WebGL. Таким образом, все ресурсы (например, образы значков) необходимо загрузить в контекст WebGL. Выборка показывает, как добавить пользовательский значок в карту ресурсов. Этот значок используется для отрисовки данных точек с помощью пользовательского символа на карте. Свойство textField слоя символа требует указания выражения. В этом случае мы хотим преобразовать для просмотра свойство температуры. Так как температура является числом, ее необходимо преобразовать в строку. Кроме того, мы хотим добавить к нему "°F". Для этого объединения можно использовать выражение. concat(Expression.toString(get("temperature")), literal("°F")).
//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers);
//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);
//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773));
//Add a property to the feature.
feature.addNumberProperty("temperature", 64);
//Add the feature to the data source.
source.add(feature);
//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source,
iconImage("my-custom-icon"),
iconSize(0.5f),
//Get the title property of the feature and display it on the map.
textField(concat(Expression.toString(get("temperature")), literal("°F"))),
textOffset(new Float[]{0f, -1.5f})
);
//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers)
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)
//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773))
//Add a property to the feature.
feature.addNumberProperty("temperature", 64)
//Add the feature to the data source.
source.add(feature)
//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
source,
iconImage("my-custom-icon"),
iconSize(0.5f), //Get the title property of the feature and display it on the map.
textField(concat(Expression.toString(get("temperature")), literal("°F"))),
textOffset(arrayOf(0f, -1.5f))
)
В этом примере приведенное ниже изображение загружается в прорисовываемую папку приложения.
 |
|---|
| showers.png |
На следующем снимке экрана показан код, представленный выше, который отображает функцию точки с использованием пользовательского значка и форматированной текстовой подписи со слоем символов.
Совет
Если требуется отобразить только текст с помощью слоя символов, можно скрыть значок, задав для свойства параметров значка iconImage значение "none".
Изменение цветов символов
Пакет SDK для Android в Azure Maps поставляется с набором стандартных вариантов цвета для значка метки по умолчанию. Например, marker-red можно передать в параметр iconImage слоя символов, чтобы отобразить красную версию значка метки в этом слое.
SymbolLayer layer = new SymbolLayer(source,
iconImage("marker-red")
);
val layer = SymbolLayer(source,
iconImage("marker-red")
)
В приведенной ниже таблице перечислены все доступные имена встроенных изображений значков. Эти маркеры извлекают их цвета из ресурсов цвета, которые можно переопределить. Однако переопределение цвета одной из этих меток будет применено ко всем слоям, использующим изображение этого значка.
| Имя изображения значка | Имя ресурса цвета |
|---|---|
marker-default |
azure_maps_marker_default |
marker-black |
azure_maps_marker_black |
marker-blue |
azure_maps_marker_blue |
marker-darkblue |
azure_maps_marker_darkblue |
marker-red |
azure_maps_marker_red |
marker-yellow |
azure_maps_marker_yellow |
Кроме того, можно переопределить цвет границы всех меток, используя имя ресурса цвета azure_maps_marker_border. Цвета этих меток можно переопределить, добавив цвет с тем же именем в файле colors.xml вашего приложения. Например, следующий файл colors.xml сделает цвет метки по умолчанию ярко-зеленым.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="azure_maps_marker_default">#00FF00</color>
</resources>
Следующий код представляет собой измененную версию XML-файла вектора метки по умолчанию, который можно изменить для создания пользовательских версий метки по умолчанию. Измененную версию можно добавить в папку приложения drawable и добавить в спрайт изображений карт с помощью map.images.add, а затем использовать со слоем символов.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24.5dp"
android:height="36.5dp"
android:viewportWidth="24.5"
android:viewportHeight="36.5">
<path
android:pathData="M12.25,0.25a12.2543,12.2543 0,0 0,-12 12.4937c0,6.4436 6.4879,12.1093 11.059,22.5641 0.5493,1.2563 1.3327,1.2563 1.882,0C17.7621,24.8529 24.25,19.1857 24.25,12.7437A12.2543,12.2543 0,0 0,12.25 0.25Z"
android:strokeWidth="0.5"
android:fillColor="@color/azure_maps_marker_default"
android:strokeColor="@color/azure_maps_marker_border"/>
</vector>
Следующие шаги
Дополнительные примеры кода для добавления в карты см. в следующих статьях: