Adicionar uma camada de polígono ao mapa
Este artigo mostra-lhe como compor as áreas de e MultiPolygon geometrias de Polygon funcionalidades no mapa com uma camada de polígonos. O Azure Maps SDK Web também suporta a criação de geometrias Circle, conforme definido no esquema GeoJSON expandido. Estes círculos são transformados em polígonos quando compostos no mapa. Todas as geometrias de funcionalidades podem ser facilmente atualizadas quando encapsuladas com o atlas. Classe de forma.
Utilizar uma camada de polígono
Quando uma camada de polígono está ligada a uma origem de dados e carregada no mapa, compõe a área com Polygon as funcionalidades e MultiPolygon . Para criar um polígono, adicione-o a uma origem de dados e componione-o com uma camada de polígonos com a classe PolygonLayer .
O seguinte código de exemplo demonstra a criação de uma camada de polígono que cobre o Central Park de Nova Iorque com um polígono vermelho.
function InitMap()
{
var map = new atlas.Map('myMap', {
center: [-73.97, 40.78],
zoom: 11,
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);
/*Create a rectangle*/
dataSource.add(new atlas.Shape(new atlas.data.Feature(
new atlas.data.Polygon([[
[-73.98235, 40.76799],
[-73.95785, 40.80044],
[-73.94928, 40.7968],
[-73.97317, 40.76437],
[-73.98235, 40.76799]
]])
)));
/*Create and add a polygon layer to render the polygon to the map*/
map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
fillColor: "red",
fillOpacity: 0.7
}), 'labels')
});
}
Utilizar uma camada de polígonos e linhas em conjunto
Uma camada de linha é utilizada para compor o contorno dos polígonos. O seguinte exemplo de código compõe um polígono como o exemplo anterior, mas agora adiciona uma camada de linha. Esta camada de linha é uma segunda camada ligada à origem de dados.
function InitMap()
{
var map = new atlas.Map('myMap', {
center: [-73.97, 40.78],
zoom: 11,
view: "Auto",
//Add authentication details for connecting to Azure Maps.
authOptions: {
// Get an Azure Maps key at https://azuremaps.com/.
authType: 'subscriptionKey',
subscriptionKey: '{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);
/*Create a rectangle*/
dataSource.add(new atlas.data.Polygon([[
[-73.98235, 40.76799],
[-73.95785, 40.80045],
[-73.94928, 40.7968],
[-73.97317, 40.76437],
[-73.98235, 40.76799]
]])
);
//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'myPolygonLayer', {
fillColor: 'rgba(0, 200, 200, 0.5)'
});
//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(dataSource, 'myLineLayer', {
strokeColor: 'red',
strokeWidth: 2
});
/*Create and add a polygon layer to render the polygon to the map*/
map.layers.add([polygonLayer, lineLayer])
});
}
Preencher um polígono com um padrão
Além de preencher um polígono com uma cor, pode utilizar um padrão de imagem para preencher o polígono. Carregue um padrão de imagem para os recursos sprite da imagem do mapas e, em seguida, referencie esta imagem com a fillPattern propriedade da camada de polígono.
Para obter um exemplo totalmente funcional que mostre como utilizar um modelo de imagem como um padrão de preenchimento numa camada de polígono, veja Preencher o polígono com modelo de ícone incorporado no Azure Maps Exemplos. Para obter o código fonte deste exemplo, veja Preenchimento do polígono com o código fonte do modelo de ícone incorporado.
Dica
O SDK Web Azure Maps fornece vários modelos de imagem personalizáveis que pode utilizar como padrões de preenchimento. Para obter mais informações, veja o documento Como utilizar modelos de imagem .
Personalizar uma camada de polígono
A camada Polígono tem apenas algumas opções de estilo. Veja o mapa de exemplo Opções de Camada de Polígono no Azure Maps Exemplos para experimentá-los. Para obter o código fonte deste exemplo, veja Polygon Layer Options source code (Código fonte das Opções de Camadas do Polígono).
Adicionar um círculo ao mapa
Azure Maps utiliza uma versão expandida do esquema GeoJSON que fornece uma definição para círculos. Um círculo é composto no mapa ao criar uma Point funcionalidade. Tem Point uma subType propriedade com um valor de "Circle" e uma radius propriedade com um número que representa o raio em metros.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.126986, 47.639754]
},
"properties": {
"subType": "Circle",
"radius": 100
}
}
O SDK Web Azure Maps converte estas Point funcionalidades em Polygon funcionalidades. Em seguida, estas funcionalidades são compostas no mapa com camadas de polígonos e linhas, conforme mostrado no seguinte exemplo de código.
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: {
// 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);
//Create a circle
dataSource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]),
{
subType: "Circle",
radius: 1000
}));
// Create a polygon layer to render the filled in area
// of the circle polygon, and add it to the map.
map.layers.add(new atlas.layer.PolygonLayer (dataSource, null, {
fillColor: 'rgba(0, 200, 200, 0.8)'
}));
});
}
Tornar uma geometria fácil de atualizar
Uma Shape classe encapsula uma Geometria ou Funcionalidade e facilita a atualização e manutenção destas funcionalidades. Para instanciar uma variável de forma, transmita uma geometria ou um conjunto de propriedades para o construtor da forma.
//Creating a shape by passing in a geometry and a object containing properties.
var shape1 = new atlas.Shape(new atlas.data.Point[0,0], { myProperty: 1 });
//Creating a shape using a feature.
var shape2 = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point[0,0], { myProperty: 1 });
O exemplo Tornar uma geometria fácil de atualizar mostra como moldar um objeto GeoJSON circular com uma classe de forma. À medida que o valor do raio muda na forma, o círculo é composto automaticamente no mapa. Para obter o código fonte deste exemplo, veja Tornar uma geometria fácil de atualizar o código fonte.
Passos seguintes
Saiba mais sobre as classes e métodos utilizados neste artigo:
Para obter mais exemplos de código para adicionar aos mapas, consulte os seguintes artigos:
Mais recursos: