Question

我一直在尝试使用<LocalTile/>和<UrlTile/>组件在react native映射视图中获取脱机的Leaflet / 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>
);

}

在上面的代码片段中引用我的评论：

1）切片路径的格式为（0,1,2,3）文件夹格式，其数字与相应的缩放级别相对应。

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

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

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

我已经看到了提供的examples，但对于如何转换此映射系统以使其与可在基于传单的地图视图中工作的OSM切片一起使用，完全不知所措。

Answer 1

您好，您还在为此工作吗？我阅读了您的问题，因为我对本机的新React有问题，我使用的是webview而不是mapview，它可以正常工作，直到react 0.44，然后最新版本阻止了webview对应用程序数据文件的文件系统的访问。您是否在应用程序中管理解压缩和对图块的访问？我可能会在离线时间尝试使用react-native-maps，因为我一直在为Android应用程序使用webview。关于您的问题，您需要一些地理系统（GIS）技能。如果您将建筑物拐角与纬度，经度进行地理匹配，则可以将其与传单中使用的图块方案相关联，我可以使用QuantumGIS（qGIS）和QmetaTiles插件来实现。

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

1 个答案: