在 iOS 上 react-native-maps 本地图块/离线

Question

我一直在尝试使用 <LocalTile/> 和 <UrlTile/> 组件在 react 本机地图视图中渲染离线传单/openStreetMap 图块。

我可以在 android 和 iOS 上渲染地图，并且可以使用PROVIDER_DEFAULT（分别是 Apple 的 MapKit 和 Google Maps）查看每个平台的标准地图。

我将拼贴下载为 zip 文件，然后将它们解压缩到每种设备上相应的文档存储路径中。

我验证路径是否正常工作，并且地图可以使用以下代码访问这些图像：

render() {
const { region } = this.state;
//gets the document directory based on platform(ios/android)
const docDir = BlobService.setDocDir();
const tilesPath = `${docDir}/projects/${this.props.projectId}/pdf/tiles/${
  this.props.floorData.id
}/{z}/tile_{x}_{y}.png`;
return (
  <View style={styles.container}>
    <MapView
      provider={PROVIDER_DEFAULT}
      mapType={MAP_TYPES.STANDARD}
      style={styles.map}
      initialRegion={region}
    >

      <LocalTile pathTemplate={tilesPath} tileSize={512} zIndex={-1} />
    </MapView>
    <View style={styles.buttonContainer}>
      //button code removed for brevity
    </View>
  </View>
);

}

在上面的代码 sn-p 中引用我的 cmets：

1) 切片路径采用 (0,1,2,3) 文件夹格式，数字对应于适当的缩放级别。

2) 平铺路径似乎可行，但似乎只能无限平铺单个平铺，并且缩放级别似乎与 OSM/Leaflet 缩放级别不匹配：

我在this thread on github 上留下了评论，这看起来与我采取的所有步骤几乎相同，除了我正在使用的应用程序中被从 expo 中弹出。

我尝试关注this article，但我似乎无法理解如何将这些图块适当地映射到该区域。使用他提供的公式似乎不像以前实现的那样在 react-leaflet 中模仿相同的缩放级别，并且在尝试设置区域参数时我总是遇到超出范围的错误。

我已经看到提供的examples，但我不知道如何将此映射系统转换为与在基于传单的地图视图中工作的 OSM 瓦片一起使用。

Answer 1

你好，你还在做这个吗？ 我读了你的问题，因为我对新的 react native 有问题，我使用 webview 而不是 mapview，它工作正常，直到 react 0.44 然后最新版本阻止 webview 访问应用程序数据文件的文件系统。 您是否在应用程序中管理解压缩和访问磁贴？我可能会在离线时间尝试 react-native-maps，因为我一直坚持使用 webview 作为 android 应用程序。 关于您的问题，您需要一些地理系统 (GIS) 技能。如果您将建筑物的角与纬度、经度进行地理配准，那么您可以将其与传单中使用的瓷砖方案相关联，我使用quantumGIS (qGIS) 和QmetaTiles 插件来做到这一点。