Procedimientos recomendados del SDK de Azure Maps Web

Este documento se centra en los procedimientos recomendados para el SDK Web de Azure Maps, sin embargo, muchos de los procedimientos recomendados y las optimizaciones que se describen pueden aplicarse a todos los demás SDK de Azure Maps.

El SDK de Azure Maps web proporciona un lienzo eficaz para representar grandes conjuntos de datos espaciales de muchas maneras diferentes. En algunos casos, hay varias maneras de representar los datos de la misma manera, pero en función del tamaño del conjunto de datos y de la funcionalidad deseada, un método puede funcionar mejor que otros. En este artículo se resaltan los procedimientos recomendados y sugerencias y trucos para maximizar el rendimiento y crear una experiencia de usuario fluida.

Por lo general, al considerar mejorar el rendimiento del mapa, busque formas de reducir el número de capas y orígenes, así como la complejidad de los conjuntos de datos y los estilos de representación que se usan.

Recomendaciones de seguridad

Para obtener más información sobre los procedimientos recomendados de seguridad, consulte Procedimientos recomendados de autenticación y autorización.

Usar las versiones más recientes de Azure Maps

Los SDK de Azure Maps pasan por las pruebas de seguridad periódicas junto con cualquier biblioteca de dependencias externa que use los SDK. Cualquier problema de seguridad conocido se corrige oportunamente y se lanza a producción. Si la aplicación apunta a la versión principal más reciente de la versión hospedada del SDK Web de Azure Maps, recibe automáticamente todas las actualizaciones de versión secundaria que incluyen correcciones relacionadas con la seguridad.

Si hospeda automáticamente el SDK Web de Azure Maps a través del módulo npm, asegúrese de usar el símbolo de intercalación (^) en junto con el número de versión del paquete de Azure Maps npm en el archivo package.json para que apunte a la última versión secundaria.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Sugerencia

Use siempre la versión más reciente del control npm de Azure Maps. Para obtener más información, consulte azure-maps-control en la documentación de npm.

Optimizar la carga inicial del mapa

Cuando se carga una página web, una de las primeras cosas que se quieren hacer es empezar a representar algo lo antes posible para que el usuario no se quede mirando a una pantalla en blanco.

Ver el evento de asignación lista

Del mismo modo, cuando el mapa se carga por primera vez, se suele querer cargar datos en él lo más rápido posible para que el usuario no mire un mapa vacío. Dado que el mapa carga los recursos de forma asincrónica, tiene que esperar hasta que la asignación esté lista para interactuar antes de intentar representar sus propios datos. Hay dos eventos que puede esperar, un evento load y un evento ready. El evento de carga se activará después de que la asignación haya terminado de cargar completamente la vista de asignación inicial y se hayan cargado todos los mosaicos de asignación. Si aparece el error "El estilo no ha terminado de cargarse", debe utilizar el evento load y esperar a que el estilo se cargue por completo.

El evento listo se activa cuando tiene los recursos de asignación que se necesitan como mínimo para empezar a interactuar con la asignación. Más concretamente, el evento ready se desencadena cuando el mapa carga los datos de estilo por primera vez. El evento listo se puede activar a menudo a la mitad del tiempo del evento cargar y, por lo tanto, le permite empezar a cargar los datos en la asignación antes. Evite realizar cambios en el estilo o el lenguaje del mapa en este momento, ya que hacerlo puede desencadenar una recarga de estilo.

Carga lenta del SDK web de Azure Maps

Si el mapa no se necesita de inmediato, cargue de forma lenta el SDK web de Azure Maps hasta que sea necesario. Así se retrasará la carga de los archivos JavaScript y CSS utilizados por el SDK web de Azure Maps hasta que sea necesario. Un escenario común en el que ocurre esto es cuando el mapa se carga en una pestaña o un panel flotante que no se muestra al cargar la página.

El ejemplo de código de Carga lenta del mapa muestra cómo retrasar la carga del SDK web de Azure Maps hasta que se presione un botón. Para el código fuente, consulte Carga diferida del código de ejemplo de mapa.

Agregar un marcador de posición para el mapa

Si el mapa tarda un tiempo en cargarse debido a limitaciones de red u otras prioridades dentro de la aplicación, considere la posibilidad de agregar una pequeña imagen de fondo a la asignación div como un marcador de posición para la asignación. De esta forma, se rellenará el vacío de div del mapa mientras se carga.

Establecer opciones de cámara y estilo de mapa iniciales en la inicialización

A menudo, las aplicaciones quieren cargar el mapa en una ubicación o un estilo específicos. A veces, los desarrolladores esperan hasta que se carga la asignación (o esperan el evento ready) y, a continuación, usan las funciones setCamera o setStyle del mapa. A menudo, se tardará más tiempo en llegar a la vista de mapa inicial deseada, ya que muchos recursos acaban de cargarse de forma predeterminada antes de que se carguen los recursos necesarios para la vista de mapa deseada. Un mejor enfoque consiste en pasar las opciones de estilo y la cámara de mapa deseada en el mapa al inicializarla.

Optimización del origen de datos

El SDK Web tiene dos orígenes de datos,

• Origen de GeoJSON: la clase DataSource administra los datos de ubicación sin procesar en formato GeoJSON localmente. Adecuado para conjuntos de datos de tamaño pequeño a medio (con cientos de miles de características).
• Origen de mosaico vectorial: la clase VectorTileSource carga los datos con formato de mosaico vectorial para la vista del mapa actual, en función del sistema de mosaico de mapas. Ideal para conjuntos de datos grandes o masivos (millones o miles de millones de características).

Usar soluciones basadas en mosaicos para grandes conjuntos de valores

Si trabaja con conjuntos de datos más grandes que contienen millones de características, la manera recomendada de lograr un rendimiento óptimo es exponer los datos mediante una solución de servidor como vector o el servicio de mosaico de imagen de trama.
Los mosaicos vectoriales están optimizados para cargar solo los datos que están en la vista con las geometrías recortadas en el área de enfoque del icono y generalizadas para que coincidan con la resolución del mapa para el nivel de zoom del icono.

La plataforma Azure Maps Creator recupera datos en formato de mosaico vectorial. Otros formatos de datos pueden usar herramientas como Tippecanoe. Para obtener más información sobre cómo trabajar con iconos vectoriales, consulte el archivo Léame awesome-vector-tiles de Mapbox en GitHub.

También es posible crear un servicio personalizado que represente los conjuntos de datos como mosaicos de imagen rasterizada en el lado servidor y cargar los datos mediante la clase TileLayer en el SDK de MAP. Esto proporciona un rendimiento excepcional, ya que el mapa solo necesita cargar y administrar unas docenas de imágenes como máximo. Sin embargo, hay algunas limitaciones en el uso de mosaicos de tramas, ya que los datos sin procesar no están disponibles localmente. A menudo es necesario un servicio secundario para potenciar cualquier tipo de experiencia de interacción, por ejemplo, averiguar en qué forma un usuario hizo clic. Además, el tamaño de archivo de un mosaico de tramas suele ser mayor que un icono de vector comprimido que contiene geometrías generalizadas y optimizadas de nivel de zoom.

Para obtener más información sobre los orígenes de datos, vea Creación de un origen de datos.

Combinar varios conjuntos de valores en un único origen de mosaico de vector

Los orígenes de datos menos que el mapa tiene que administrar, cuanto más rápido puede procesar todas las características que se van a mostrar. En concreto, cuando se trata de orígenes de mosaicos, la combinación de dos orígenes de mosaicos vectoriales reduce el número de solicitudes HTTP para recuperar los mosaicos en la mitad y la cantidad total de datos sería ligeramente menor, ya que solo hay un encabezado de archivo.

La combinación de varios conjuntos de datos en un único origen de mosaico de vector se puede lograr mediante una herramienta como Tippecanoe. Los conjuntos de datos se pueden combinar en una sola colección de características o se pueden separar en capas independientes dentro del mosaico de vector conocido como capas de origen. Al conectar un origen de mosaico vectorial a una capa de representación, debe especificar la capa de origen que contiene los datos que desea representar con la capa.

Reducir el número de actualizaciones de lienzo debido a las actualizaciones de datos

Hay varias maneras de agregar o actualizar los datos de una clase DataSource. La siguiente lista muestra los distintos métodos y algunas consideraciones para garantizar un buen rendimiento.

• La función de orígenes de datos add se puede usar para agregar una o más características a un origen de datos. Cada vez que se llama a esta función, se desencadena una actualización del lienzo del mapa. Si va a agregar muchas características, combínelos en una matriz o colección de características y pasándolos a esta función una vez, en lugar de recorrer en bucle un conjunto de datos y llamar a esta función para cada característica.
• La función de orígenes de datos setShapes se puede utilizar para sobrescribir todas las formas de un origen de datos. En el capó, combina los orígenes de datos clear y add las funciones y realiza una única actualización del lienzo de mapa en lugar de dos, que es más rápida. Asegúrese de usar esta función cuando desee actualizar todos los datos de un origen de datos.
• La función de orígenes de datos importDataFromUrl se puede usar para cargar un archivo GEOjson a través de una dirección URL en un origen de datos. Una vez que se han descargado los datos, se pasan a la función de orígenes de datos add. Si el archivo GeoJSON está hospedado en un dominio diferente, asegúrese de que el otro dominio admite solicitudes entre dominios (CORs). Si no tiene en cuenta la posibilidad de copiar los datos en un archivo local del dominio o de crear un servicio de proxy con CORs habilitado. Si el archivo es grande, considere la posibilidad de convertirlo en un origen de mosaico vectorial.
• Si las características se ajustan a la clase Shape, las funciones addProperty, setCoordinates y setProperties de la forma desencadenarán una actualización en el origen de datos y una actualización del lienzo del mapa. Todas las características devueltas por los orígenes de datos getShapes y getShapeById las funciones se ajustan automáticamente con la clase Shape. Si desea actualizar varias formas, es más rápido convertirlas en JSON mediante la función de orígenes de datos toJson, editando GeoJSON y, a continuación, pasando estos datos a la función de orígenes de datos setShapes.

Evitar llamar a la función de borrado de orígenes de datos innecesariamente

La llamada a la función Clear de la clase DataSource produce una actualización del lienzo de mapa. Si la función clear se llama varias veces en una fila, se puede producir un retraso mientras el mapa espera a que se produzca cada actualización.

Se trata de un escenario común en las aplicaciones que borran el origen de datos, descargan nuevos datos, borran de nuevo el origen de datos y, a continuación, agregan los nuevos datos al origen de datos. En función de la experiencia de usuario deseada, las siguientes alternativas serían mejores.

• Borre los datos antes de descargar los nuevos datos y, a continuación, pase los nuevos datos a los orígenes de datos a la función add o setShapes. Si este es el único conjunto de datos en el mapa, el mapa permanece vacío mientras se descargan los datos nuevos.
• Descargue los nuevos datos y, a continuación, páselo a la función de orígenes de datos setShapes. Esto reemplaza todos los datos del mapa.

Quitar las características y propiedades no utilizadas

Si el conjunto de datos contiene características que no se van a usar en la aplicación, quítelas. Del mismo modo, quite cualquier propiedad de las características que no sean necesarias. Esto presenta varias ventajas:

• Reduce la cantidad de datos que se deben descargar.
• Reduce el número de características que es necesario recorrer en bucle al representar los datos.
• A veces puede ayudar a simplificar o quitar expresiones y filtros controlados por datos, lo que significa menos procesamiento necesario en el momento de la representación.

Cuando las características tienen muchas propiedades o contenido, es mucho más eficaz limitar lo que se agrega al origen de datos a solo lo necesario para la representación y tener un método o servicio independiente para recuperar la propiedad o el contenido adicional cuando sea necesario. Por ejemplo, si tiene un mapa sencillo que muestra las ubicaciones de un mapa cuando se hace clic en una serie de contenido detallado, se muestra. Si desea usar el estilo controlado por datos para personalizar cómo se representan las ubicaciones en el mapa, solo debe cargar las propiedades necesarias en el origen de datos. Si desea mostrar el contenido detallado, utilice el identificador de la característica para recuperar los demás contenidos por separado. Si el contenido se almacena en el servidor, puede reducir drásticamente la cantidad de datos que es necesario descargar cuando se carga inicialmente la asignación al usar un servicio para recuperarlo drásticamente.

Además, reducir el número de dígitos significativos en las coordenadas de las características también puede reducir significativamente el tamaño de los datos. No es raro que las coordenadas contengan 12 o más posiciones decimales. sin embargo, seis posiciones decimales tienen una precisión de aproximadamente 0,1 medidor, que suele ser más precisa que la ubicación que representa la coordenada (se recomiendan seis posiciones decimales al trabajar con datos de ubicación pequeños, como los diseños de creación interiores). Si tiene más de seis posiciones decimales, es probable que no se produzca ninguna diferencia en cómo se representan los datos y solo se requiere que el usuario descargue más datos para obtener una ventaja adicional.

Esta es una lista de herramientas útiles para trabajar con datos GeoJSON.

Usar un origen de datos independiente para cambiar rápidamente los datos

A veces, es necesario actualizar rápidamente los datos en el mapa para cosas como Mostrar actualizaciones dinámicas de datos de streaming o animar características. Cuando se actualiza un origen de datos, el motor de representación recorre y representa todas las características del origen de datos. Mejore el rendimiento general separando los datos estáticos de cambio rápido en diferentes orígenes de datos, lo que reduce el número de características que se vuelven a representar durante cada actualización.

Si usa mosaicos vectoriales con datos en directo, una manera fácil de admitir las actualizaciones es usar el encabezado de respuesta expires. De forma predeterminada, cualquier capa de mosaico vectorial o de mosaico de tramas volverá a cargar automáticamente los mosaicos cuando la fecha expires. Los mosaicos de flujo de tráfico e incidente en la asignación usan esta característica para garantizar que se muestren datos de tráfico nuevos en tiempo real en el mapa. Esta característica se puede deshabilitar si se establece la opción de servicio de asignaciones refreshExpiredTiles en false.

Ajuste del búfer y las opciones de tolerancia en orígenes de datos GeoJSON

La clase DataSource convierte los datos de ubicación sin procesar en mosaicos vectoriales locales para la representación en la marcha. Estos mosaicos de vectores locales recortan los datos sin procesar en los límites del área de mosaico con un poco de búfer para garantizar una representación fluida entre los mosaicos. Cuanto menor sea la opción buffer, menos datos superpuestos se almacenarán en los mosaicos de vectores locales y mejor rendimiento, sin embargo, mayor será el cambio de los artefactos de representación que se producen. Intente modificar esta opción para obtener la combinación correcta de rendimiento con los artefactos de representación mínimos.

La clase DataSource también tiene una opción tolerance que se utiliza con el algoritmo de simplificación de Douglas-Peucker cuando se reduce la resolución de las geometrías con fines de representación. Al aumentar este valor de tolerancia se reduce la resolución de las geometrías y, a su vez, se mejorará el rendimiento. Retoque esta opción para obtener la combinación correcta de rendimiento y resolución de geometría del conjunto de datos.

Establecer la opción de zoom máximo de orígenes de datos GeoJSON

La clase DataSource convierte los datos de ubicación sin procesar en mosaicos vectoriales locales para la representación en la marcha. De forma predeterminada, lo hace hasta el nivel de zoom 18, momento en el que, cuando se acerque más hacia abajo, realiza un muestreo de los datos de los mosaicos generados para el nivel de zoom 18. Esto funciona bien con la mayoría de los conjuntos de datos que necesitan tener una alta resolución cuando se amplía en estos niveles. Sin embargo, cuando se trabaja con conjuntos de datos que es más probable que se vean cuando se aleja más, por ejemplo, al ver polígonos de estado o provincia, si se establece la opción minZoom del origen de datos en un valor más pequeño como, 12 se reduce la cantidad de cálculos, la generación de mosaicos local que se produce y la memoria que usa el origen de datos y el rendimiento.

Minimizar la respuesta GeoJSON

Al cargar datos de GeoJSON desde un servidor a través de un servicio o mediante la carga de un archivo plano, asegúrese de que los datos se han reducido para quitar los caracteres de espacio innecesario que hacen que el tamaño de la descarga sea mayor que el necesario.

Acceso a GeoJSON sin procesar mediante una dirección URL

Es posible almacenar objetos GeoJSON en línea dentro de JavaScript; sin embargo, esto usa más memoria, ya que las copias de la misma se almacenan en la variable que creó para este objeto y en la instancia de origen de datos, que la administra en un trabajador web independiente. Exponga el archivo GeoJSON a la aplicación con una dirección URL en su lugar y el origen de datos carga una única copia de datos directamente en el trabajo Web de orígenes de datos.

Optimizar las capas de representación

Azure Maps proporciona varios niveles diferentes para representar datos en un mapa. Hay muchas optimizaciones que puede aprovechar para adaptar estas capas a su escenario, lo que aumenta el rendimiento y la experiencia de usuario global.

Crear capas una vez y reutilizarlas

El SDK Web de Azure Maps es controlado por datos. Los datos entran en orígenes de datos, que después se conectan a capas de representación. Si desea cambiar los datos del mapa, actualice los datos en el origen de datos o cambie las opciones de estilo de una capa. Suele ser más rápido que eliminar y volver a crear capas con cada cambio.

Considerar capa de burbuja sobre la capa de símbolos

La capa de burbuja representa los puntos como círculos en el mapa y puede tener fácilmente su radio y estilo de color usando una expresión controlada por datos. Puesto que el círculo es una forma simple de WebGL para dibujar, el motor de representación puede representarlas más rápido que una capa de símbolos, que tiene que cargar y representar una imagen. La diferencia de rendimiento de estas dos capas de representación es apreciable al representar decenas de miles de puntos.

Usar marcadores HTML y ventanas emergentes con moderación

A diferencia de la mayoría de las capas del control web de Azure Maps que usan WebGL para la representación, los marcadores HTML y las ventanas emergentes usan elementos DOM tradicionales para la representación. Por tanto, mientras más marcadores HTML y ventanas emergentes se agreguen a una página, más elementos DOM habrá. Se puede degradar el rendimiento después de agregar cientos de marcadores HTML o ventanas emergentes. Para conjuntos de datos grandes, considere la posibilidad de agrupar los datos en clústeres o de usar una capa de símbolo o burbuja.

El código de ejemplo Reutilización de ventanas emergentes con varios anclajes muestra cómo crear un único elemento emergente y reutilizarlo actualizando su contenido y posición. Para obtener el código fuente, consulte el código de ejemplo de reutilización ventanas emergentes con varios anclajes.

Dicho esto, si solo tiene unos cuantos puntos para representar en el mapa, es posible que se prefiera la simplicidad de los marcadores HTML. Además, los marcadores HTML pueden ser fácilmente arrastrables si es necesario.

Combinar capas

El mapa es capaz de representar cientos de capas; sin embargo, cuanto más capas hay, más tiempo se tarda en representar una escena. Una estrategia para reducir el número de capas es combinar las capas que tienen estilos similares o se pueden aplicar estilos mediante estilos controlados por datos.

Por ejemplo, considere un conjunto de datos en el que todas las características tienen una isHealthy propiedad que puede tener un valor de true o false. Si crea una capa de burbujas que represente burbujas de color diferentes basadas en esta propiedad, hay varias maneras de hacerlo, tal y como se muestra en la lista siguiente, con un rendimiento mínimo de mayor rendimiento.

• Divida los datos en dos orígenes de datos en función del valor isHealthy y adjunte una capa de burbuja con una opción de color codificado de forma rígida a cada origen de datos.
• Coloque todos los datos en un único origen de datos y cree dos capas de burbujas con una opción de color codificada de forma rígida y un filtro basado en la isHealthy propiedad.
• Coloque todos los datos en un único origen de datos, cree una sola capa de burbujas con una expresión de estilo case para la opción de color basada en la propiedad isHealthy. Este es un ejemplo de código que muestra justo esto.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Crear animaciones de capas de símbolos suaves

Las capas de símbolos tienen habilitada la detección de colisiones de forma predeterminada. Esta detección de colisiones pretende asegurarse de que no se superpongan dos símbolos. Las opciones de icono y texto de una capa de símbolos tienen dos opciones,

• allowOverlap: especifica si el símbolo es visible cuando entra en conflicto con otros símbolos.
• ignorePlacement: especifica si los otros símbolos pueden entrar en conflicto con el símbolo.

Ambas opciones se establecen en false de forma predeterminada. Al animar un símbolo, los cálculos de detección de colisiones se ejecutan en cada fotograma de la animación, lo que puede ralentizar la animación y hacer que parezca menos fluido. Para suavizar la animación, establezca estas opciones en true.

El código de ejemplo Animación de símbolos sencillos muestra una forma sencilla de animar una capa de símbolos. Para obtener el código fuente de este ejemplo, consulte Código de ejemplo de animación de símbolos simple.

Especificar el intervalo de nivel de zoom

Si los datos cumplen uno de los siguientes criterios, asegúrese de especificar el nivel de zoom mínimo y máximo de la capa para que el motor de representación pueda omitirla cuando esté fuera del intervalo de nivel de zoom.

• Si los datos proceden de un origen de mosaicos vectoriales, a menudo las capas de origen para tipos de datos diferentes solo están disponibles a través de un intervalo de niveles de zoom.
• Si usa una capa de mosaico que no tiene mosaicos en los niveles de zoom del 0 al 24 y quiere que solo se representen en los niveles en los que tiene mosaicos y no intente rellenar los mosaicos que faltan con mosaicos de otros niveles de zoom.
• Si solo desea representar una capa en determinados niveles de zoom. Todas las capas tienen opción minZoom y maxZoom donde la capa se renderiza cuando se encuentra entre estos niveles de zoom de acuerdo con la lógica de maxZoom > zoom >= minZoom.

Ejemplo

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Especificar los límites de la capa de mosaico y el intervalo de zoom de origen

De forma predeterminada, las capas de mosaico cargan mosaicos en todo el globo. Sin embargo, si el servicio de mosaico solo tiene iconos para un área determinada, el mapa intenta cargar los mosaicos cuando se encuentre fuera de esta área. Cuando esto sucede, se realiza una solicitud para cada mosaico y se espera una respuesta que pueda bloquear otras solicitudes realizadas por la asignación y, por lo tanto, ralentizar la representación de otras capas. Al especificar los límites de una capa de mosaico, el mapa solo solicita mosaicos que estén dentro de ese cuadro de límite. Además, si la capa de mosaico solo está disponible entre determinados niveles de zoom, especifique el zoom de origen mínimo y máximo por la misma razón.

Ejemplo

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Usar un estilo de mapa en blanco cuando el mapa base no esté visible

Si se superpone una capa en el mapa que tapa por completo el mapa base, considere la posibilidad de establecer el estilo de mapa en blank o blank_accessible para que no se represente el mapa base. Un escenario común para hacerlo es cuando la superposición de un mosaico de globo terráqueo completo en no tiene ninguna opacidad ni área transparente sobre el mapa base.

Animar las capas de imagen o de mosaico sin problemas

Si desea animar a través de una serie de capas de imagen o de mosaico en el mapa. A menudo, es más rápido crear una capa para cada capa de imagen o de mosaico y cambiar la opacidad que para actualizar el origen de una sola capa en cada fotograma de animación. Ocultar una capa estableciendo la opacidad en cero y mostrar una nueva capa estableciendo su opacidad en un valor mayor que cero es más rápido que actualizar el origen de la capa. Como alternativa, se puede alternar la visibilidad de las capas, pero asegúrese de establecer la duración de transición de la capa en cero; de lo contrario, se anima la capa al mostrarla, lo que provoca un efecto de parpadeo, ya que la capa anterior se habría ocultado antes de que la capa nueva estuviera visible.

Ajustar la lógica de detección de colisiones de capas de símbolos

La capa de símbolos tiene dos opciones que existen para el icono y el texto denominado allowOverlap y ignorePlacement. Estas dos opciones especifican si el icono o el texto de un símbolo pueden superponerse o superponerse. Cuando se establecen en false, la capa de símbolos realiza cálculos al representar cada punto para ver si entra en conflicto con cualquier otro símbolo ya representado en la capa y, si lo hace, no representa el símbolo en conflicto. Esto es bueno a la vez que se reduce la aglomeración en el mapa y se reduce el número de objetos que se representan. Al establecer estas opciones en false, se omite esta lógica de detección de colisiones y todos los símbolos se representan en el mapa. Retoque esta opción para obtener la mejor combinación de rendimiento y experiencia del usuario.

Conjuntos de datos de punto grande del clúster

Cuando se trabaja con conjuntos grandes de puntos de datos, es posible que cuando se representan en determinados niveles de zoom, muchos de los puntos se superpongan y solo sean visibles parcialmente, si es que lo son. La agrupación en clústeres es un proceso que consiste en agrupar puntos cercanos y representarlos como un único punto agrupado. A medida que el usuario amplía en el mapa, los grupos se dividen en sus puntos individuales. Esto puede reducir de forma significativa la cantidad de datos que se deben representar, hacer que el mapa se sienta menos saturado y mejorar el rendimiento. La clase DataSource tiene opciones para la agrupación en clústeres de datos localmente. Además, muchas herramientas que generan mosaicos vectoriales también tienen opciones de agrupación en clústeres.

Además, aumente el tamaño del radio del clúster para mejorar el rendimiento. Cuanto mayor sea el radio del grupo, menos puntos agrupados hay que controlar y renderizar. Para más información, consulte Datos de agrupación de puntos en el SDK web.

Usar mapas térmicos en clúster ponderados

La capa de mapa térmico puede representar decenas de miles de puntos de datos fácilmente. Para conjuntos de datos más grandes, considere la posibilidad de habilitar la agrupación en clústeres en el origen de datos y el uso de un radio de clúster pequeño y usar la propiedad point_count de clústeres como ponderación de la asignación de alto. Cuando el radio del grupo tiene solo unos pocos píxeles de tamaño, habrá poca diferencia visual en el mapa térmico representado. El uso de un radio de clúster más grande mejora el rendimiento, pero puede reducir la resolución del mapa térmico representado.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Para obtener más información, consulte Agrupación en clústeres y la capa de mapas térmicos.

Mantener los recursos de imagen pequeños

Se pueden agregar imágenes al sprite de imagen de los mapas para representar iconos en una capa de símbolos o patrones en una capa de polígonos. Mantenga estas imágenes pequeñas para minimizar la cantidad de datos que se deben descargar y la cantidad de espacio que ocupan en el sprite de imagen de mapas. Cuando use una capa de símbolos que escale el icono mediante la opción size, use una imagen que tenga el tamaño máximo que debe mostrar el plan en el mapa y que no sea más grande. De esta forma, el icono se representará con alta resolución y se minimizan los recursos que utiliza. Además, también se puede usar SVG como un formato de archivo más pequeño para imágenes de icono simples.

Optimizar expresiones

Las expresiones de estilo controladas por datos proporcionan flexibilidad y eficacia para filtrar y aplicar estilos a los datos del mapa. Hay muchas maneras en las que se pueden optimizar expresiones. Aquí encontrará algunas sugerencias.

Reduzca la complejidad del método

Filtra todos los datos de un origen de datos y comprueba si cada filtro coincide con la lógica del filtro. Si los filtros son complejos, esto puede causar problemas de rendimiento. A continuación se indican algunas estrategias posibles para solucionarlo.

• Si usa mosaicos vectoriales, divida los datos en diferentes capas de origen.
• Si usa la clase DataSource, divida los datos en orígenes de datos independientes. Intente equilibrar el número de orígenes de datos con la complejidad del filtro. Un número excesivo de orígenes de datos puede causar problemas de rendimiento, por lo que es posible que tenga que realizar algunas pruebas para averiguar qué funciona mejor para su escenario.
• Al usar un filtro complejo en una capa, considere la posibilidad de usar varias capas con expresiones de estilo para reducir la complejidad del filtro. Evite crear un grupo de capas con estilos codificados cuando se pueden utilizar expresiones de estilo, ya que un gran número de capas también puede causar problemas de rendimiento.

Asegúrese de que las expresiones no generan errores

Las expresiones se suelen usar para generar código para realizar cálculos o operaciones lógicas en el momento de la representación. Al igual que el código en el resto de la aplicación, asegúrese de que los cálculos y el sentido lógico tienen sentido y no son propensos a errores. Los errores en las expresiones provocan problemas al evaluar la expresión, lo que puede provocar problemas de representación y rendimiento reducidos.

Un error común que se debe tener en cuenta es tener una expresión que se basa en una propiedad de característica que podría no existir en todas las características. Por ejemplo, el código siguiente usa una expresión para establecer la propiedad color de una capa de burbuja en la propiedad myColor de una característica.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

El código anterior funciona correctamente si todas las características del origen de datos tienen una propiedad myColor y el valor de esa propiedad es un color. Esto puede no ser un problema si tiene un control completo de los datos en el origen de datos y sabe que todas las características tienen un color válido en una propiedad myColor. Dicho esto, para que este código sea seguro frente a errores, case se puede usar una expresión con la has expresión para comprobar que la característica tiene la propiedad myColor. Si es así, to-color se puede usar la expresión de tipo para intentar convertir el valor de esa propiedad en un color. Si el color no es válido, se puede usar un color de reserva. En el código siguiente se muestra cómo hacerlo y se establece el color de reserva en verde.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Ordenar las expresiones booleanas de más a menos específicas

Reduzca el número total de pruebas condicionales necesarias al usar expresiones booleanas que contienen varias pruebas condicionales ordenándolas de la mayoría a las menos específicas.

Simplifica expresiones

Las expresiones pueden ser eficaces y a veces complejas. Cuanto más sencilla sea una expresión, más rápidamente se evalúa. Por ejemplo, si se necesita una comparación simple, una expresión como ['==', ['get', 'category'], 'restaurant'] sería mejor que usar una expresión de coincidencia como ['match', ['get', 'category'], 'restaurant', true, false]. En este caso, si la propiedad que se está comprobando es un valor booleano, una get expresión sería incluso más sencilla ['get','isRestaurant'].

Solución de problemas del SDK web

A continuación se muestran algunas sugerencias para depurar algunos de los problemas comunes que se producen al desarrollar con el SDK de Azure Maps Web.

¿Por qué no se muestra el mapa al cargar el control web?

Cosas que puede comprobar:

• Asegúrese de que completa las opciones de autenticación del mapa. Sin autenticación, el mapa carga un lienzo en blanco y devuelve un error 401 en la pestaña red de las herramientas de desarrollo del explorador.
• Asegúrese de que dispone de una conexión a Internet.
• Compruebe si hay errores de las herramientas de desarrollo del explorador en la consola. Algunos errores pueden provocar que la asignación no se represente. Depure la aplicación.
• Asegúrese de que está usando un explorador compatible.

Todos los datos se muestran en el otro lado del mundo, ¿qué sucede?

Las coordenadas, también denominadas posiciones, en los SDK de Azure Maps se alinean con el formato estándar del sector geoespacial de [longitude, latitude]. El mismo formato también es cómo se definen las coordenadas en el esquema GeoJSON; los datos principales con formato usados dentro de los SDK de Azure Maps. Si los datos aparecen en el lado opuesto del mundo, lo más probable es que se deba a que los valores de longitud y latitud se invierten en la información de coordenadas o posiciones.

¿Por qué aparecen marcadores HTML en el lugar equivocado del control Web?

Cosas que puede comprobar:

• Si usa el contenido personalizado para el marcador, asegúrese de que las opciones anchor y pixelOffset son correctas. De forma predeterminada, el centro inferior del contenido se alinea con la posición en el mapa.
• Asegúrese de que se ha cargado el archivo CSS para Azure Maps.
• Inspeccione el elemento DOM del marcador HTML para ver si cualquier CSS de la aplicación se ha anexado al marcador y está afectando a su posición.

¿Por qué los iconos o el texto de la capa de símbolos aparecen en el lugar equivocado?

Compruebe que las opciones anchor y offset están configuradas correctamente para alinearse con la parte de la imagen o el texto que desea que se alinee con la coordenada del mapa. Si el símbolo solo está fuera del sitio cuando se gira el mapa, active la opción rotationAlignment. De forma predeterminada, los símbolos giran con la ventanilla de mapas de manera que aparecen verticalmente para el usuario. Pero, en función del escenario, puede ser conveniente bloquear el símbolo con respecto a la orientación del mapa configurando la opción rotationAlignment como map.

Si el símbolo solo está fuera de lugar cuando el mapa está inclinado, marque la opción pitchAlignment. De forma predeterminada, los símbolos se mantienen en posición vertical con la ventana de visualización de los mapas, cuando el mapa se inclina. Pero, en función del escenario, puede ser conveniente bloquear el símbolo con respecto a la inclinación del mapa configurando la opción pitchAlignment como map.

¿Por qué no aparece ninguno de mis datos en el mapa?

Cosas que puede comprobar:

• Busque en las herramientas de desarrollo del explorador de la consola para ver si hay errores.
• Asegúrese de que se ha creado un origen de datos y que se ha agregado a la asignación, y que el origen de datos se ha conectado a una capa de representación que también se ha agregado a la asignación.
• Agregue puntos de interrupción en el código y recorra el código. Asegúrese de que los datos se agregan al origen de datos y al origen de datos y las capas se agregan al mapa.
• Intente quitar las expresiones controladas por datos de la capa de representación. Es posible que uno de ellos tenga un error, que está causando el problema.

¿Puedo usar el SDK Web de Azure Maps en un iframe de espacio aislado?

Sí.

Obtención de soporte técnico

A continuación se muestran las distintas formas de obtener soporte técnico para Azure Maps en función del problema.

Cómo notificar un problema de datos o un problema con una dirección?

Notifique los problemas mediante la página de comentarios de Azure Maps. En el artículo Aportar comentarios sobre datos en Azure Maps, se proporcionan instrucciones detalladas sobre cómo notificar problemas con los datos.

Nota

Cada problema enviado genera una dirección URL única para su seguimiento. Los tiempos de resolución varían según el tipo de problema y el tiempo necesario para comprobar que el cambio es correcto. Los cambios aparecerán en la actualización semanal de los servicios de representación, mientras que otros servicios, como la geocodificación y el enrutamiento, se actualizan mensualmente.

Cómo notificar un error en un servicio o API?

Para notificar problemas en la página Ayuda y soporte técnico de Azure, seleccione el botón Crear solicitud de soporte técnico.

¿Dónde obtengo ayuda técnica para Azure Maps?

• Si tiene preguntas relacionadas con el objeto visual de Power BI en Azure Maps, póngase en contacto con el soporte técnico de Power BI.

• Para todos los demás servicios de Azure Maps, póngase en contacto con el soporte técnico de Azure.

• Para preguntas o comentarios sobre características específicas de Azure Maps, use los foros para desarrolladores de Azure Maps.

Pasos siguientes

Consulte los artículos siguientes para obtener más sugerencias sobre cómo mejorar la experiencia del usuario en su aplicación.

Hacer que la aplicación sea accesible

Obtenga más información sobre la terminología usada por Azure Maps y el sector geoespacial.

Glosario de Azure Maps