Adicionar uma camada de símbolo a um mapa
Ligue um símbolo a uma origem de dados e utilize-o para compor um ícone ou texto num determinado ponto.
As camadas de símbolos são compostas com WebGL. Utilize uma camada de símbolos para compor grandes coleções de pontos no mapa. Em comparação com o marcador HTML, a camada de símbolos compõe um grande número de dados de ponto no mapa, com um melhor desempenho. No entanto, a camada de símbolos não suporta elementos CSS e HTML tradicionais para estilo.
Dica
Por predefinição, as camadas de símbolos compõem as coordenadas de todas as geometrias numa origem de dados. Para limitar a camada de forma a que apenas componcione funcionalidades de geometria de pontos, defina a filter propriedade da camada como ['==', ['geometry-type'], 'Point'] ou ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] se quiser, também pode incluir funcionalidades do MultiPoint.
O gestor de sprites de imagem de mapas carrega imagens personalizadas utilizadas pela camada de símbolos. Suporta os seguintes formatos de imagem:
- JPEG
- PNG
- SVG
- BMP
- GIF (sem animações)
Adicionar uma camada de símbolo
Antes de poder adicionar uma camada de símbolo ao mapa, tem de seguir alguns passos. Primeiro, crie uma origem de dados e adicione-a ao mapa. Criar uma camada de símbolo. Em seguida, transmita a origem de dados para a camada de símbolos para obter os dados da origem de dados. Por fim, adicione dados à origem de dados, para que haja algo a ser composto.
O código seguinte demonstra o que deve ser adicionado ao mapa depois de ter sido carregado. Este exemplo compõe um único ponto no mapa com uma camada de símbolo.
//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]));
Existem quatro tipos diferentes de dados de ponto que podem ser adicionados ao mapa:
- Geometria de Ponto GeoJSON – este objeto contém apenas uma coordenada de um ponto e nada mais. A
atlas.data.Pointclasse auxiliar pode ser utilizada para criar facilmente estes objetos. - Geometria GeoJSON MultiPoint – este objeto contém as coordenadas de vários pontos e nada mais. A
atlas.data.MultiPointclasse auxiliar pode ser utilizada para criar facilmente estes objetos. - Funcionalidade GeoJSON – este objeto consiste em qualquer geometria GeoJSON e um conjunto de propriedades que contêm metadados associados à geometria. A
atlas.data.Featureclasse auxiliar pode ser utilizada para criar facilmente estes objetos. -
atlas.ShapeA classe é semelhante à funcionalidade GeoJSON. Ambos consistem numa geometria GeoJSON e num conjunto de propriedades que contêm metadados associados à geometria. Se um objeto GeoJSON for adicionado a uma origem de dados, pode ser facilmente composto numa camada. No entanto, se a propriedade coordenadas desse objeto GeoJSON for atualizada, a origem de dados e o mapa não serão alterados. Isto acontece porque não existe nenhum mecanismo no objeto JSON para acionar uma atualização. A classe shape fornece funções para atualizar os dados que contém. Quando é efetuada uma alteração, a origem de dados e o mapa são automaticamente notificados e atualizados.
O seguinte exemplo de código cria uma geometria de Ponto GeoJSON e transmite-a para a atlas.Shape classe para facilitar a atualização. O centro do mapa é inicialmente utilizado para compor um símbolo. É adicionado um evento de clique ao mapa de modo a que, quando é acionado, as coordenadas do rato sejam utilizadas setCoordinates com a função formas. As coordenadas do rato são gravadas no momento do evento de clique. Em seguida, o setCoordinates atualiza a localização do símbolo no mapa.
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));
});
}
Dica
Por predefinição, as camadas de símbolo otimizam a composição de símbolos ao ocultar símbolos que se sobrepõem. À medida que amplia, os símbolos ocultos ficam visíveis. Para desativar esta funcionalidade e compor sempre todos os símbolos, defina a allowOverlap propriedade das iconOptions opções como true.
Adicionar um ícone personalizado a uma camada de símbolo
As camadas de símbolos são compostas com WebGL. Como tal, todos os recursos, como imagens de ícone, têm de ser carregados para o contexto WebGL. Este exemplo mostra como adicionar um ícone personalizado aos recursos de mapa. Em seguida, este ícone é utilizado para compor dados de pontos com um símbolo personalizado no mapa. A textField propriedade da camada de símbolos requer que seja especificada uma expressão. Neste caso, queremos compor a propriedade de temperatura. Uma vez que a temperatura é um número, tem de ser convertida numa cadeia. Além disso, queremos acrescentar "°F" ao mesmo. Uma expressão pode ser utilizada para efetuar esta concatenação; ['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', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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]
}
}));
});
});
}
Dica
O SDK Web Azure Maps fornece vários modelos de imagem personalizáveis que pode utilizar com a camada de símbolos. Para obter mais informações, veja o documento Como utilizar modelos de imagem .
Personalizar uma camada de símbolo
A camada de símbolos tem muitas opções de estilo disponíveis. O exemplo de Opções de Camada de Símbolo mostra como as diferentes opções da camada de símbolos afetam a composição. Para obter o código fonte deste exemplo, veja Código fonte das Opções de Camada de Símbolos.
Dica
Quando quiser compor apenas texto com uma camada de símbolo, pode ocultar o ícone ao definir a image propriedade das opções do ícone como 'none'.
Passos seguintes
Saiba mais sobre as classes e métodos utilizados neste artigo:
Veja os seguintes artigos para obter mais exemplos de código para adicionar aos mapas: