Adicionar uma camada de dados simples

Artigo
07/26/2023

O módulo de E/S Espacial fornece uma classe SimpleDataLayer. Essa classe facilita a renderização de recursos estilizados no mapa. Ela pode até mesmo renderizar conjuntos de dados que têm propriedades de estilo e conjuntos de dados que contêm tipos de geometria misturados. A camada de dados simples alcança essa funcionalidade encapsulando várias camadas de renderização e usando expressões de estilo. As expressões de estilo pesquisam propriedades de estilo comuns dos recursos dentro dessas camadas encapsuladas. As funções atlas.io.read e atlas.io.write usam essas propriedades para ler e gravar estilos em um formato de arquivo com suporte. Depois de adicionar as propriedades a um formato de arquivo com suporte, o arquivo pode ser usado para várias finalidades. Por exemplo, ele pode ser usado para exibir os recursos estilizados no mapa.

Além dos recursos estilizados, a SimpleDataLayer fornece um recurso de pop-up interno com um modelo de pop-up. O pop-up é exibido quando um recurso é selecionado. É possível desabilitar o recurso de pop-up padrão, se desejado. Essa camada também dá suporte a dados clusterizados. Quando um cluster é clicado, o mapa amplia o cluster e o expande em pontos individuais e subclusters.

A classe SimpleDataLayer destina-se a ser usada em grandes conjuntos de dados com muitos tipos de geometria e muitos estilos aplicados nos recursos. Quando usada, essa classe adiciona uma sobrecarga de seis camadas que contêm expressões de estilo. Portanto, há casos em que é mais eficiente usar as camadas de renderização principais. Por exemplo, use uma camada principal para renderizar alguns tipos de geometria e alguns estilos em um recurso

Usar uma camada de dados simples

A classe SimpleDataLayer é usada como as outras camadas de renderização. O código a seguir mostra como usar uma camada de dados simples em um mapa:

//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);

O snippet de código a seguir demonstra o uso de uma camada de dados simples, fazendo referência aos dados de uma fonte online.

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
          });
        }
      }
      });
    }
  });
}

A URL passada para a função loadDataSet aponta para o seguinte json:

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

Depois de adicionar recursos à fonte de dados, a camada de dados simples descobrirá a melhor maneira de renderizá-los. Os estilos de recursos individuais podem ser definidos como propriedades no recurso.

O exemplo de código acima mostra um recurso de ponto GeoJSON com uma propriedade color definida como red.

Este código de exemplo renderiza o recurso de ponto usando a camada de dados simples e aparece da seguinte maneira:

Uma captura de tela do mapa com coordenadas 0, 0 que mostra um ponto vermelho sobre a água azul, o ponto vermelho foi adicionado usando a camada de símbolo.

Observação

Observe que as coordenadas foram definidas quando o mapa foi inicializado:

centro: [-73.967605, 40.780452]

São substituídos pelo valor da fonte de dados:

"coordenadas": [0, 0]

A verdadeira potência da camada de dados simples é exibida quando:

Há vários tipos diferentes de recursos em uma fonte de dados; ou
Os recursos no conjunto de dados têm várias propriedades de estilo individualmente definidas; ou
Você não tem certeza do que o conjunto de dados contém exatamente.

Por exemplo, ao analisar feeds de dados XML, talvez você não conheça os estilos e tipos de geometria exatos dos recursos. O exemplo Opções de camada simples de dados mostra a potência da camada de dados simples renderizando os recursos de um arquivo KML. Ele também demonstra várias opções fornecidas pela classe de camada de dados simples. Para obter o código-fonte deste exemplo, vejaSimple data layer options.html nos exemplos de código do Azure Mapas no GitHub.

Uma captura de tela do mapa com um painel à esquerda mostrando as diferentes opções de camada de dados simples.

Observação

Essa camada de dados simples usa a classe popup template para exibir os balões de KML ou as propriedades de recurso como uma tabela. Por padrão, todo o conteúdo renderizado no pop-up será colocado em área restrita dentro de um iframe como um recurso de segurança. Porém, há limitações:

Todos os scripts, formulários, bloqueio de ponteiro e funcionalidade de navegação superior estão desabilitados. Os links têm permissão para abrir em uma nova guia quando selecionados.
Os navegadores mais antigos que não dão suporte ao parâmetro srcdoc em iframes ficarão limitados a renderizar uma pequena quantidade de conteúdo.

Se você confiar nos dados que estão sendo carregados nos pop-ups e potencialmente desejar que esses scripts carregados em pop-ups possam acessar seu aplicativo, poderá desabilitar isso definindo a opção sandboxContent de modelos de pop-up como false.

Propriedades de estilo com suporte padrão

Como mencionado anteriormente, a camada de dados simples encapsula várias das camadas de renderização principais: bolha, símbolo, linha, polígono e polígono extrudado. Em seguida, ela usa expressões para pesquisar propriedades de estilo válidas em recursos individuais.

As propriedades de estilo do Azure Mapas e do GitHub são os dois conjuntos principais de nomes de propriedade com suporte. A maioria dos nomes de propriedade das diferentes opções de camada do Azure Mapas tem suporte como propriedades de estilo de recursos na camada de dados simples. As expressões foram adicionadas a algumas opções de camada para dar suporte a nomes de propriedade de estilo que são comumente usados pelo GitHub. O suporte de mapa GeoJSON do GitHub define esses nomes de propriedade e eles são usados para estilizar arquivos GeoJSON que são armazenados e renderizados na plataforma. Todas as propriedades de estilo do GitHub têm suporte na camada de dados simples, exceto as propriedades de estilo marker-symbol.

Se o leitor encontrar uma propriedade de estilo menos comum, ele a converterá na propriedade de estilo do Azure Mapas mais próxima. Além disso, as expressões de estilo padrão podem ser substituídas usando a função getLayers da camada de dados simples e atualizando as opções em qualquer uma das camadas.

As seções a seguir fornecem detalhes sobre as propriedades de estilo padrão suportadas pela camada de dados simples. A ordem do nome de propriedade com suporte também é a prioridade da propriedade. Se duas propriedades de estilo forem definidas para a mesma opção de camada, a primeira na lista terá precedência mais alta. As cores podem ter qualquer valor de cor do CSS3; HEX, RGB, RGBA, HSL, HSLA ou valor de cor nomeada.

Propriedades de estilo de camada de bolha

Se um recurso for um Point ou um MultiPoint, e o recurso não tiver uma propriedade image que seria usada como um ícone personalizado para renderizar o ponto como um símbolo, o recurso será renderizado com umBubbleLayer.

Opção de camada	Nomes de propriedades com suporte	Valor padrão
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] Os valores size e scale são considerados valores escalares e são multiplicados por 8

[2] Se a opção GitHub marker-size for especificada, os seguintes valores serão usados para o raio.

Tamanho do marcador	Raio
`small`	`6`
`medium`	`8`
`large`	`12`

Os clusters também são renderizados usando a camada de bolha. Por padrão, o raio de um cluster é definido como 16. A cor do cluster varia dependendo do número de pontos no cluster, conforme definido na tabela a seguir:

N.º de pontos	Cor
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Propriedades de estilo de símbolo

Se um recurso for um Point ou um MultiPoint e o recurso e tiver uma propriedade image que seria usada como um ícone personalizado para renderizar o ponto como um símbolo, o recurso será renderizado com um SymbolLayer.

Opção de camada	Nomes de propriedades com suporte	Valor padrão
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Se a opção GitHub marker-size for especificada, os seguintes valores serão usados para a opção de tamanho do ícone.

Tamanho do marcador	Tamanho do símbolo
`small`	`0.5`
`medium`	`1`
`large`	`2`

Se o recurso de ponto for um cluster, a propriedade point_count_abbreviated será renderizada como um rótulo de texto. Nenhuma imagem é renderizada.

Propriedades de estilo de linha

Se o recurso for um LineString, MultiLineStringPolygon, ou MultiPolygon, o recurso será renderizado com um LineLayer.

Opção de camada	Nomes de propriedades com suporte	Valor padrão
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Propriedades de estilo de polígono

Se o recurso for um Polygon ou um MultiPolygon, e o recurso não tiver uma propriedade ou a propriedade height for zero, o height recurso será renderizado com um PolygonLayer.

Opção de camada	Nomes de propriedades com suporte	Valor padrão
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Propriedades de estilo de polígono extrudado

Se o recurso for um Polygon ou MultiPolygon e tiver uma propriedade height com um valor maior que zero, o recurso será renderizado com um PolygonExtrusionLayer.