Adicionar uma camada de dados simples

2025-04-18

O SDK da Web do Azure Maps fornece um módulo de E/S espacial que inclui uma SimpleDataLayer classe. Essa classe facilita a renderização de recursos com estilo em um mapa. Ele pode até renderizar 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 essa funcionalidade encapsulando várias camadas de renderização e usando expressões de estilo. As expressões de estilo pesquisam camadas encapsuladas para propriedades de estilo comuns. As funções atlas.io.read e atlas.io.write usam essas propriedades para ler e gravar estilos em um formato de ficheiro suportado. Ao adicionar propriedades a um formato de arquivo compatível, você pode usar o arquivo para fins como exibir recursos com estilo em um mapa.

A SimpleDataLayer classe também fornece um recurso de janela instantânea embutido com modelo de janela instantânea. O pop-up aparece quando um recurso é selecionado. Esta camada também suporta dados clusterizados. Quando um cluster é selecionado, o mapa amplia o cluster e o expande em pontos e subclusters individuais. Você pode desativar o recurso pop-up se não precisar dele.

A SimpleDataLayer classe destina-se a ser usada em grandes conjuntos de dados que incluem recursos com muitos tipos e estilos de geometria aplicada. Quando você usa essa classe, ela adiciona uma sobrecarga de seis camadas que contêm expressões de estilo. Se você só precisar renderizar alguns tipos e estilos de geometria em um recurso, talvez seja mais eficiente usar uma camada de renderização principal. Para obter mais informações, consulte Adicionar uma camada de bolhas ao mapa, Adicionar uma camada de linha ao mapa e Adicionar uma camada de polígono ao mapa.

Use uma camada de dados simples

Você pode usar a SimpleDataLayer classe 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 trecho de código a seguir demonstra como usar uma camada de dados simples que faz referência a dados de uma fonte online:

<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>

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

            //Add authentication details to connect 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.
            const dataSet = {
                type: "FeatureCollection",
                bbox: [0, 0, 0, 0],
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [0, 0]
                        },
                        properties: {
                            color: "red"
                        }
                    }
                ]
            };

            loadDataSet(dataSet);

            function loadDataSet(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
                    });
                }
            }
        });
    }
</script>

Quando você adiciona recursos à fonte de dados, a camada de dados simples os renderiza da maneira mais apropriada. Você pode definir estilos como propriedades para cada recurso individual.

O código de exemplo anterior mostra um recurso de ponto GeoJSON (Geographic JavaScript Object Notation) com uma color propriedade definida como red.

O código de exemplo processa o recurso de ponto usando a camada de dados simples e o resultado aparece da seguinte maneira.

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

Nota

O valor da fonte "coordinates": [0, 0] de dados substitui as center: [-73.967605, 40.780452] coordenadas definidas quando o mapa foi inicializado.

A camada de dados simples é uma ferramenta poderosa nos seguintes cenários:

Uma fonte de dados inclui vários tipos de características.
Os recursos no conjunto de dados têm várias propriedades de estilo que são definidas individualmente.
Você não tem certeza do que o conjunto de dados contém.

Por exemplo, ao analisar feeds de dados XML, talvez você não saiba os tipos de estilo e geometria dos recursos. O exemplo de opções de camada de dados simples demonstra como a camada de dados simples renderiza as características de um arquivo KML (Keyhole Markup Language). Você também pode ver as opções na SimpleDataLayer classe. Para obter o código-fonte deste exemplo, consulte Camada de dados simples options.html nos exemplos de código do Azure Maps no GitHub.

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

Nota

Essa camada de dados simples usa a classe de modelo pop-up para exibir balões KML ou propriedades de recurso como uma tabela. Por padrão, todo o conteúdo renderizado no pop-up é colocado em área restrita dentro de um iFrame como um recurso de segurança. No entanto, existem limitações:

Todas as funcionalidades de bloqueio de ponteiro, funcionalidade de navegação superior, scripts e formulários estão desativados. Os links podem ser abertos em uma nova guia quando são selecionados.
Navegadores mais antigos que não suportam o srcdoc parâmetro em iFrames podem renderizar apenas uma pequena quantidade de conteúdo.

Se você confia nos dados carregados nos pop-ups e deseja que os scripts pop-up possam acessar seu aplicativo, você pode desativar esse recurso. Basta definir a sandboxContent opção no modelo pop-up como false.

Propriedades padrão de estilo suportadas

A camada de dados simples envolve várias das camadas de renderização principais: bolha, símbolo, linha, polígono e polígono extrudido. Ele usa expressões para pesquisar propriedades de estilo válidas em recursos individuais.

Os dois principais conjuntos de nomes de propriedade com suporte são o Azure Maps e o GitHub. A maioria dos nomes de propriedades das opções de camadas do Azure Maps é compatível na camada de dados simples como propriedades de estilo de elementos. Algumas opções de camada incluem expressões que suportam nomes de propriedades de estilo que o GitHub normalmente usa.

O suporte a mapas GeoJSON do GitHub define esses nomes de propriedade, que são usados para estilizar arquivos GeoJSON que são armazenados e renderizados dentro da plataforma. A maioria das propriedades de estilo do GitHub são suportadas na camada de dados simples, exceto as marker-symbol propriedades de estilo.

Se o leitor se deparar com uma propriedade de estilo menos comum, ele a converterá na propriedade de estilo mais semelhante do Azure Maps. Além disso, você pode substituir as expressões de estilo padrão usando a getLayers função 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 dos nomes de propriedade suportados também é a prioridade. Se duas propriedades de estilo forem definidas para a mesma opção de camada, a primeira da lista terá precedência. As cores podem ser qualquer valor de cor CSS3 (HEX, RGB, RGBA, HSL, HSLA) ou valor de cor nomeado.

Propriedades de estilo da camada tipo bolha

Se um recurso for um Point ou um MultiPoint, e não tiver uma propriedade de imagem para usar como um ícone personalizado para renderizar o ponto como um símbolo, ele será renderizado com um BubbleLayer.

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

1 Os valores de tamanho e escala são considerados valores escalares e são multiplicados por 8.

2 Se a opção GitHub marker-size for especificada, o raio usará os seguintes valores:

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

Os clusters também são renderizados na camada de bolhas. 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úmero de pontos	Cor
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Propriedades de estilo de símbolo

Se uma funcionalidade for um Point ou MultiPoint, com uma propriedade de imagem usada como um ícone personalizado para apresentar o ponto como um símbolo, então será renderizada com um SymbolLayer.

Opção de camada	Nomes de propriedades suportados	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 point_count_abbreviated propriedade será renderizada como um rótulo de texto. Nenhuma imagem é renderizada.

Propriedades de estilo de linha

Se o recurso for um LineString, MultiLineString, Polygon, ou MultiPolygon, é representado com um LineLayer.

Opção de camada	Nomes de propriedades suportados	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 a funcionalidade for um Polygon ou um MultiPolygon, e não tiver uma propriedade de altura, ou se a propriedade de altura for zero, será renderizada com um PolygonLayer.

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

Propriedades de estilo de polígono extrudido

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

Opção de camada	Nomes de propriedades suportados	Valor padrão
`base`	`base`	`0`
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`height`	`height`	`0`

Saiba mais sobre as classes e métodos neste artigo:

Consulte os seguintes artigos para obter mais exemplos de código para adicionar aos seus mapas:

Partilhar via