React Native Maps自定义瓦片未显示。

Question

我希望在我的React-Native应用中实现自定义瓦片系统，以便离线使用。我已经在Android模拟器设备中实现了下载和保存自定义瓦片的系统。在地图渲染时，这些文件确实存在。我的瓷砖保存在/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 处理。

我的地图组件如下：

// 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>
  );
}

我的地图没有显示任何自定义瓦片，只能看到捷克共和国上的默认谷歌地图瓦片。我无法使其工作。

但是，当我使用UrlTile并将urlTemplate设置为http://c.tile.openstreetmap.org/{z}/{x}/{y}.png时，自定义瓦片可以正常工作。也许我只是将瓦片保存到了错误的设备文件夹中，我的设备无法从那里读取文件？

注意：这些瓦片是从OpenStreetMap服务下载并按国家存储在本地的。

- sbqq

---

@sebing 我们如何使用 OpenStreetMap服务 下载底图？你能否给一些关于如何使用 rn-fetch-blob 和 react-native-zip-archive 处理的想法？ - Naveen Kumar H S

你是如何下载这些瓦片的？是在运行时下载的吗？ - hjuste

Answer 1

实际上，我自己找到了解决方法。所以如果将来有其他人遇到这种问题，我建议您使用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"

- sbqq

Answer 2

你正在构建路径，但是在LocalTile的第二个属性上出现了错误，你写的是size，实际上应该是tileSize。

<LocalTile 
   pathTemplate="/path/to/locally/saved/tiles/{z}/{x}/{y}.png"
   tileSize={256}
   zIndex={-1}
/>

正如在react-native-maps的官方存储库中所看到的

无论如何，我同意UrlTile更加直观。

- 2682562