Добавление простого уровня данных

Статья
07/26/2023

Модуль пространственных операций ввода-вывода предоставляет класс SimpleDataLayer. Этот класс упрощает отрисовку стилизованных функций на карте. Он может даже визуализировать наборы данных, которые обладают свойствами стиля, а также наборы данных, содержащие типы со смешанной геометрией. Простой уровень данных получает эту функциональную возможность путем переноса нескольких слоев отрисовки и использования выражений стилей. Выражения стиля выполняют поиск общих свойств стиля компонентов, находящихся в этих упакованных слоях. Функция atlas.io.read и функция atlas.io.write используют эти свойства для чтения и записи стилей в файл поддерживаемого формата. После добавления свойств в поддерживаемый формат файла этот файл можно использовать в разных целях. Например, его можно использовать для отображения на карте стилизованных функций.

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

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

Использование простого уровня данных

Класс SimpleDataLayer используется так же, как и другие слои отрисовки. В следующем коде показано, как использовать простой уровень данных на карте:

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

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

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

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

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      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);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

URL-адрес, передаваемый в функцию loadDataSet , указывает на следующий код JSON:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

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

В приведенном выше примере кода показана функция точки GeoJSON со свойством color , для которым задано значение red.

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

Снимок экрана: карта с координатами 0, 0, на котором показана красная точка над синей водой. Красная точка была добавлена с помощью слоя символов.

Примечание

Обратите внимание, что координаты, заданные при инициализации карты:

center: [-73.967605, 40.780452]

Перезаписываются значением из источника данных:

"координаты": [0, 0]

Реальная мощь простого уровня данных заметна в следующих случаях:

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

Например, при синтаксическом анализе веб-каналов данных XML стили и типы геометрии функций могут быть неизвестны в точности. В примере параметров простого слоя данных показаны возможности простого уровня данных путем отрисовки признаков KML-файла. В нем также демонстрируются различные параметры, предоставляемые классом простого уровня данных. Исходный код для этого примера см. в разделе Простой уровень данных options.html в примерах кода Azure Maps на сайте GitHub.

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

Примечание

На этом простом уровне данных класс popup template применяется для отображения всплывающих окон KML или свойств функций в виде таблицы. По умолчанию все содержимое, визуализируемое во всплывающем окне, будет изолировано внутри iframe в целях безопасности. Однако существуют определенные ограничения:

Отключены все функции скриптов, форм, блокировки указателя и верхней панели навигации. При щелчке ссылки могут открываться в новой вкладке.
Более старые браузеры, которые не поддерживают параметр srcdoc в iframe, смогут визуализировать лишь небольшой объем содержимого.

Если вы доверяете данным, загружаемым во всплывающие окна, и потенциально хотите, чтобы эти загружаемые во всплывающие окна скрипты могли получить доступ к приложению, вы можете отключить эту настройку, присвоив параметру sandboxContent popup templates значение false.

Поддерживаемые по умолчанию свойства стиля

Как упоминалось ранее, на простой уровень данных переносятся несколько основных слоев отрисовки: слои пузырьков, символов, линий, многоугольников и вытянутых многоугольников. Затем в нем используются выражения для поиска допустимых свойств стиля отдельных компонентов.

Свойства стиля Azure Maps и GitHub — это два основных набора поддерживаемых имен свойств. Большинство имен свойств различных параметров уровня Azure Maps поддерживаются на простом уровне данных в качестве свойств стиля функций. В некоторые параметры слоя были добавлены выражения в целях поддержки имен свойств стиля, которые обычно используются в GitHub. Поддержка карт GeoJSON в GitHub определяет эти имена свойств, и они используются для стиля файлов GeoJSON, которые хранятся и отрисовываются на платформе. Все свойства стиля GitHub поддерживаются на простом уровне данных, за исключением marker-symbol свойств стиля.

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

В следующих разделах содержатся сведения о свойствах стиля по умолчанию, поддерживаемых простым уровнем данных. Порядок поддерживаемого имени свойства также обозначает приоритет свойства. Если для одного и того же параметра слоя определены два свойства стиля, первый из них имеет более высокий приоритет. Цвета могут иметь любое значение цвета CSS3: HEX, RGB, RGBA, HSL, HSLA или именованное значение цвета.

Свойства стиля слоя пузырьков

Если компонент является Point или MultiPointи у него нет image свойства, которое использовалось бы в качестве настраиваемого значка для отрисовки точки в виде символа, то компонент отображается с помощью BubbleLayer.

Параметр слоя	Поддерживаемые имена свойств	Значение по умолчанию
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] Значения size и scale считаются скалярными и умножаются на 8

[2] Если указан параметр GitHub marker-size , для радиуса используются следующие значения.

Размер маркера	Радиус.
`small`	`6`
`medium`	`8`
`large`	`12`

Кластеры также визуализируются с помощью слоя пузырьков. По умолчанию радиусу кластера присвоено значение 16. Цвет кластера зависит от количества точек в кластере, как определено в следующей таблице:

Количество точек	Цвет
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Свойства стиля символа

Если компонент является Point или MultiPoint, а компонент и имеет image свойство , которое будет использоваться в качестве настраиваемого значка для отрисовки точки в виде символа, то функция отрисовывается с помощью SymbolLayer.

Параметр слоя	Поддерживаемые имена свойств	Значение по умолчанию
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Если указан параметр GitHub marker-size , для параметра размер значка используются следующие значения.

Размер маркера	Размер символов
`small`	`0.5`
`medium`	`1`
`large`	`2`

Если функция точки является кластером, point_count_abbreviated свойство отображается в виде текстовой метки. Изображение не отображается.

Свойства стиля линии

Если компонент является LineString, MultiLineString, Polygonили MultiPolygon, то компонент отрисовывается с помощью LineLayer.

Параметр слоя	Поддерживаемые имена свойств	Значение по умолчанию
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Свойства стиля многоугольника

Если компонент является Polygon или , а у компонента либо нет height свойства, либо height свойство равно нулю, то компонент отображается с помощью PolygonLayerMultiPolygon.

Параметр слоя	Поддерживаемые имена свойств	Значение по умолчанию
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Свойства стиля вытянутого многоугольника

Если компонент имеет Polygon значение или MultiPolygonи имеет height свойство со значением больше нуля, функция отображается с помощью PolygonExtrusionLayer.