Adicionar uma camada de dados simples

Artigo
06/19/2023

O módulo de E/S espacial fornece uma SimpleDataLayer classe. Esta classe facilita a composição de funcionalidades com estilo no mapa. Pode até compor conjuntos de dados que têm propriedades de estilo e conjuntos de dados que contêm tipos de geometria mista. A camada de dados simples alcança esta funcionalidade ao encapsular várias camadas de composição e ao utilizar expressões de estilo. As expressões de estilo procuram propriedades de estilo comuns das funcionalidades dentro destas camadas encapsuladas. A atlas.io.read função e a atlas.io.write função utilizam estas propriedades para ler e escrever estilos num formato de ficheiro suportado. Depois de adicionar as propriedades a um formato de ficheiro suportado, o ficheiro pode ser utilizado para várias finalidades. Por exemplo, o ficheiro pode ser utilizado para apresentar as funcionalidades com estilo no mapa.

Além das funcionalidades de estilo, o SimpleDataLayer fornece uma funcionalidade de pop-up incorporada com um modelo de pop-up. O pop-up é apresentado quando uma funcionalidade é clicada. A funcionalidade de pop-up predefinida pode ser desativada, se assim o desejar. Esta camada também suporta dados em cluster. Quando um cluster é clicado, o mapa amplia o cluster e expande-o em pontos e subclusters individuais.

A SimpleDataLayer classe destina-se a ser utilizada em grandes conjuntos de dados com muitos tipos de geometria e muitos estilos aplicados às funcionalidades. Quando utilizada, esta classe adiciona uma sobrecarga de seis camadas que contêm expressões de estilo. Assim, há casos em que é mais eficiente utilizar as camadas de composição principais. Por exemplo, utilize uma camada principal para compor alguns tipos de geometria e alguns estilos numa funcionalidade

Utilizar uma camada de dados simples

A SimpleDataLayer classe é utilizada como as outras camadas de composição são utilizadas. O código seguinte mostra como utilizar uma camada de dados simples num 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 fragmento de código seguinte demonstra a utilização de uma camada de dados simples, que referencia os dados de uma origem 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
          });
        }
      }
      });
    }
  });
}

O URL transmitido para a loadDataSet função aponta para o seguinte json:

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

Depois de adicionar funcionalidades à origem de dados, a camada de dados simples descobre a melhor forma de as compor. Os estilos para funcionalidades individuais podem ser definidos como propriedades na funcionalidade.

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

Este código de exemplo compõe a funcionalidade ponto com a camada de dados simples e aparece da seguinte forma:

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

Nota

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

centro: [-73.967605, 40.780452]

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

"coordenadas": [0, 0]

O poder real da camada de dados simples surge quando:

Existem vários tipos diferentes de funcionalidades numa origem de dados; ou
As funcionalidades no conjunto de dados têm várias propriedades de estilo definidas individualmente nas mesmas; ou
Não tem a certeza do que o conjunto de dados contém exatamente.

Por exemplo, ao analisar feeds de dados XML, poderá não conhecer os estilos exatos e os tipos de geometria das funcionalidades. O exemplo De opções de camada de dados simples mostra o poder da camada de dados simples ao compor as funcionalidades de um ficheiro KML. Também demonstra várias opções que a classe de camada de dados simples fornece. Para obter o código fonte deste exemplo, veja Simple data layer options.html in the Azure Maps code samples in GitHub (Exemplos de código de Azure Maps no GitHub).

Uma captura de ecrã do mapa com um painel à esquerda a mostrar as diferentes opções de camada de dados simples.

Nota

Esta camada de dados simples utiliza a classe de modelo de pop-up para apresentar balões KML ou propriedades de funcionalidades como uma tabela. Por predefinição, todos os conteúdos compostos no pop-up serão em sandbox dentro de um iframe como uma funcionalidade de segurança. No entanto, existem limitações:

Todos os scripts, formulários, bloqueio de ponteiro e funcionalidade de navegação superior estão desativados. As ligações podem ser abertas num novo separador quando clicadas.
Os browsers mais antigos que não suportam o srcdoc parâmetro em iframes serão limitados à composição de uma pequena quantidade de conteúdo.

Se confiar nos dados que estão a ser carregados para os pop-ups e potencialmente pretender que estes scripts carregados em pop-ups possam aceder à sua aplicação, pode desativar esta opção ao definir a opção de modelos sandboxContent de pop-up como falso.

Propriedades de estilo predefinidas suportadas

Conforme mencionado anteriormente, a camada de dados simples molda várias das camadas de composição principais: bolha, símbolo, linha, polígono e polígono extrudido. Em seguida, utiliza expressões para procurar propriedades de estilo válidas em funcionalidades individuais.

Azure Maps e as propriedades de estilo do GitHub são os dois conjuntos principais de nomes de propriedades suportados. A maioria dos nomes de propriedades das diferentes opções de camada do Azure Maps são suportados como propriedades de estilo das funcionalidades na camada de dados simples. Foram adicionadas expressões a algumas opções de camada para suportar nomes de propriedades de estilo que são normalmente utilizados pelo GitHub. O suporte de mapa GeoJSON do GitHub define estes nomes de propriedades e são utilizados para modelar ficheiros GeoJSON que são armazenados e compostos na plataforma. Todas as propriedades de estilo do GitHub são suportadas na camada de dados simples, exceto as propriedades de marker-symbol estilo.

Se o leitor encontrar uma propriedade de estilo menos comum, converte-a na propriedade de estilo Azure Maps mais próxima. Além disso, as expressões de estilo predefinidas podem ser substituídas com a getLayers função da camada de dados simples e atualizando as opções em qualquer uma das camadas.

As secções seguintes fornecem detalhes sobre as propriedades de estilo predefinidas suportadas pela camada de dados simples. A ordem do nome da propriedade suportada também é a prioridade da propriedade. Se duas propriedades de estilo estiverem definidas para a mesma opção de camada, a primeira na lista tem precedência superior. As cores podem ser qualquer valor de cor CSS3; HEX, RGB, RGBA, HSL, HSLA ou valor de cor com nome.

Propriedades do estilo de camada de bolhas

Se uma funcionalidade for uma Point ou uma MultiPoint, e a funcionalidade não tiver uma image propriedade que seria utilizada como um ícone personalizado para compor o ponto como um símbolo, a funcionalidade é composta com um BubbleLayer.

Opção camada	Nomes de propriedade suportados	Valor predefinido
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

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

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

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

Os clusters também são compostos com a camada de bolhas. Por predefinição, o raio de um cluster está definido como 16. A cor do cluster varia consoante o número de pontos no cluster, conforme definido na tabela seguinte:

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

Propriedades de estilo de símbolo

Se uma funcionalidade for um Point ou um MultiPoint, e a funcionalidade e tiver uma image propriedade que seria utilizada como um ícone personalizado para compor o ponto como um símbolo, a funcionalidade é composta com um SymbolLayer.

Opção camada	Nomes de propriedade suportados	Valor predefinido
`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 são utilizados para a opção de tamanho do ícone.

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

Se a funcionalidade de ponto for um cluster, a point_count_abbreviated propriedade é composta como uma etiqueta de texto. Não é composta nenhuma imagem.

Propriedades de estilo de linha

Se a funcionalidade for , LineStringMultiLineString, Polygonou MultiPolygon, a funcionalidade é composta com um LineLayer.

Opção camada	Nomes de propriedade suportados	Valor predefinido
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Propriedades do estilo do polígono

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

Opção camada	Nomes de propriedade suportados	Valor predefinido
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Propriedades do estilo de polígono extrudido

Se a funcionalidade for uma Polygon ou uma MultiPolygon, e tiver uma height propriedade com um valor superior a zero, a funcionalidade será composta com um PolygonExtrusionLayer.