0
262
Views¿Cómo puedo obtener puntos de datos que pertenecen a un cuadro delimitador de mapa?
Estoy trazando miles de puntos de datos en un mapa, y en cualquier momento quiero buscar los puntos de datos que caen en un cuadro delimitador de mapa en particular. Por ejemplo , se adjunta a continuación la vista completa de los puntos de datos disponibles, 
Si me acerco un poco, tendré menos puntos y quiero obtener los datos asociados con esos puntos. 
La forma en que me acerco a esto es obtener el cuadro delimitador del mapa y luego verificar las coordenadas de cada punto si pertenecen a ese cuadro delimitador . El código de muestra está debajo,
const data = [ {lat: 33.93911, lng: 67.709953}, {lat: -11.2027, lng: 17.8739}, {lat: -33.8688, lng: 151.2093}, {lat: -42.8821, lng: 147.3272}, {lat: 26.0275, lng: 50.55} ] const boundingBox = window.map.getMapBounds(); const result = []; for(let i = 0; i < data.length; i++) { if(/* point lies within bounding box */) { result.push(point); } }¿Cómo puedo optimizarlo o hay una solución mejor? Muchas gracias.
1 answers
Answer question0
Puedes intentar usar bbox-polygon y boolean-intersects desde turf :
- Use
onViewStateChangedesde la instancia de la plataforma dentro de una función dedebouncepara que no se ejecute con demasiada frecuencia - Cree un polígono desde el estado de vista de la cubierta usando @turf/
viewState@turf/bbox-polygon - Páselo a
@turf/boolean-intersectscon todas las características usando el método defilterJS
import { WebMercatorViewport } from '@deck.gl/core'; import bboxPolygon from '@turf/bbox-polygon'; import intersects from '@turf/boolean-intersects'; function debounce(fn, ms) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { timer = null; fn.apply(this, args); }, ms); }; } function getViewport(viewState) { const bounds = new WebMercatorViewport(viewState).getBounds() return bboxPolygon(bounds) } function getViewportFeatures({ viewState }) { const viewport = getViewport(viewState) const viewportFeatures = features.filter((f) => intersects(f, viewport)) console.log(viewportFeatures) // Your target } <DeckGL ... onViewStateChange={debounce(getViewportFeatures, 500)} />Avanzado : si sus datos son realmente grandes, puede usar Web Workers