我想在我的react-native应用中实现自定义切片系统,以供离线模式使用。我已经实现了下载自定义切片并将其保存到我的Android模拟器设备中的系统。这些文件在Map渲染时确实存在。我的切片保存在/data/user/0/com.myapp/files/maps/COUNTRY_CODE/{z}/{x}/{y}.png
中,因此对于捷克语,我的设备文件夹结构如下所示:
/data/user/0/com.myapp/files/maps/CZ/:
- 4/
- 8/
- 5.png
- 5/
- 17/
- 10.png
- 11.png
- 6/
- 34/
- 21.png
- 22.png
- 35/
- 21.png
- 22.png
- 7/
...
- 8/
...
- 9/
...
- 10/
...
对于tile下载和文件系统管理,我使用rn-fetch-blob
,解压缩/保存由react-native-zip-archive
处理。
我的Map组件如下所示:
// this returns /data/user/0/com.myapp/files/maps
const tilesPath = RNFetchBlob.fs.dirs.DocumentDir + "/maps";
// prints to the console that one of the tiles choosed randomly really exists
// maybe I should make more detailed check if every of the tiles exist for testing?
const czMapFound = RNFetchBlob.fs
.exists(tilesPath + "/CZ/4/8/5.png")
.then(res => {
console.log(res);
return res;
});
if (czMapFound) {
// log just to make sure that this branch of statement is executed
console.log(tilesPath + "/CZ/{z}/{x}/{y}.png");
return (
<MapView
style={styles.map}
onRegionChange={mapRegion => this.setState({ mapRegion })}
region={{
// In this example, map is pointing at Czech Republic correctly
latitude: selectedMap ? selectedMap.centerX : 52.519325,
longitude: selectedMap ? selectedMap.centerY : 13.392709,
latitudeDelta: selectedMap ? selectedMap.sizeX : 50,
longitudeDelta: selectedMap ? selectedMap.sizeY : 50
}}
>
<LocalTile
pathTemplate={tilesPath + "/CZ/{z}/{x}/{y}.png"}
size={256}
/>
</MapView>
);
}
我的Map没有显示任何自定义的磁贴,我所能看到的都是默认的谷歌Map磁贴,遍布捷克共和国。我无法使它工作。
但是,当我使用UrlTile
并将urlTemplate
设置为http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
时,自定义磁贴可以正常工作。也许我只是将磁贴保存到了错误的设备文件夹中,而我的设备无法从那里读取文件?
注:图块从openStreetMap服务下载,并按国家存储在本地。
3条答案
按热度按时间sz81bmfz1#
实际上,我自己就发现了这个问题,所以如果将来有人遇到这种问题,我建议你使用
UrlTile
而不是LocalTile
,即使你试图加载一个自定义的tile,你的代码看起来会像这样:要使其正常工作,请确保切片路径以
file://
前缀开头,例如const urlTemplate = "file://"+"RNFetchBlob.fs.dirs.DocumentDir"+"/maps/CZ/{z}/{x}/{y}.png"
yb3bgrhw2#
您正确地构建了路径,但是
LocalTile
的第二个属性有错误,您写入了size
,而实际上它应该是tileSize
。如
react-native-maps
的官方回购协议所示无论如何,我确实同意
UrlTile
更直接。nzkunb0c3#
@sbqq
我已执行了类似操作,但无法在Map中看到切片
React native offline tiles not viewing
能不能请一些人注意一下。