Adición de una capa de polígono al mapaAdd a polygon layer to the map

En este artículo se muestra cómo representar las áreas de las geometrías de las características Polygon y MultiPolygon en el mapa con una capa de polígono.This article shows you how to render the areas of Polygon and MultiPolygon feature geometries on the map using a polygon layer. El SDK web de Azure Maps también admite la creación de geometrías de círculo tal como se define en el esquema extendido de GeoJSON.The Azure Maps Web SDK also supports the creation of Circle geometries as defined in the extended GeoJSON schema. Estos círculos se transforman en polígonos cuando se representan en el mapa.These circles are transformed into polygons when rendered on the map. Todas las geometrías de características también se pueden actualizar fácilmente si se encapsulan con la clase atlas.Shape.All feature geometries can also be easily updated if wrapped with the atlas.Shape class.

Uso de una capa de polígonoUse a polygon layer

Cuando una capa de polígono se conecta a un origen de datos y se carga en el mapa, representa el área de las características Polygon y MultiPolygon.When a polygon layer is connected to a data source and loaded on the map, it renders the area of a Polygon and MultiPolygon features. En el código siguiente se muestra cómo crear un polígono, agregarlo a un origen de datos y representarlo con una capa de polígono mediante la clase PolygonLayer.The following code shows how to create a polygon, add it to a data source and render it with a polygon layer using the PolygonLayer class.

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Create a rectangular polygon.
dataSource.add(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',
    opacaty: 0.5
}));

A continuación se muestra el código de ejemplo de ejecución completo de la funcionalidad anterior.Below is the complete running code sample of the above functionality.


Uso de un polígono y una capa de línea conjuntamenteUse a polygon and line layer together

Una capa de línea se puede usar para presentar el contorno de los polígonos.A line layer can be used to render the outline of polygons. En el ejemplo de código siguiente se representa un polígono como en el ejemplo anterior, pero ahora se agrega una capa de línea como segunda capa conectada al origen de datos.The following code sample renders a polygon like the previous example, but now adds a line layer as a second layer connected to the data source.

Relleno de un polígono con un patrónFill a polygon with a pattern

Además de rellenar un polígono con color, también se puede usar un patrón de imagen.In addition to filling a polygon with a color, an image pattern can also be used. Cargue un patrón de imagen en los recursos de sprite de la imagen de los mapas y luego haga referencia a esta imagen con la propiedad fillPattern de la capa de polígono.Load an image pattern into the maps image sprite resources and then reference this image with the fillPattern property of the polygon layer.


Sugerencia

El SDK web de Azure Maps proporciona varias plantillas de imagen personalizables que puede usar como patrones de relleno.The Azure Maps web SDK provides several customizable image templates you can use as fill patterns. Para más información, consulte el documento How to use image templates (Uso de plantillas de imagen).For more information, see the How to use image templates document.

Personalizar una capa de polígonoCustomize a polygon layer

La capa de polígono solo tiene algunas opciones de estilo.The Polygon layer only has a few styling options. Esta es una herramienta para probarlas.Here is a tool to try them out.


Adición de un círculo al mapaAdd a circle to the map

Azure Maps usa una versión extendida del esquema GeoJSON que proporciona una definición para círculos como se indica aquí.Azure Maps uses an extended version of the GeoJSON schema that provides a definition for circles as noted here. Un círculo puede representarse en el mapa mediante la creación de una característica Point que tiene una propiedad subType con un valor de "Circle" y una propiedad radius que tiene un número que representa el radio en metros.A circle can be rendered on the map by creating a Point feature that has a subType property with a value of "Circle" and a radius property that has a number that represents the radius in meters. Por ejemplo:For example:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.126986, 47.639754]
    },
    "properties": {
        "subType": "Circle",
        "radius": 100
    }
}  

El SDK web de Azure Maps convierte estas características Point en características Polygon en segundo plano y se pueden representar en el mapa con capas de polígono y línea como se muestra en el código de ejemplo siguiente.The Azure Maps Web SDK converts these Point features into Polygon features under the covers and can be rendered on the map using polygon and line layers as shown in the following code sample.


Fácil actualización para geometríaMake a geometry easy to update

Una clase Shape encapsula un objeto Geometry o Feature y simplifica su actualización y mantenimiento.A Shape class wraps a Geometry or Feature and makes it easy to update and maintain them. Una forma se puede crear pasando una geometría y un conjunto de propiedades, o pasando una característica, tal como se muestra en el código siguiente.A shape can be created by passing in a geometry and a set of properties, or by passing in a feature as shown in the following code.

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

En el ejemplo de código siguiente se muestra cómo encapsular un objeto GeoJSON de círculo con una clase de forma y actualizar fácilmente su propiedad radius mediante un control deslizante.The following code sample shows how to wrap a circle GeoJSON object with a shape class and easily update it's radius property using a slider. A medida que cambia el valor de radius en la forma, la representación del círculo se actualiza automáticamente en el mapa.As the radius value changes in the shape, the rendering of the circle automatically updates on the map.


Pasos siguientesNext steps

Más información sobre las clases y los métodos utilizados en este artículo:Learn more about the classes and methods used in this article:

Para más ejemplos de código para agregar a los mapas, consulte los siguientes artículos:For more code examples to add to your maps, see the following articles:

Recursos adicionales:Additional resources: