reactjs react-native-maps自定义切片未显示

ecbunoof  于 2023-03-17  发布在  React
关注(0)|答案(3)|浏览(132)

我想在我的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服务下载,并按国家存储在本地。

sz81bmfz

sz81bmfz1#

实际上,我自己就发现了这个问题,所以如果将来有人遇到这种问题,我建议你使用UrlTile而不是LocalTile,即使你试图加载一个自定义的tile,你的代码看起来会像这样:

<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"

yb3bgrhw

yb3bgrhw2#

您正确地构建了路径,但是LocalTile的第二个属性有错误,您写入了size,而实际上它应该是tileSize

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

react-native-maps的官方回购协议所示
无论如何,我确实同意UrlTile更直接。

nzkunb0c

nzkunb0c3#

@sbqq
我已执行了类似操作,但无法在Map中看到切片
React native offline tiles not viewing
能不能请一些人注意一下。

相关问题