React Native MapboxGL - How to display offline pack on ...
文章推薦指數: 80 %
createPack({ name: 'LionRock', styleURL: "mapbox://styles/mapbox/streets-v11", minZoom: 14, maxZoom: 20, bounds: [[114.168637,22.370876], ...
Home
Public
Questions
Tags
Users
Companies
Collectives
ExploreCollectives
Teams
StackOverflowforTeams
–Startcollaboratingandsharingorganizationalknowledge.
CreateafreeTeam
WhyTeams?
Teams
CreatefreeTeam
Collectives™onStackOverflow
Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost.
Learnmore
Teams
Q&Aforwork
Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch.
Learnmore
ReactNativeMapboxGL-Howtodisplayofflinepackonmapview?
AskQuestion
Asked
2monthsago
Modified
2monthsago
Viewed
71times
1
I'mworkingonaprojectthatallowsuserstousethemapoffline.
Here'smycodetodownloadtheofflinepack.
constdownloadRoute=async()=>{
try{
awaitMapboxGL.offlineManager.createPack({
name:'LionRock',
styleURL:"mapbox://styles/mapbox/streets-v11",
minZoom:14,
maxZoom:20,
bounds:[[114.168637,22.370876],[114.220005,22.332990]]
},
(offlinePack,status)=>console.log(offlinePack,status),
(offlinePack,err)=>console.log(offlinePack,err),
)
console.log("Downloading")
}catch(err){
console.log(err)
}
}
Anditreturnssuccess.
{"_metadata":null,"pack":{"bounds":[[Array],[Array]],"metadata":"{\"name\":\"LionRock\"}"}}{"completedResourceCount":667,"completedResourceSize":10960511,"completedTileCount":141,"completedTileSize":4011727,"name":"LionRock","percentage":100,"requiredResourceCount":667,"state":2}
Then,ItriedtogetmyofflinepacksbackandmakeuseinMapView
exportdefaultfunctionLocalRoutesScreen(){
useEffect(()=>{getRoutes()},[])
const[routes,setRoutes]=useState(null)
constgetRoutes=async()=>{
try{
constofflinePacks=awaitMapboxGL.offlineManager.getPacks();
setRoutes(offlinePacks)
}catch(err){
console.log(err)
}
}
if(routes==null){return(
延伸文章資訊
- 1A Mapbox GL react native module for creating custom maps
Mapbox Maps SDK for React Native. An unofficial React Native component for building maps with the...
- 2Ultimate Guide to Integrating React Native with MapboxGL
Ultimate Guide to Integrating React Native with MapboxGL- A Google Map Alternative. Mapbox comes ...
- 3A Mapbox react native module for creating custom maps
Mapbox Maps SDK for React Native. An unofficial React Native library for building maps with the M...
- 4@react-native-mapbox-gl/maps - npm
A Mapbox GL react native module for creating custom maps. Latest version: 8.6.0-beta.0, last publ...
- 5React Native MapboxGL - How to display offline pack on ...
createPack({ name: 'LionRock', styleURL: "mapbox://styles/mapbox/streets-v11", minZoom: 14, maxZo...