Lägga till offline kapacitet för MapView i Expo

Lägga till offline kapacitet för MapView i Expo

 

I detta exempel kommer vi att genomföra en möjlighet för oss att använda OpenStreetMaps i offline mode i vår MapView komponent.

för Att genomföra offline maps i Expo behöver vi följande:

#1 Från kartområdet som användaren tittar på, räkna ut alla brickor som måste laddas ner för den aktuella zoomnivån.

#2 Ladda ner alla dessa plattor till filsystemet. Vi kommer att utnyttja Expo Filsystem api för detta.

#3: Växla till offlineläge, inläsning av brickor från file system istället för att använda OSM-web server.

Hitta zoom

Från min erfarenhet att det ser ut som zoom nivå av MapView och OpenStreetMap är inte exakt lika. Från mina tester av denna funktion gav mig den bästa plats:

Math.runda(Matematik.log(360 / longitudeDelta) / Matte.LN2) + 2

Hitta alla brickor för en region

för Att hitta alla plattor för ett visst område vi kommer att använda funktionen nedan. Ger det bara mapRegion ges av MapView komponent och en max-och min-zoom som du kan räkna ut med formeln ovan.

Det kommer att spotta ut en rad med plattor med formatet
{x: number, y: number, z: antalet} .

 

<br/ > räkna>

Hämta brickor till filsystem

för Att ladda ner de filer vi behöver först skapa mappstruktur, av någon anledning Expo: s filsystem kommer inte att skapa katalogen när du använder downloadAsync. Efter de kataloger som har satts upp för att vi kan ladda ner alla brickor till den skapade kataloger och vi bör vara redo att gå.

tileGrid – argumentet skulle vara resultatet från tileGridForRegion i föregående steg. I mitt exempel app som jag har satt upp dessa konstanter:
rootFolder = `${Filsystem.documentDirectory}plattor`
tileServerUrl = http://c.tile.openstreetmap.org

 

<br/ > räkna>

Använda den nerladdade plattor i MapView

Nu kan vi ha en urlTemplate för online-och offline-läge och skapa en knapp för att växla mellan dem. Om allt fungerade bra den nerladdade plattor bör vara tillgängliga med hjälp av den offlineUrlTemplate.

 

<br/ > räkna>

Gothas

Sedan plattor kommer att vara butiker i mappstrukturen /plattor/{z}/{x}/{y}.png – vi måste först skapa en mapp z och x innan du laddar ner något där.

MapView.UrlTile istället för MapView.LocalTile – som filsystem i Expo behandlas som en webbadress.

Förbättringar

  • Tillåt att användaren har flera paket av lagrade plattor för olika områden.
  • Visa förloppsindikatorn när du laddar ned större samlingar av kakel, kan posibly göras med Expo.Filsystem.createDownloadResumable

Exempel app

 

Expo QR-koden för att testa prototypen