Básicamente, lo que tengo es un dato de geolocalización (longitud y latitud) de 300.000 ubicaciones. Tengo diferentes atributos adjuntos a los datos y es de aprox. 32 MB. Leerlo a través de js y poner marcadores en Google Maps es lo que he intentado, y funciona bien cuando solo pongo de 25 a 2500 marcadores en mi mapa, realmente no puedo poner todas mis ubicaciones a la vez. Eventualmente, quiero poder filtrar marcadores a través de los atributos, etc. Las ubicaciones están todas en una ciudad, por lo que podría usar mi propio mapa o algo así.
Lo que quiero preguntar/aprender es ¿tiene alguna solución mejor para esta situación en particular?
Aquí está mi código.
function initJS() { var promise = getData(); var locations1; var locations; promise.success( (data) => { locations1 = parseData(data); locations = locations1.filter(location => { return location.DuyuruTipi == "16"; }); //initializing google map map = new google.maps.Map(document.getElementById("map"), { center: { lat: latitude, lng:longtitude}, zoom: zooming, }); //creating a marker const svgMarker = { // path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", url: "./assets/marker.svg", size: new google.maps.Size(20,20), scaledSize: new google.maps.Size(20,20), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(10, 10), }; for (var i = 0; i < locations.length; i++) { //locations.length // init markers var marker = new google.maps.Marker({ position: { lat: parseFloat(locations[i]["YCoor"]), lng: parseFloat(locations[i]["XCoor"])}, map: map, label: locations[i]["DuyuruId"], icon: svgMarker }); console.log(locations[i]["DuyuruTipi"]); marker.duyurutipi = locations[i]["DuyuruTipi"]; marker.kazatipi = locations[i]["KazaTipi"]; marker.vsegid = locations[i]["vSegID"]; markers.push(marker); } });Mostrar 300000 puntos directamente en el mapa no es el enfoque correcto y no funcionará bien, especialmente a medida que se agreguen más conjuntos de datos a su mapa.
Además, enviar 32 MB de datos o más al navegador es una mala práctica, incluso para una aplicación de mapas web. Si prueba, por ejemplo, Google Maps con el panel de red abierto, verá que apenas superará unos pocos MB, incluso después de bastante tiempo usándolo.
Hay un par de enfoques que los mapeadores web toman para contrarrestar esto:
En ambos casos, deberá configurar su capa de puntos en OpenLayers para usar la estrategia "bbox", que le indicará que llame a su URL de API cada vez que la ventana gráfica cambie lo suficiente como para que se carguen más funciones. También deberá establecer la resolución mínima para su capa para que no cargue demasiadas funciones a la vez cuando se aleja.
Por último, con Openlayers, querrá usar un VectorImageLayer con un VectorSource para esta capa, lo que mejorará mucho el rendimiento y le permitirá consultar y editar sus datos de puntos.
Lo anterior debería ayudar a mejorar el rendimiento de su mapeo.
Bueno, opté por la API de OpenLayers, creo que es más difícil implementar cosas de los documentos, pero tienen aplicaciones de ejemplo para cada función. Es posible que desee probar eso, mucho mejor rendimiento si su única necesidad es colocar algunos marcadores y visualizar datos.