时间戳

首页 > 解决方案 > 在 iOS 上 react-native-maps 本地图块/离线

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

问题描述

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

PROVIDER_DEFAULT我可以在 android 和 iOS 上渲染地图，并且可以使用（分别是 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>
);

}

参考我在上面的代码片段中的评论：

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

2）瓷砖的路径似乎有效，但它似乎只能无限地平铺单个瓷砖，并且缩放级别似乎与 OSM/Leaflet 缩放级别不匹配：

oneTile

我在 github 上对此线程发表了评论，这看起来与我所采取的所有步骤几乎相同，除了我在我正在使用的应用程序中被从 expo 中弹出。

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

我已经看到了 提供的示例，并且对于如何将此映射系统转换为与在基于传单的地图视图中工作的 OSM 瓦片一起工作感到茫然。

标签： react-nativereact-native-maps

解决方案

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

推荐阅读