Добавление слоя символов на карту

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

Слои символов визуализируются с помощью WebGL. Используйте слой символов для визуализации больших коллекций точек на карте. По сравнению с HTML-маркером, слой символов отображает большое количество данных точек на карте с более высокой производительностью. Однако слой символов не поддерживает традиционные элементы CSS и HTML для стилей.

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

• JPEG
• PNG
• SVG
• БМП
• GIF (без анимации)

Добавление слоя символов

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

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

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

Существует четыре различных типа данных точек, которые можно добавить на карту:

• Геометрия точки GeoJSON — этот объект содержит только координату точки и больше ничего. atlas.data.PointВспомогательный класс можно использовать для простого создания этих объектов.
• Геометрия GeoJSON MultiPoint — этот объект содержит координаты нескольких точек и ничего больше. atlas.data.MultiPointВспомогательный класс можно использовать для простого создания этих объектов.
• Функция GeoJSON — этот объект состоит из любой геометрической фигуры и набора свойств, содержащих метаданные, связанные с геометрическим объектом. atlas.data.FeatureВспомогательный класс можно использовать для простого создания этих объектов.
• atlas.Shape класс похож на функцию GeoJSON. Оба состоят из геометрии GeoJSON и набора свойств, содержащих метаданные, связанные с этой геометрией. Если объект GeoJSON добавляется в источник данных, его можно легко отобразить в слое. Однако при обновлении свойства координаты этого объекта GeoJSON источник данных и схема не изменяются. Это обусловлено тем, что в объекте JSON нет механизма для активации обновления. Класс Shape предоставляет функции для обновления содержащихся в ней данных. При внесении изменений источник данных и схема автоматически уведомляются и обновляются.

В следующем примере кода создается геометрия типа "Точка" в формате GeoJSON, которая передается в класс atlas.Shape, чтобы упростить обновление. Центр схемы изначально используется для отрисовки символа. На карту добавляется событие щелчка, так что при его срабатывании координаты мыши используются в функции формы setCoordinates. Координаты мыши записываются во время события щелчка. Затем setCoordinates обновляет расположение символа на карте.

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-122.33, 47.64],
        zoom: 13,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    //Wait until the map resources are ready.
    map.events.add('ready', function () {

      /*Create a data source and add it to the map*/
      var dataSource = new atlas.source.DataSource();
      map.sources.add(dataSource);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

Добавление пользовательского значка в слой символов

Слои символов визуализируются с помощью WebGL. Таким образом, все ресурсы (например, образы значков) необходимо загрузить в контекст WebGL. Этот пример показывает, как добавить пользовательский значок к ресурсам карты. Этот значок используется для визуализации точечных данных с помощью пользовательского символа на карте. Свойство textField слоя символа требует указания выражения. В этом случае мы хотим отобразить свойство температуры. Так как температура является числом, ее необходимо преобразовать в строку. Кроме того, мы хотим добавить к нему "°F". Для этого объединения можно использовать выражение. ['concat', ['to-string', ['get', 'temperature']], '°F'].

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-73.985708, 40.75773],
        zoom: 12,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {

        //Create a data source and add it to the map.
        var datasource = new atlas.source.DataSource();
        map.sources.add(datasource);

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}

Настройка слоя символа

Слой символа имеет множество доступных вариантов стилизации. Пример "Параметры слоя символов" демонстрирует, как различные параметры слоя символов влияют на отрисовку. Исходный код этого примера см. в разделе "Параметры слоя символов".

Следующие шаги

Дополнительные сведения о классах и методах, которые используются в этой статье:

Дополнительные примеры кода для добавления в карты см. в следующих статьях: