如何在 Expo/React-Native 中使用 MapView 库仅显示下载的地图图块而不显示默认的 Apple/Google 地图

Question

我正在像这样使用 MapView 库在我的 React Native 应用程序中显示地图视图。

<View style={styles.container}>
    <MapView region={region} style={styles.map}>
        <UrlTile urlTemplate={dir}></UrlTile>
    </MapView>
</View>

我在文件系统的文档目录中本地保存了打开的街道地图图块，并将其作为 Url 图块加载到应用程序中。

dir

变量定义如下

const dir = FileSystem.documentDirectory + 'public/maps/{z}/{x}/{y}.png'

我遇到的问题是 MapView 只将我下载的图块放在默认的 Apple 地图之上，如果我缩小或离开下载图块的区域，它会显示默认地图。此外，当我放大或缩小下载的图块时，它会闪烁，我可以短暂地看到默认地图。

我想要做的是仅显示从开放街道地图下载的图块，并将地图视图限制为我下载图块的区域。

我被困在这里，如果这里有人知道如何解决这个问题，我将不胜感激。

Answer 1

您可以使用

MapView

组件的提供程序 prop 以及 custom 磁贴

provider

:

<View style={styles.container}>
  <MapView
    region={region}
    style={styles.map}
    provider={PROVIDER_DEFAULT}
    customMapStyle={[]}
  >

      <UrlTile urlTemplate={tileProviderUrl} />
  </MapView>
</View>