Mapbox marķieru klasteris pakalpojumā React

Blogs

Mapbox marķieru klasteris pakalpojumā React

Veiktspēja var sākties pasliktināties diezgan ātri, mēģinot kartē parādīt lielu datu apjomu. Pat pie simtiem marķieru, izmantojot Mapbox caur reaģēt-karte-gl , var just, ka tas sāk kavēties. Apvienojot punktus, jūs varat ievērojami uzlabot veiktspēju, vienlaikus sniedzot datus pieejamākā veidā.

Superklasteris ir ietverta pakete, lai grupētu punktus kopā kartē. Lai izmantotu superklasteru kopā ar React, es izveidoju a useSupercluster āķis, lai atvieglotu lietas. Šajā rakstā ir parādīts, kā integrēt klasterizāciju ar superklasteru savā React Mapbox kartē.

Kartes kastes iestatīšana pakalpojumā React

Pirms datu ielādēšanas parādīšanai, pirms šo datu grupēšanas, lai tie tiktu parādīti kartē, mums ir jāiestata Mapbox. Man ir ievads Mapbox videoklipam, ja neesat strādājis ar reaģēt-karte-gl iepakojums iepriekš.

kā jaunināt pip mac

Mapbox pakalpojumā React jums ir jāpārvalda Mapbox skatu loks stāvoklī. Šeit mēs varam iestatīt sākotnējās vērtības, kuras vēlāk tiek atjauninātas, izmantojot | _+_ | notikums.

Mēs arī izveidosim | _+_ | mainīgais, lai saglabātu atsauci uz pašu karti. Tas ir nepieciešams, lai izsauktu funkcijas kartē, mūsu gadījumā, lai iegūtu kartes norobežojošo lodziņu.

Izstrādājot to lokāli, es glabāju savu Mapbox marķieri failā ar nosaukumu | _+_ |, un, nosaucot to ar prefiksu | _+_ |, tas tiks automātiski ielādēts lietotnē, izveidojot reaģēšanas lietotni.

onViewportChange

Tuvināšana ar kopām

Datu sagatavošana superklasterim

Dati no ārēja/attāla avota, visticamāk, būs jāmasē tādā formātā, kādu pieprasa superklasteru bibliotēka. Piemērs zemāk izmanto SWR lai iegūtu attālos datus, izmantojot āķus.

Mums ir jāsagatavo masīvs GeoJSON iezīme objekti, un katra objekta ģeometrija ir a GeoJSON punkts .

Datu piemērs izskatās šādi:

mapRef

Datu izgūšana, izmantojot SWR un pārvēršana pareizajā formātā, izskatās šādi:

.env.local

Kartes robežu iegūšana

Lai superklasteris atgrieztu kopas, pamatojoties uz iepriekšējā sadaļā izveidoto punktu masīvu, mums ir jāsniedz tai papildu divas informācijas:

  • Kartes robežas: | _+_ |
  • Kartes tālummaiņa: Mapbox tas tiks iegūts no mūsu | _+_ | Valsts

Robežas var iegūt, piekļūstot | _+_ | īpašumu, ko izveidojām sākumā. Strādājot kopā dažus funkciju izsaukumus, mēs varam iegūt datus un ievietot tos pareizajā formātā.

REACT_APP_

Kopu izvilkšana no āķa

Ar mūsu | _+_ | pareizā secībā un ar | _+_ | un | _+_ | ir pieejams, ir pienācis laiks izgūt kopas. Tas izmantos | _+_ | āķis, ko nodrošina izmantošana-superklasteris iepakojums.

Tas caur destrukturētu objektu atgriež kopu masīvu un, ja jums tas nepieciešams, | _+_ | instances mainīgais.

export default function App() { // setup map const [viewport, setViewport] = useState({ latitude: 52.6376, longitude: -1.135171, width: '100vw', height: '100vh', zoom: 12 }); const mapRef = useRef(); // load and prepare data // get map bounds // get clusters // return map return ( { setViewport({ ...newViewport }); }} ref={mapRef} > {/* markers here */} ); }

Klasteri ir masīvs GeoJSON iezīme objekti, bet daži no tiem attēlo punktu kopu, bet daži - atsevišķus punktus, kurus izveidojāt iepriekš. Daudz kas ir atkarīgs no jūsu tālummaiņas līmeņa un punktu skaita noteiktā rādiusā. Kad punktu skaits kļūst pietiekami mazs, superklasteris dod mums atsevišķus punktus, nevis kopas. Tālāk redzamajā piemērā ir kopa (kā to apzīmē ar tajā esošajām īpašībām) un atsevišķs punkts (kas mūsu gadījumā ir noziegums).

masīvu metodes javascript
[ { 'type': 'Feature', 'properties': { 'cluster': false, 'crimeId': 78212911, 'category': 'anti-social-behaviour' }, 'geometry': { 'type': 'Point', 'coordinates': [-1.135171, 52.6376] } } ]

Klasteru parādīšana kā marķieri

Tā kā | _+_ | masīvā ir iezīmes, kas attēlo klasteru vai atsevišķu punktu, mums tas jārisina, tos kartējot. Jebkurā gadījumā abiem ir koordinātas, un mēs varam izmantot | _+_ | īpašums, lai noteiktu, kurš ir kurš.

Klasteru veidošana ir jūsu ziņā, katram marķierim ir daži vienkārši stili:

const fetcher = (...args) => fetch(...args).then(response => response.json()); export default function App() { // setup map // load and prepare data const url = 'https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2019-10'; const { data, error } = useSwr(url, { fetcher }); const crimes = data && !error ? data : []; const points = crimes.map(crime => ({ type: 'Feature', properties: { cluster: false, crimeId: crime.id, category: crime.category }, geometry: { type: 'Point', coordinates: [ parseFloat(crime.location.longitude), parseFloat(crime.location.latitude) ] } })); // get map bounds // get clusters // return map }

Tad, kartējot klasterus, es mainu kopas lielumu ar aprēķinu, pamatojoties uz to, cik punktu grupā ir: | _+_ |.

[westLng, southLat, eastLng, northLat]

Animēta tālummaiņas pāreja uz kopu

Mēs vienmēr varam tuvināt karti paši, bet superklasteris nodrošina funkciju ar nosaukumu | _+_ |, kas, nododot klastera ID, atgriezīs mūs uz to tālummaiņas līmeni, uz kuru mums ir jāmaina karte, lai kopa tiktu sadalīta līdz sīkākām kopām vai atsevišķiem punktiem.

viewport.zoom

Izmantojot nākamo tālummaiņas līmeni, ko mums nodrošināja superklasteris, mēs varētu vienkārši atjaunināt savu Mapbox skata punkta stāvokli, taču tā nebūtu vienmērīga pāreja. rea-map-gl nodrošina klasi ar nosaukumu | _+_ | kas animē karti uz jauno tālummaiņu un lat/lon, nevis izmaiņas ir tūlītējas.

mapRef.current

Kur atrodas iepriekš minētie koda fragmenti? Esmu tos ievietojis | _+_ | notikums Marķiera nodaļā par katru renderēto kopu.

export default function App() { // setup map // load and prepare data // get map bounds const bounds = mapRef.current ? mapRef.current .getMap() .getBounds() .toArray() .flat() : null; // get clusters // return map }

Secinājums

Izmantojot | _+_ |, mums ir iespēja lietot Mapbox mūsu React lietotnē. Izmantojot | _+_ | mēs varam izmantot superklasteru kā āķi, lai mūsu kartē padarītu punktu kopas.

Tā kā mums ir piekļuve superklasterim, mēs pat varam satvert lapas (atsevišķos punktus, kas veido kopu), izmantojot | _+_ | funkciju. Tādējādi mēs varam parādīt informāciju par klasterī esošo x punktu skaitu.

Pilns šī projekta avota kods var būt atrodams šeit .

#React #JavaScript #WebDev #reactjs #reage-js