Tutorial: Migración de una aplicación web desde Mapas de Bing
Las aplicaciones web que usan Mapas de Bing suelen usar el SDK de JavaScript de Mapas de Bing V8. El SDK web para Azure Maps es el SDK adecuado basado en Azure al que se debe migrar. El SDK web para Azure Maps permite personalizar mapas interactivos con contenido propio e imágenes para su presentación en las aplicaciones web o móviles. Este control usa WebGL, lo que permite representar grandes conjuntos de datos con alto rendimiento. Desarrolle con este SDK mediante JavaScript o TypeScript. En este tutorial se muestra cómo:
- Carga de un mapa
- Localizar un mapa
- Agregar marcadores, polilíneas y polígonos.
- Mostrar información en una ventana emergente o informativa.
- Cargar y mostrar datos de KML y GeoJSON
- Marcadores de clúster
- Superposición de una capa de mosaicos
- Mostrar datos del tráfico
- Adición de una superposición de suelo
Si desarrolla aplicaciones en un entorno JavaScript, puede que uno de los siguientes proyectos de código abierto resulte útil:
- ng-azure-maps: contenedor de Angular 10 para Azure Maps.
- AzureMapsControl.Components: un componente Blazor de Azure Maps.
- Componente React de Azure Maps: un contenedor de React para el control de Azure Maps.
- Vue Azure Maps : un componente de Azure Maps para la aplicación Vue.
Requisitos previos
Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.
Compatibilidad de características clave
En la siguiente tabla se indican las principales características de la API del SDK de JavaScript para Mapas de Bing V8 y la compatibilidad de una API similar en el SDK web de Azure Maps.
| Característica de Mapas de Bing | Módulo de Mapas de Bing | Compatibilidad del SDK web de Azure Maps |
|---|---|---|
| Marcadores | ✓ | |
| Agrupación en clústeres de marcadores | Microsoft.Maps.Clustering | Agrupación en clústeres de marcadores |
| Polilíneas y polígonos | ✓ | |
| Superposiciones de suelo | ✓ | |
| Mapas térmicos | Microsoft.Maps.HeatMap | ✓ Adición de un mapa térmico |
| Capas de mosaicos | ✓ | |
| Capa KML | Microsoft.Maps.GeoXml | ✓ Módulo de E/S espacial |
| Capa de contorno | Microsoft.Maps.Contour | Ejemplos de código de capa de contorno |
| Capa de discretización de datos | Microsoft.Maps.DataBinning | ✓ Incluido en el módulo de origen de datos en cuadrícula de Azure Maps de código abierto. |
| Capa de mosaicos animados | ✓ Incluido en el módulo de animación de Azure Maps de código abierto. | |
| Diseño de herramientas | Microsoft.Maps.DrawingTools | ✓ Incorporación de herramientas de dibujo |
| Servicio de codificador geográfico | Microsoft.Maps.Search | ✓ Search API o REST SDK |
| Servicio de direcciones | Microsoft.Maps.Directions | ✓ Route API |
| Servicio de matriz de distancia | ✓ Route Matrix API | |
| Servicio de datos espaciales | Microsoft.Maps.SpatialDataService | N/D |
| Imágenes aéreas/por satélite | ✓ Elección de un estilo de mapa | |
| Imágenes de vista aérea | N/D | |
| Imágenes de Streetside | N/D | |
| Compatibilidad con GeoJSON | Microsoft.Maps.GeoJson | ✓ |
| Compatibilidad con GeoXML | Microsoft.Maps.GeoXml | ✓ Módulo de E/S espacial |
| Compatibilidad con texto conocido | Microsoft.Maps.WellKnownText | ✓ Módulo de E/S espacial |
| Mapas de interiores | Microsoft.Maps.VenueMaps | ✓ Creator |
| Flujo de tráfico | Microsoft.Maps.Traffic | ✓ Control de tráfico |
| Matemáticas espaciales | Microsoft.Maps.SpatialMath | ✓ atlas.math samples o turf js |
| Estilos de mapa personalizados | Parcial, Selección de un estilo de mapa |
Azure Maps tiene otros módulos de código abierto para el SDK web adicionales que amplían sus funcionalidades.
Diferencias notables en los SDK web
Las siguientes son algunas de las diferencias principales entre los SDK web de Mapas de Bing y Azure Maps que se deben tener en cuenta:
- Además de proporcionar un punto de conexión hospedado para acceder al SDK web para Azure Maps, también está disponible un paquete npm para insertar el SDK web en aplicaciones, si lo prefiere. Para obtener más información, consulte Usar el control de mapa de Azure Maps. Este paquete también incluye las definiciones de TypeScript.
- Mapas de Bing proporciona dos ramas hospedadas de su SDK: versión y experimental. La rama experimental puede recibir varias actualizaciones al día cuando se están realizando nuevos desarrollos. Azure Maps solo hospeda una rama de versión; sin embargo, se crean características experimentales como módulos personalizados en el proyecto de ejemplos de Azure Maps de código abierto. Mapas de Bing solía tener también una rama inmovilizada que se actualizaba con menos frecuencia, lo que reducía el riesgo de cambios importantes debidos a una versión. En Azure Maps, puede usar el módulo npm y apuntar a cualquier versión secundaria anterior.
Sugerencia
Azure Maps publica tanto las versiones compactadas como las descompactadas del SDK. Solo tiene que quitar .min de los nombres de archivo. La versión descompactada es útil al depurar problemas, pero asegúrese de usar la versión compactada en producción para aprovechar las ventajas del tamaño de archivo más pequeño.
Después de crear una instancia de la clase Map en Azure Maps, el código debe esperar a que se active el evento
readyoloaddel mapa antes de interactuar con el mapa. Estos eventos garantizan que todos los recursos del mapa están cargados y listos para acceder a ellos.Ambas plataformas usan un sistema de mosaicos similar para los mapas base. Sin embargo, los mosaicos de Mapas de Bing tienen una dimensión de 256 píxeles, mientras que los de Azure Maps tienen 512 píxeles. Para obtener la misma vista de mapa en Azure Maps que en Bing Maps, reste un nivel de zoom en Azure Maps.
En Mapas de Bing, las coordenadas tienen el formato
latitude, longitude, mientras que en Azure Maps se usalongitude, latitude. Este formato se alinea con el[x, y]estándar que siguen la mayoría de las plataformas de GIS.Las formas del SDK web para Azure Maps se basan en el esquema GeoJSON. Las clases auxiliares se exponen a través del espacio de nombres atlas.data. También existe la clase atlas.Shape que se puede usar para encapsular objetos GeoJSON y facilitar su actualización y mantenimiento de un modo enlazable a datos.
Las coordenadas en Azure Maps se definen como objetos Position, que se pueden especificar como una matriz de números simple con el formato
[longitude, latitude]onew atlas.data.Position(longitude, latitude).
Sugerencia
La clase Position tiene una función auxiliar estática para importar coordenadas que se encuentran en formato latitude, longitude. La función atlas.data.Position.fromLatLng se puede reemplazar a menudo por la función new Microsoft.Maps.Location en el código de Bing Maps.
- En lugar de especificar la información de estilo en cada una de las formas que se agregan al mapa, Azure Maps separa los estilos de los datos. Los datos se almacenan en orígenes de datos y se conectan a las capas de representación que el código de Azure Maps usa para representar los datos. Este enfoque proporciona una ventaja de rendimiento mejorado. Muchas capas admiten el estilo controlado por datos, ya que agregan lógica de negocios a opciones de estilo de capa que cambian cómo se representan las formas individuales dentro de una capa en función de sus propiedades.
- Azure Maps proporciona funciones matemáticas espaciales en el espacio de nombres
atlas.mathque difieren de las funciones matemáticas espaciales de Bing Maps. La diferencia principal es que Azure Maps no proporciona funciones integradas para operaciones binarias comounionyintersection. Sin embargo, Azure Maps se basa en el estándar GeoJSON abierto y hay bibliotecas de código abierto disponibles. Una opción conocida que funciona bien con Azure Maps y que proporciona funcionalidades matemáticas espaciales es turf js.
Para obtener más información sobre la terminología relacionada con Azure Maps, consulte el Glosario de Azure Maps.
Ejemplos en paralelo del SDK web
La siguiente lista es una colección de ejemplos de código para cada plataforma que abarcan los casos de uso comunes para ayudarle a migrar la aplicación web desde el SDK de JavaScript para Bing Maps V8 al SDK web de Azure Maps. Los ejemplos de código relacionados con las aplicaciones web se proporcionan en JavaScript; sin embargo, Azure Maps también proporciona definiciones TypeScript como un módulo npm. Para obtener más información sobre las definiciones de TypeScript, vea Usar el control de mapa de Azure Maps.
Temas
- Carga de un mapa
- Localización del mapa
- Establecimiento de la vista del mapa
- Adición de un marcador
- Adición de un marcador personalizado
- Adición de una polilínea
- Adición de un polígono
- Mostrar un cuadro de información
- Agrupación en clústeres de marcadores
- Adición de un mapa térmico
- Superposición de una capa de mosaicos
- Mostrar datos del tráfico
- Adición de una superposición de suelo
- Adición de datos KML al mapa
- Incorporación de herramientas de dibujo
Carga de un mapa
La carga de un mapa en ambos SDK sigue los mismos pasos:
- Agregue una referencia al SDK de mapa.
- Agregue una etiqueta
dival cuerpo de la página, que actúa como marcador de posición para el mapa. - Cree una función de JavaScript a la que se llamará cuando se cargue la página.
- Cree una instancia de la clase de mapa correspondiente.
Principales diferencias
- Bing Maps requiere que se especifique una clave de cuenta en la referencia de script de la API o como opción de mapa. Las credenciales de autenticación para Azure Maps se especifican como opciones de la clase de asignación como Autenticación de clave compartida o Microsoft Entra ID.
- Mapas de Bing toma una función de devolución de llamada en la referencia de script de la API, que se usa para llamar a una función de inicialización para cargar el mapa. Con Azure Maps debe usarse el evento onload de la página.
- Cuando se usa un identificador para hacer referencia al elemento
diven el que se va a representar el mapa, Mapas de Bing emplea un selector HTML (#myMap), mientras que Azure Maps solo utiliza el valor de identificador (myMap). - Las coordenadas en Azure Maps se definen como objetos Position, que se pueden especificar como una matriz de números simple con el formato
[longitude, latitude]. - El nivel de zoom en Azure Maps es un nivel inferior al del ejemplo de Mapas de Bing debido a la diferencia en los tamaños del sistema de mosaicos de las plataformas.
- De forma predeterminada, Azure Maps no agrega ningún control de navegación al lienzo del mapa, como botones de zoom y botones de estilo de mapa. Sin embargo, hay controles para agregar un selector de estilo de mapa, botones de zoom, control de la brújula o giro y un control de paso.
- Se agrega un controlador de eventos en Azure Maps para supervisar el evento
readyde la instancia de mapa. Se activa cuando el mapa termina de cargar el contexto WebGL y todos los recursos necesarios. Cualquier código posterior a la carga se puede agregar en este controlador de eventos.
Los ejemplos siguientes muestran cómo cargar un mapa básico, que está centrado en Nueva York en las coordenadas (longitud: -73,985, latitud: 40.747) y está en el nivel de zoom 12 en Bing Maps.
Antes: Mapas de Bing
El código siguiente es un ejemplo de cómo mostrar un mapa de Bing centrado y que se ha acercado sobre una ubicación.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map;
function initMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: '<Your Bing Maps Key>',
center: new Microsoft.Maps.Location(40.747, -73.985),
zoom: 12
});
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Al ejecutar este código en un explorador, se mostrará un mapa similar al de la siguiente imagen:
Después: Azure Maps
En el código siguiente se muestra cómo cargar un mapa con la misma vista en Azure Maps junto con un control de estilo de mapa y botones de zoom.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map;
function initMap() {
map = new atlas.Map('myMap', {
center: [-73.985, 40.747], //Format coordinates as longitude, latitude.
zoom: 11, //Subtract the zoom level by one.
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Add zoom and map style controls to top right of map.
map.controls.add([
new atlas.control.StyleControl(),
new atlas.control.ZoomControl()
], {
position: 'top-right'
});
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Al ejecutar este código en un explorador, se mostrará un mapa similar al de la siguiente imagen:
Para obtener más información sobre cómo configurar y usar el control de mapa de Azure Maps en una aplicación web, consulte Uso del control de mapa de Azure Maps.
Sugerencia
Azure Maps publica tanto las versiones compactadas como las descompactadas del SDK. Quite .min de los nombres de archivo. La versión descompactada es útil al depurar problemas, pero asegúrese de usar la versión compactada en producción para aprovechar las ventajas del tamaño de archivo más pequeño.
Más recursos
- Para obtener más información sobre los controles de navegación de Azure Maps para girar e inclinar un mapa, vea Agregar controles a un mapa.
Localización del mapa
Si su audiencia se extiende a varios países o regiones y habla distintos idiomas, la localización es importante.
Antes: Mapas de Bing
Para localizar Mapas de Bing, se especifican el idioma y la región mediante los parámetros setLang y UR y se agregan a la referencia de etiqueta <script> a la API. Algunas características de Mapas de Bing solo están disponibles en determinados mercados; el mercado del usuario se especifica mediante el parámetro setMkt.
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>
Este es un ejemplo de Bing Maps con el idioma establecido en fr-FR.
Después: Azure Maps
Azure Maps solo proporciona opciones para definir el idioma y la vista regional del mapa. No se usa un parámetro de mercado para limitar las características. Hay dos formas diferentes de definir el idioma y la vista regional del mapa. La primera opción es agregar esta información al espacio de nombres global atlas, lo que provoca que todas las instancias de control de mapa de la aplicación adopten estos valores de forma predeterminada. El código siguiente establece el idioma en francés (fr-FR) y la vista regional en "Auto":
atlas.setLanguage('fr-FR');
atlas.setView('auto');
La segunda opción consiste en usar esta información a las opciones del mapa al cargar el mapa como:
map = new atlas.Map('myMap', {
language: 'fr-FR',
view: 'auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
Nota
Azure Maps puede cargar varias instancias del mapa en la misma página con diferentes configuraciones de idioma y región. También es posible actualizar esta configuración en el mapa una vez que se haya cargado. Para obtener una lista completa de los idiomas admitidos en Azure Maps, consulte Compatibilidad con la localización en Azure Maps.
Este es un ejemplo de Azure Maps con el idioma establecido en "fr" y la región del usuario establecida en fr-FR.
Establecimiento de la vista del mapa
Los mapas dinámicos en Mapas de Bing y Azure Maps se pueden mover mediante programación a nuevas ubicaciones geográficas con la llamada a las funciones adecuadas en JavaScript. En los siguientes ejemplos se muestra cómo hacer que el mapa muestre las imágenes aéreas de satélite, centrar el mapa sobre una ubicación con las coordenadas (longitud: -111,0225, latitud: 35.0272) y cambiar el nivel de zoom a 15 en Bing Maps.
Nota
En Mapas de Bing se usan mosaicos con una dimensión de 256 píxeles, mientras que en Azure Maps se usa un tamaño de mosaico mayor, 512 píxeles. Como consecuencia, se reduce el número de solicitudes de red que Azure Maps necesita para cargar la misma área del mapa que Mapas de Bing. Sin embargo, debido al modo en que funcionan las pirámides de mosaicos en los controles de mapa, que los mosaicos de Azure Maps sean mayores significa que, para conseguir esa misma área visible como mapa en Mapas de Bing, debe restar uno al nivel de zoom que se usa en Mapas de Bing cuando utilice Azure Maps.
Antes: Mapas de Bing
El control de mapa de Mapas de Bing puede moverse mediante programación con la función setView, lo que permite especificar el centro del mapa y un nivel de zoom.
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(35.0272, -111.0225),
zoom: 15
});
Después: Azure Maps
En Azure Maps, la posición del mapa se puede cambiar mediante programación con la función setCamera del mapa y el estilo de mapa se puede cambiar con la función setStyle. Las coordenadas en Azure Maps tienen el formato "longitud, latitud" y se resta 1 al valor del nivel de zoom.
map.setCamera({
center: [-111.0225, 35.0272],
zoom: 14
});
map.setStyle({
style: 'satellite_road_labels'
});
Más recursos
Adición de un marcador
En Azure Maps, hay varias maneras de representar los datos de puntos en el mapa;
- Marcadores HTML: representan los puntos mediante los elementos DOM tradicionales. Los marcadores HTML admiten el arrastre.
- Capa de símbolos: representa los puntos con un icono o texto dentro del contexto WebGL.
- Capa de burbujas: representa los puntos como círculos en el mapa. Los radios de los círculos se pueden escalar en función de las propiedades de los datos.
Las capas de símbolos y burbujas se representan dentro del contexto WebGL y pueden representar conjuntos de puntos grandes en el mapa. Estas capas requieren que los datos se almacenen en un origen de datos. Los orígenes de datos y las capas de representación deben agregarse al mapa una vez desencadenado el evento ready. Los marcadores HTML se representan como elementos DOM dentro de la página y no usan un origen de datos. Cuanto más elementos DOM tenga una página, más lenta es. Si representa más de cien puntos en un mapa, pruebe a usar una de las capas de representación en su lugar.
En los siguientes ejemplos se agrega un marcador al mapa en (longitud:-0.2, latitud: 51.5) con el número 10 superpuesto como etiqueta.
Antes: Mapas de Bing
Con Mapas de Bing, se agregan marcadores al mapa mediante la clase Microsoft.Maps.Pushpin*. Los marcadores se agregan al mapa mediante dos funciones.
La primera función es crear una capa, insertar el marcador en ella y, luego, agregar la capa a la propiedad layers del mapa.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
text: '10'
});
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
La segunda es agregarla mediante la propiedad entities del mapa. Esta función está marcada como en desuso en la documentación de Bing Maps V8, pero sigue siendo parcialmente funcional para escenarios básicos.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
text: '10'
});
map.entities.add(pushpin);
Después: Azure Maps con marcadores HTML
En Azure Maps, se pueden usar marcadores HTML para mostrar fácilmente un punto en el mapa y se recomiendan para aplicaciones sencillas que únicamente necesitan mostrar un pequeño número de puntos en el mapa. Para usar un marcador HTML, puede crear una instancia de la clase atlas.HtmlMarker, establecer las opciones de texto y posición y agregar el marcador al mapa mediante la función map.markers.add.
//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
text: '10',
position: [-0.2, 51.5]
}));
Después: Azure Maps con una capa de símbolos
Cuando se usa una capa de símbolos, los datos se deben agregar a un origen de datos y adjuntar el origen de datos a la capa. Además, el origen de datos y la capa deben agregarse al mapa después de que se active el evento ready. Para representar un valor de texto único encima de un símbolo, la información de texto debe almacenarse como una propiedad del punto de datos y hacer referencia a la propiedad en la opción textField de la capa. Esto representa un poco más de trabajo que el uso de marcadores HTML, pero ofrece ventajas de rendimiento.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource;
function initMap() {
map = new atlas.Map('myMap', {
center: [-0.2, 51.5],
zoom: 9,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point feature, add a property to store a label for it, and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
label: '10'
}));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
textOptions: {
//Use the label property to populate the text for the symbols.
textField: ['get', 'label'],
color: 'white',
offset: [0, -1]
}
}));
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Más recursos
- Creación de un origen de datos
- Adición de una capa de símbolos
- Adición de una capa de burbujas
- Datos de punto de clúster
- Adición de marcadores HTML
- Uso de expresiones de estilo controladas por datos
- Opciones de icono de capa de símbolos
- Opción de texto de capa de símbolos
- Clase de marcador HTML
- Opciones de marcador HTML
Adición de un marcador personalizado
Se pueden usar imágenes personalizadas para representar puntos en un mapa. En los ejemplos siguientes se usa esta imagen personalizada para mostrar un punto en el mapa en (latitud: 51,5, longitud: -0,2) y desplaza la posición del marcador de modo que el punto del icono de marcador se alinee con la posición correcta en el mapa.
 |
|---|
| yellow-pushpin.png |
Antes: Mapas de Bing
En Mapas de Bing, para crear un marcador personalizado se pasa una dirección URL a una imagen en las opciones icon de un marcador. La opción anchor se usa para alinear el punto de la imagen del marcador con la coordenada del mapa. El valor del delimitador en Mapas de Bing guarda relación con la esquina superior izquierda de la imagen.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
icon: 'ylw-pushpin.png',
anchor: new Microsoft.Maps.Point(5, 30)
});
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
Después: Azure Maps con marcadores HTML
Para personalizar un marcador HTML en Azure Maps se puede pasar un elemento HTML string o HTMLElement a la opción htmlContent del marcador. En Azure Maps, se usa una opción anchor para especificar la posición relativa del marcador con respecto a la coordenada de posición mediante uno de los nueve puntos de referencia definidos; "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right". El contenido está anclado y centrado en la "parte inferior" de forma predeterminada. Para que sea más fácil migrar el código de Mapas de Bing, establezca el delimitador en "top-left" y, luego, use la opción offset con el mismo desplazamiento usado en Mapas de Bing. Los desplazamientos en Azure Maps se mueven en dirección opuesta a la de Mapas de Bing, por lo que se deben multiplicar por menos uno.
Sugerencia
Agregue pointer-events:none como estilo en el contenido HTML para deshabilitar el comportamiento de arrastre predeterminado de MS Edge, que mostrará un icono no deseado.
map.markers.add(new atlas.HtmlMarker({
htmlContent: '<img src="ylw-pushpin.png" style="pointer-events: none;" />',
anchor: 'top-left',
pixelOffset: [-5, -30],
position: [-0.2, 51.5]
}));
Después: Azure Maps con una capa de símbolos
Además, las capas de símbolos de Azure Maps admiten imágenes personalizadas, pero la imagen debe cargarse primero en los recursos del mapa y debe tener asignado un identificador único. A continuación, la capa de símbolos puede hacer referencia a este identificador. El símbolo se puede desplazar para alinearse con el punto correcto de la imagen mediante la opción offset del icono. En Azure Maps, se usa una opción anchor para especificar la posición relativa del símbolo con respecto a la coordenada de posición mediante uno de los nueve puntos de referencia definidos; "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right". El contenido está delimitado y se establece en "bottom" de forma predeterminada, que es el centro inferior del contenido HTML. Para que sea más fácil migrar el código de Mapas de Bing, establezca el delimitador en "top-left" y, luego, use la opción offset con el mismo desplazamiento usado en Mapas de Bing. Los desplazamientos en Azure Maps se mueven en dirección opuesta a la de Mapas de Bing, por lo que se deben multiplicar por menos uno.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource;
function initMap() {
map = new atlas.Map('myMap', {
center: [-0.2, 51.5],
zoom: 9,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Load the custom image icon into the map resources.
map.imageSprite.add('my-yellow-pin', 'ylw-pushpin.png').then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a point and add it to the data source.
datasource.add(new atlas.data.Point([-0.2, 51.5]));
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Set the image option to the id of the custom icon that was loaded into the map resources.
image: 'my-yellow-pin',
anchor: 'top-left',
offset: [-5, -30]
}
}));
});
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Sugerencia
Para crear una representación de puntos personalizada avanzada, use varias capas de representación juntas. Por ejemplo, si desea tener varios marcadores que tengan el mismo icono en diferentes círculos de colores, en lugar de crear muchas imágenes para cada color, puede superponer una capa de símbolos encima de una capa de burbujas y hacer que hagan referencia al mismo origen de datos. Será mucho más eficaz que crear y hacer que el mapa mantenga muchas imágenes diferentes.
Más recursos
- Creación de un origen de datos
- Adición de una capa de símbolos
- Adición de marcadores HTML
- Uso de expresiones de estilo controladas por datos
- Opciones de icono de capa de símbolos
- Opción de texto de capa de símbolos
- Clase de marcador HTML
- Opciones de marcador HTML
Adición de una polilínea
Las polilíneas se usan para representar una línea o una ruta en el mapa. En el ejemplo siguiente se muestra cómo crear una polilínea discontinua en el mapa.
Antes: Mapas de Bing
En Mapas de Bing, la clase Polyline toma una matriz de ubicaciones y un conjunto de opciones.
//Get the center of the map.
var center = map.getCenter();
//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
center,
new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
], {
strokeColor: 'red',
strokeThickness: 4,
strokeDashArray: [3, 3]
});
//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);
Después: Azure Maps
En Azure Maps, se hace referencia a las polilíneas con los términos geoespaciales más comunes: objetos LineString o MultiLineString. Estos objetos se pueden agregar a un origen de datos y se representan mediante una capa de línea. Las opciones de color del trazo, ancho y matriz de guiones son casi idénticas entre las plataformas.
//Get the center of the map.
var center = map.getCamera().center;
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
center,
[center[0] - 1, center[1] - 0.5],
[center[0] + 1, center[1] - 0.5]
]));
//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'red',
strokeWidth: 4,
strokeDashArray: [3, 3]
}));
Más recursos
- Adición de líneas al mapa
- Opciones de capa de línea
- Uso de expresiones de estilo controladas por datos
Adición de un polígono
Los polígonos se usan para representar un área en el mapa. Azure Maps y Bing Maps proporcionan una compatibilidad muy similar con los polígonos. En los ejemplos siguientes se muestra cómo crear un polígono que forme un triángulo basado en la coordenada del centro del mapa.
Antes: Mapas de Bing
En Mapas de Bing, la clase Polygon toma una matriz de coordenadas o anillos de coordenadas y un conjunto de opciones.
//Get the center of the map.
var center = map.getCenter();
//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
center,
new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
center
], {
fillColor: 'rgba(0, 255, 0, 0.5)',
strokeColor: 'red',
strokeThickness: 2
});
//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);
Después: Azure Maps
En Azure Maps, se pueden agregar los objetos Polygon y MultiPolygon a un origen de datos y se representan en el mapa mediante capas. El área de un polígono se puede representar en una capa de polígono. El contorno de un polígono se puede representar con una capa de línea.
//Get the center of the map.
var center = map.getCamera().center;
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
center,
[center[0] - 1, center[1] - 0.5],
[center[0] + 1, center[1] - 0.5],
center
]));
//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
fillColor: 'rgba(0, 255, 0, 0.5)'
}));
//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'red',
strokeWidth: 2
}));
Más recursos
- Adición de un polígono al mapa
- Adición de un círculo al mapa
- Opciones de capa de símbolos
- Opciones de capa de línea
- Uso de expresiones de estilo controladas por datos
Mostrar un cuadro de información
Se puede mostrar información adicional de una entidad en el mapa como una clase Microsoft.Maps.Infobox en Bing Maps; en Azure Maps esto se puede lograr mediante la clase atlas.Popup. En el ejemplo siguiente se agrega una chincheta o marcador al mapa que, cuando se selecciona, muestra un cuadro de información/ventana emergente.
Antes: Mapas de Bing
Con Mapas de Bing, se crea un cuadro de información con el constructor Microsoft.Maps.Infobox.
//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));
//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
description: '<div style="padding:5px"><b>Hello World!</b></div>',
visible: false
});
infobox.setMap(map);
//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
infobox.setOptions({ visible: true });
});
Después: Azure Maps
En Azure Maps se puede usar una ventana emergente para mostrar más información de una ubicación. Se puede pasar un objeto HTML string o HTMLElement a la opción content del elemento emergente. Los elementos emergentes se pueden mostrar independientemente de cualquier forma si se desea y, por tanto, es necesario especificar un valor de position. Para mostrar una ventana emergente, llame a la función open y pase el mapa en el que se va a mostrar la ventana emergente.
//Add a marker to the map that to display a popup for.
var marker = new atlas.HtmlMarker({
position: [-122.33, 47.6]
});
//Add the marker to the map.
map.markers.add(marker);
//Create a popup.
var popup = new atlas.Popup({
content: '<div style="padding:10px"><b>Hello World!</b></div>',
position: [-122.33, 47.6],
pixelOffset: [0, -35]
});
//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
//Open the popup
popup.open(map);
});
Nota:
Para hacer lo mismo con una capa de símbolos, burbujas, líneas o polígonos, simplemente pase la capa al código de evento del mapa en lugar de a un marcador.
Más recursos
- Adición de un elemento emergente
- Elemento emergente con contenido multimedia
- Elementos emergentes en formas
- Reutilización de un elemento emergente con varias chinchetas
- Clase de elemento emergente
- Opciones de elemento emergente
Agrupación en clústeres de marcadores
Cuando se visualizan muchos puntos de datos en el mapa, estos se superponen, el mapa presenta un aspecto desordenado y resulta difícil consultar y usar. La agrupación en clústeres de datos de punto puede utilizarse para mejorar esta experiencia de usuario y también el rendimiento. La agrupación en clústeres de datos de punto es el proceso de combinar datos de punto que están cerca unos de otros y representarlos en el mapa como un único punto de datos agrupados en clúster. Cuando el usuario acerca el mapa, los clústeres se separan en sus puntos de datos individuales.
En los siguientes ejemplos se carga una fuente GeoJSON de datos de terremotos de la semana pasada y se agrega al mapa. Los clústeres se representan como círculos con una escala y color que dependen del número de puntos que contengan.
Nota
Hay varios algoritmos diferentes que se usan para la agrupación en clústeres de marcadores. En Bing Maps se emplea una sencilla función basada en cuadrícula, mientras que en Azure Maps se usan métodos de agrupación en clústeres basados en puntos más avanzados y visualmente más atractivos.
Antes: Mapas de Bing
En Mapas de Bing, los datos de GeoJSON se pueden cargar mediante el módulo GeoJSON. Para agrupar los marcadores, se cargan en el módulo de agrupación en clústeres y se usa la capa de agrupación en clústeres que contiene.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map;
var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';
function initMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: '<Your Bing Maps Key>',
center: new Microsoft.Maps.Location(20, -160),
zoom: 2
});
//Load the GeoJSON and Clustering modules.
Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {
//Load the GeoJSON data from a URL.
Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {
//Create a ClusterLayer with options and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
clusteredPinCallback: createCustomClusteredPin,
gridSize: 100
});
map.layers.insert(clusterLayer);
});
});
}
//A function that defines how clustered pins are rendered.
function createCustomClusteredPin(cluster) {
//Get the number of pushpins in the cluster
var clusterSize = cluster.containedPushpins.length;
var radius = 20; //Default radius to 20 pixels.
var fillColor = 'lime'; //Default to lime green.
if (clusterSize >= 750) {
radius = 40; //If point_count >= 750, radius is 40 pixels.
fillColor = 'red'; //If the point_count >= 750, color is red.
} else if (clusterSize >= 100) {
radius = 30; //If point_count >= 100, radius is 30 pixels.
fillColor = 'yellow'; //If the point_count >= 100, color is yellow.
}
//Create an SVG string of a circle with the specified radius and color.
var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
'<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
'<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
'</svg>'];
//Customize the clustered pushpin using the generated SVG and anchor on its center.
cluster.setOptions({
icon: svg.join(''),
anchor: new Microsoft.Maps.Point(radius, radius),
textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
});
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Después: Azure Maps
En Azure Maps, un origen de datos agrega y administra los datos. Las capas se conectan a los orígenes de datos y representan los datos en ellas. La clase DataSource en Azure Maps proporciona varias opciones de agrupación en clústeres.
cluster: indica al origen de datos que agrupe en clústeres los datos de punto.clusterRadius: el radio en píxeles de los puntos de clúster juntos.clusterMaxZoom: el nivel de zoom máximo en el que se produce la agrupación en clústeres. Cualquier otro zoom da como resultado que todos los puntos se representen como símbolos.clusterProperties: define las propiedades personalizadas que se calculan mediante expresiones en todos los puntos de cada clúster y se agregan a las propiedades de cada punto de clúster.
Cuando la agrupación en clústeres está habilitada, el origen de datos envía puntos de datos agrupados y no agrupados en clústeres a capas para su representación. El origen de datos es capaz de agrupar en clústeres cientos de miles de puntos de datos. Un punto de datos en clúster contiene las siguientes propiedades:
| Nombre de propiedad | Type | Description |
|---|---|---|
cluster |
boolean | Indica si la característica representa un clúster. |
cluster_id |
string | Un identificador exclusivo del clúster que se puede usar con las funciones getClusterExpansionZoom, getClusterChildren y getClusterLeaves de las clases DataSource. |
point_count |
number | El número de puntos que contiene el clúster. |
point_count_abbreviated |
string | Cadena que abrevia el valor de point_count, si es muy largo. (por ejemplo, 4000 se convierte en 4 K). |
La clase DataSource tiene la siguiente función auxiliar para acceder a información adicional sobre un clúster mediante cluster_id.
| Función | Tipo de valor devuelto | Descripción |
|---|---|---|
getClusterChildren(clusterId: number) |
Promise<Feature<Geometry, any> | Shape> |
Recupera los elementos secundarios del clúster especificado en el siguiente nivel de zoom. Estos elementos secundarios pueden ser una combinación de formas y subclústeres. Los subclústeres son características con propiedades que coinciden con las propiedades del clúster. |
getClusterExpansionZoom(clusterId: number) |
Promise<number> |
Calcula un nivel de zoom en el que el clúster empieza a expandirse o separarse. |
getClusterLeaves(clusterId: number, limit: number, offset: number) |
Promise<Feature<Geometry, any> | Shape> |
Recupera todos los puntos de un clúster. Establezca limit para que devuelva un subconjunto de los puntos y use offset para desplazarse por ellos. |
Al representar los datos en clúster en el mapa, a menudo es más fácil usar dos o más capas. En el ejemplo siguiente se usan tres capas, una capa de burbujas para dibujar círculos de colores escalados según el tamaño de los clústeres, una capa de símbolos para representar el tamaño de clúster como texto y una segunda capa de símbolos para representar los puntos no agrupados en clústeres. Para obtener más información sobre cómo representar datos en clústeres en Azure Maps, consulte Agrupación en clústeres de datos de punto en el SDK web.
Los datos GeoJSON se pueden importar directamente a Azure Maps mediante la función importDataFromUrl de la clase DataSource.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource;
var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';
function initMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-160, 20],
zoom: 1,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(datasource);
//Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
map.layers.add([
//Create a bubble layer for rendering clustered data points.
new atlas.layer.BubbleLayer(datasource, null, {
//Scale the size of the clustered bubble based on the number of points inthe cluster.
radius: [
'step',
['get', 'point_count'],
20, //Default of 20 pixel radius.
100, 30, //If point_count >= 100, radius is 30 pixels.
750, 40 //If point_count >= 750, radius is 40 pixels.
],
//Change the color of the cluster based on the value on the point_cluster property of the cluster.
color: [
'step',
['get', 'point_count'],
'lime', //Default to lime green.
100, 'yellow', //If the point_count >= 100, color is yellow.
750, 'red' //If the point_count >= 750, color is red.
],
strokeWidth: 0,
filter: ['has', 'point_count'] //Only rendered data points that have a point_count property, which clusters do.
}),
//Create a symbol layer to render the count of locations in a cluster.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'none' //Hide the icon image.
},
textOptions: {
textField: ['get', 'point_count_abbreviated'],
offset: [0, 0.4]
}
}),
//Create a layer to render the individual locations.
new atlas.layer.SymbolLayer(datasource, null, {
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
})
]);
//Retrieve a GeoJSON data set and add it to the data source.
datasource.importDataFromUrl(earthquakeFeed);
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Más recursos
- Adición de una capa de símbolos
- Adición de una capa de burbujas
- Datos de punto de clúster
- Uso de expresiones de estilo controladas por datos
Adición de un mapa térmico
Los mapas térmicos, también conocidos como mapas de densidad de puntos, son un tipo de visualización de datos utilizado para representar la densidad de los datos mediante una gama de colores. A menudo se utilizan para mostrar las "zonas activas" de los datos en un mapa y son una forma excelente de representar grandes conjuntos de datos de puntos.
En los siguientes ejemplos se carga del USGS una fuente GeoJSON de todos los terremotos del último mes y se representan como un mapa térmico.
Antes: Mapas de Bing
En Mapas de Bing, para crear un mapa térmico, cárguelo en el módulo de mapa térmico. Del mismo modo, el módulo GeoJSON se carga para agregar compatibilidad con los datos de GeoJSON.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map;
var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';
function initMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: '<Your Bing Maps Key>',
center: new Microsoft.Maps.Location(20, -160),
zoom: 2,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
//Load the GeoJSON and HeatMap modules.
Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {
//Load the GeoJSON data from a URL.
Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {
//Create a heat map and add it to the map.
var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
opacity: 0.65,
radius: 10
});
map.layers.insert(heatMap);
});
});
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Después: Azure Maps
En Azure Maps, cargue los datos GeoJSON en un origen de datos y conecte el origen de datos a una capa del mapa térmico. Los datos GeoJSON se pueden importar directamente a Azure Maps mediante la función importDataFromUrl de la clase DataSource.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map;
var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';
function initMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-160, 20],
zoom: 1,
style: 'satellite_road_labels',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the earthquake data.
datasource.importDataFromUrl(earthquakeFeed);
//Create a layer to render the data points as a heat map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
opacity: 0.65,
radius: 10
}));
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Más recursos
- Adición de una capa de mapa térmico
- Clase de capa de mapa térmico
- Opciones de capa de mapa térmico
- Uso de expresiones de estilo controladas por datos
Superposición de una capa de mosaicos
Las capas de mosaicos permiten superponer imágenes grandes que se han dividido en imágenes en mosaico más pequeñas y que se alinean con el sistema de mosaicos de los mapas. Esta es una manera común de superponer imágenes o conjuntos de datos grandes.
En el ejemplo siguiente se superpone una capa de mosaicos del radar meteorológico de Iowa Environmental Mesonet de la Universidad Estatal de Iowa que usa un esquema de nomenclatura de mosaicos de zoom de X, Y.
Antes: Mapas de Bing
En Mapas de Bing, las capas de mosaicos se pueden crear mediante la clase Microsoft.Maps.TileLayer.
var weatherTileLayer = new Microsoft.Maps.TileLayer({
mercator: new Microsoft.Maps.TileSource({
uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
})
});
map.layers.insert(weatherTileLayer);
Después: Azure Maps
En Azure Maps, se puede agregar una capa de mosaicos al mapa de la misma manera que cualquier otra. Se usa una dirección URL con formato que tiene marcadores de posición X, Y y zoom ({x}, {y}, {z} respectivamente) para indicar a la capa dónde acceder a los mosaicos. Las capas de mosaicos de Azure Maps también admiten los marcadores de posición {quadkey}, {bbox-epsg-3857} y {subdomain}.
Sugerencia
En Azure Maps las capas se pueden representar bajo otras capas, incluidas las capas base del mapa. A menudo es conveniente representar las capas de mosaicos debajo de las etiquetas del mapa para que resulten fáciles de leer. La función map.layers.add toma un segundo parámetro que es el identificador de una segunda capa para insertar la siguiente capa debajo. Para insertar una capa de mosaicos debajo de las etiquetas del mapa se puede usar el código siguiente:
map.layers.add(myTileLayer, "labels");
//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
opacity: 0.8,
tileSize: 256
}), 'labels');
Sugerencia
Las solicitudes de mosaicos se pueden capturar con la opción transformRequest del mapa. Esto le permitirá modificar o agregar encabezados a la solicitud si lo desea.
Más recursos
Mostrar datos del tráfico
Los datos de tráfico se pueden superponer en mapas de Bing y Azure.
Antes: Mapas de Bing
En Mapas de Bing, los datos de tráfico se pueden superponer en el mapa con el módulo de tráfico.
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
manager.show();
});
Después: Azure Maps
Azure Maps proporciona varias opciones diferentes para mostrar el tráfico. Los incidentes de tráfico, como los cierres de carreteras y los accidentes, se pueden mostrar como iconos en el mapa. El flujo de tráfico o las carreteras codificadas mediante colores se pueden superponer en el mapa y los colores se pueden modificar en relación con en el límite de velocidad registrado, el retraso normal esperado o el retraso absoluto. Los datos de incidentes en Azure Maps se actualizan cada minuto y el flujo de datos cada dos minutos.
map.setTraffic({
incidents: true,
flow: 'relative'
});
Si selecciona uno de los iconos de tráfico en Azure Maps, aparecerá más información en una ventana emergente.
Más recursos
Adición de una superposición de suelo
Tanto los mapas de Bing como Azure admiten la superposición de imágenes georreferenciadas en el mapa para que se muevan y escalen a medida que se desplaza y amplía el mapa. En Bing Maps, se conocen como superposiciones de suelo mientras que en Azure Maps se conocen como capas de imagen. Las capas de imagen son excelentes para construir planos de planta, superponer mapas antiguos o imágenes de un dron.
Antes: Mapas de Bing
Al crear una superposición de suelo en Bing Maps, debe especificar la dirección URL de la imagen superpuesta y un rectángulo delimitador que enlace la imagen al mapa. En este ejemplo se superpone una imagen de mapa de Newark New Jersey de 1922 en el mapa.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map;
function initMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: '<Your Bing Maps Key>',
center: new Microsoft.Maps.Location(40.740, -74.18),
zoom: 12
});
var overlay = new Microsoft.Maps.GroundOverlay({
//Create a LocationRect from the edges of the bounding box; north, west, south, east.
bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
imageUrl: 'newark_nj_1922.jpg'
});
map.layers.insert(overlay);
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Al ejecutar este código en un explorador, se mostrará un mapa similar al de la siguiente imagen:
Después: Azure Maps
En Azure Maps, las imágenes georreferenciadas pueden superponerse mediante la clase atlas.layer.ImageLayer. Esta clase requiere una dirección URL para una imagen y un conjunto de coordenadas para las cuatro esquinas de la imagen. La imagen debe estar hospedada en el mismo dominio o tener COR habilitados.
Sugerencia
Si solo tiene información de norte, sur, este, oeste y giro, y no hay coordenadas para cada esquina de la imagen, puede usar la función estática atlas.layer.ImageLayer.getCoordinatesFromEdges.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type='text/javascript'>
var map;
function initMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-74.18, 40.740],
zoom: 12,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
url: 'newark_nj_1922.jpg',
coordinates: [
[-74.22655, 40.773941], //Top Left Corner
[-74.12544, 40.773941], //Top Right Corner
[-74.12544, 40.712216], //Bottom Right Corner
[-74.22655, 40.712216] //Bottom Left Corner
]
}));
});
}
</script>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Más recursos
Adición de datos KML al mapa
Tanto Azure Maps como Mapas de Bing pueden importar y representar datos KML, KMZ, GeoRSS, GeoJSON y Well-Known Text (WKT) en el mapa. Azure Maps también admite GPX, GML, archivos CSV espaciales, Web Mapping Services (WMS), Web Mapping Tile Services (WMTS) y Web Feature Services (WFS).
Antes: Mapas de Bing
Al ejecutar este código en un explorador, se mostrará un mapa similar al de la siguiente imagen:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map;
function initMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: '<Your Bing Maps Key>',
center: new Microsoft.Maps.Location(40.747, -73.985),
zoom: 12
});
Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
var callback = function (dataset) {
if (dataset.shapes) {
var l = new Microsoft.Maps.Layer();
l.add(dataset.shapes);
map.layers.insert(l);
}
if (dataset.layers) {
for (var i = 0, len = dataset.layers.length; i < len; i++) {
map.layers.insert(dataset.layers[i]);
}
}
};
Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
});
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Después: Azure Maps
En Azure Maps, GeoJSON es el formato de datos principal que se usa en el SDK web, se pueden integrar fácilmente más formatos de datos espaciales mediante el módulo de E/S espacial. Este módulo tiene funciones para la lectura y la escritura de datos espaciales y también incluye una capa de datos simple que puede representar fácilmente los datos de cualquiera de estos formatos de datos espaciales. Para leer los datos de un archivo de datos espaciales, pase una dirección URL, o bien los datos sin procesar como una cadena o un blob, a la función atlas.io.read. Esto devuelve todos los datos analizados del archivo que se pueden agregar al mapa. KML es un poco más complejo que el formato de datos espaciales, ya que incluye mucha más información de estilo. La clase SpatialDataLayer admite la representación de la mayoría de estos estilos; sin embargo, las imágenes de iconos deben cargarse en el mapa antes de cargar los datos de características y las superposiciones en el suelo deben agregarse como capas al mapa por separado. Al cargar datos mediante una dirección URL, debe estar hospedada en un punto de conexión habilitado para CORS o se debe pasar un servicio proxy como una opción en la función de lectura.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- Add reference to the Azure Maps Spatial IO module. -->
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
<script type='text/javascript'>
var map, datasource, layer;
function initMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);
//Read a KML file from a URL or pass in a raw KML string.
atlas.io.read('myKMLFile.kml').then(async r => {
if (r) {
//Check to see if there are any icons in the data set that need to be loaded into the map resources.
if (r.icons) {
//For each icon image, create a promise to add it to the map, then run the promises in parrallel.
var imagePromises = [];
//The keys are the names of each icon image.
var keys = Object.keys(r.icons);
if (keys.length !== 0) {
keys.forEach(function (key) {
imagePromises.push(map.imageSprite.add(key, r.icons[key]));
});
await Promise.all(imagePromises);
}
}
//Load all features.
if (r.features && r.features.length > 0) {
datasource.add(r.features);
}
//Load all ground overlays.
if (r.groundOverlays && r.groundOverlays.length > 0) {
map.layers.add(r.groundOverlays);
}
//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>
</head>
<body onload="initMap()">
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Más recursos
Incorporación de herramientas de dibujo
Tanto Bing Maps como Azure Maps proporcionan un módulo que permite al usuario dibujar y editar formas en el mapa mediante el mouse u otro dispositivo de entrada. Ambos admiten el dibujo de marcadores, líneas y polígonos. Azure Maps también proporciona opciones para dibujar círculos y rectángulos.
Antes: Mapas de Bing
En Mapas de Bing, el módulo DrawingTools se carga mediante la función Microsoft.Maps.loadModule. Una vez cargado, se puede crear una instancia de la clase DrawingTools y se llama a la función showDrawingManager para agregar una barra de herramientas al mapa.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript'>
var map, drawingManager;
function initMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: '<Your Bing Maps Key>'
});
//Load the DrawingTools module
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create an instance of the DrawingTools class and bind it to the map.
var tools = new Microsoft.Maps.DrawingTools(map);
//Show the drawing toolbar and enable editting on the map.
tools.showDrawingManager(function (manager) {
//Store a reference to the drawing manager as it will be useful later.
drawingManager = manager;
});
});
}
</script>
<!-- Bing Maps Script Reference -->
<script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
<div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>
Después: Azure Maps
En Azure Maps, el módulo de herramientas de dibujo debe cargarse mediante la carga de los archivos JavaScript y CSS a los que se debe hacer referencia en la aplicación. Una vez cargado el mapa, se puede crear una instancia de la clase DrawingManager y una instancia de DrawingToolbar adjunta.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
<script type='text/javascript'>
var map, drawingManager;
function initMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
});
});
}
</script>
</head>
<body onload="initMap()">
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Sugerencia
En las capas de Azure Maps, las herramientas de dibujo proporcionan a los usuarios varias maneras de dibujar formas. Por ejemplo, al dibujar un polígono, el usuario puede hacer clic para agregar cada punto, o mantener presionado el botón primario del mouse y arrastrar para dibujar un trazado. Esta configuración se puede modificar mediante la opción interactionType de DrawingManager.
Más recursos
Recursos adicionales
Eche un vistazo a los módulos del SDK web de Azure Maps de código abierto. Estos módulos proporcionan más funcionalidades y son totalmente personalizables.
Revise los ejemplos de código relacionados con la migración de otras características de Mapas de Bing:
Visualizaciones de datos
Servicios
Obtenga más información sobre el SDK web de Azure Maps.
Pasos siguientes
Más información sobre la migración de Mapas de Bing a Azure Maps.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de