¿Mostrar cientos de miles de puntos en un mapa web?

Question

Estoy tratando con alrededor de 150.000 puntos en un mapa. Mis clientes necesitan ver todos los puntos, sin agruparlos. He probado Openlayers y Mapbox GL Js, ambos tienen el mismo problema: ¡sus costes de memoria son enormes!

Me estabilicé en Mapbox GL JS 0.15 (máx. 1GB RAM durante la carga, min 700MB RAM) pero ya que no funciona en Chrome (algunos azulejos se congelan) tengo que ir con la nueva versión, que es agradable pero tiene un mapa de memoria ( para mi caso ) de 1,6 GB.

Mi mayor cliente tiene un ordenador con 4 GB de RAM, está claro que esto no funciona...

Sé que es culpa mía mostrar todos esos puntos en el lado del cliente, pero no tengo experiencia en encontrar una solución buena y gratuita, ni en el lado del cliente ni en el lado del servidor.

Ejemplo de mi mapa en Mapbox GL JS 0.26 (la carga es larga ya que cargo mis datos desde dropbox)

Answer 1

Aquí hay 2 sugerencias pueden considerar para disminuir la carga en la interfaz de usuario y la carga de solicitud:

• Si esos puntos tienen muchos valores de atributo, intente cargar el Geo y no todos los atributos. (solicitar carga)
• tratar de mostrar los marcadores contenidos en límite del mapa SOLO y ocultar los marcadores que están fuera de los límites mediante la actualización de la visibilidad de los marcadores al hacer zoom o navegar en el mapa.

Answer 2

So4ne,

Se debe al DOM (Document Object Model). Si intenta cargar 150.000 objetos (puntos) en el DOM del navegador, la mayoría de los navegadores mostrarán un cuadro de diálogo de "secuencia de comandos de ejecución lenta" y desistirán en función de la memoria disponible.

He logrado esto con éxito mediante el uso de una API de servicio (usted tiene que diseñar esto) llamar a devolver todos los puntos de una sola vez al cliente en un objeto JavaScript y luego renderizar los puntos del objeto en el cliente en un lote de digamos 500 puntos por iteración (usted tiene que probar esto en varios navegadores si eso es un requisito y ajustar el tamaño del lote). Esto funcionará al 100% y será perfecto para el usuario. Pero es un requisito extraño renderizar tantos puntos a la vez sin agrupación ya que la pantalla estará demasiado llena para ver la capa del mapa.

Extracto de código (para Bing Maps de hace unos 7 años, pero los conceptos seguirán siendo válidos):

function fGetBingObject(result, userContext) {

    try {
        var markersArray = [];
        if (result.Points) {
            function pMark(result, loopCount) {
                if (loopCount == undefined) {
                    loopCount = 0;
                }

                if (loopCount < result.Points.length) {
                    var batchSize = 500; //100
                    for (currCount = loopCount; currCount < loopCount + batchSize && currCount < result.Points.length; ++currCount) {
                        var myIcon_google;
                        var myPoint = new VELatLong(result.Points[currCount].Latitude, result.Points[currCount].Longitude);
                        var marker = new VEShape(VEShapeType.Pushpin, myPoint);
                        layer =

                            null;
                        if (result.Points[currCount].IconImage != '') {
                            marker.SetCustomIcon(result.Points[currCount].IconImage);

                        }

                        listen(marker, result.Points[currCount].InfoHTML);

                        markersArray.push(marker);

                        if (typeof result.Points[currCount].LayerKey != "undefined") {
                            if (result.Points[currCount].LayerKey != '') {
                                if (result.Points[currCount].LayerKey == 'TEST') {
                                    marker.SetMinZoomLevel(result.Points[currCount].MinZoomLevel);

                                    marker.SetMaxZoomLevel(result.Points[currCount].MaxZoomLevel);

                                    layer = map.GetShapeLayerByIndex(1);

                                    layer.AddShape(marker);

                                }

                            }

                        }

                    }

Saludos.

Answer 3

A escalas más reducidas, se debería reducir el número de características vectoriales representadas por el mapa.

Puede utilizar mosaicos raster preprocesados de fuentes como mapnik o geoserver WMS. También puedes limitar la escala a la que son visibles estas características.

A medida que aumente la escala y desee que el usuario interactúe, deberá servir los datos a través de una base de datos, lo que significa que el mapa sólo contendrá la información que necesite.

las opciones incluyen https://github.com/stefan0722/gs-mvt

o https://github.com/spatialdev/PGRestAPI

o dejar que mapbox aloje tus datos.