我想在我的 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/
...
我正在使用
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 没有显示任何自定义图块,我只能看到整个捷克共和国的默认谷歌地图图块。我无法让它发挥作用。
但是,当我使用
UrlTile
时,自定义磁贴正在工作并设置 urlTemplate
至 http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
.也许我只是将磁贴保存到错误设备的文件夹中,而我的设备无法从那里读取文件?注意:图块是从 openStreetMap 服务下载的,并按国家/地区存储在本地。
最佳答案
其实是我自己想出来的。因此,如果将来有人遇到此类问题,我建议您使用 UrlTile
而不是 LocalTile
即使您正在尝试加载自定义磁贴。您的代码将如下所示:
<MapView
style={styles.map}
// keep the reference for region inside your local state..
onRegionChangeComplete={mapRegion => this.setState({ mapRegion })}
region={this.state.mapRegion}
>
<UrlTile urlTemplate={urlTemplate} zIndex={1} />
</MapView>
要使其工作,请确保您的磁贴路径以
file://
开头。例如前缀 const urlTemplate = "file://"+"RNFetchBlob.fs.dirs.DocumentDir"+"/maps/CZ/{z}/{x}/{y}.png"
关于reactjs - 未显示 react-native-maps 自定义 Tiles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53650517/