如何将 OpenStreetMap 集成到 react-native 项目中？

Question

我正在尝试将 OpenStreetMap 集成到 React Native 项目中。 但我在他们的 GitHub 帐户中找不到任何库或与 React Native 相关的任何内容。

我能找到与这些主题相关的唯一内容是下面的链接，其中没有正确的答案。

https://www.reddit.com/r/reactnative/comments/5fi6bg/how_to_add_openstreetmap_to_a_react_native_project/

但我曾经听说 Mapbox 使用 OpenStreetMap 作为其来源。 Mapbox 提出了一种将其集成到 React Native 项目中的好方法：

https://github.com/mapbox/react-native-mapbox-gl

有没有办法将 OpenStreetMap 集成到 React Native 项目中，或者是否还没有适当的支持。

Answer 1

使用 Mapbox GL

另一种选择是使用Mapbox GL ，只要您不使用 Mapbox平台中的任何东西，它都是免费的。 与其他选项不同，这不需要 API 密钥（ [source 1] [source 2] ）。

由于平台（全局样式、瓦片集、数据集、Mapbox Studio 等）是付费的，因此经常对 Mapbox 感到困惑，但 Mapbox GL 是一个库，您可以使用它来显示自托管或由 Mapbox 平台托管的内容.

下面是使用Stamen 水彩瓷砖（也是基于 OSM） 的示例片段：

render() {
  const rasterSourceProps = {
    id: 'stamenWatercolorSource',
    tileUrlTemplates: [
      'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
    ],
    tileSize: 256,
  };

  return (
    <MapboxGL.MapView style={sheet.matchParent}>
      <MapboxGL.Camera
        zoomLevel={16}
      />

      <MapboxGL.RasterSource {...rasterSourceProps}>
        <MapboxGL.RasterLayer
          id="stamenWatercolorLayer"
          sourceID="stamenWatercolorSource"
          style={{rasterOpacity: this.state.opacity}}
        />
      </MapboxGL.RasterSource>
    </MapboxGL.MapView>
  );
}

其他选项

如前所述，React Native（Android 和 iOS）的另一个选项是react-native-maps 。

但是，如果您不显示 Google 地图，是否必须使用 Google API 密钥来使用此库，这充其量是不清楚的：Google 说“要使用 Maps SDK for Android，您必须拥有 API 密钥” ，但react-native-maps似乎使用了一个名为AirMapView的插入式 Maps SDK 替代品，它支持其他提供商，并声称您只需要在 Android 上设置原生 Maps SDK“以支持原生 Google 地图”。 为了安全起见，大多数人最终都会在 Google 上建立一个计费帐户来生成 API 密钥（即使您不打算计算单个地图视图），这是 Mapbox 不需要的。

Answer 2

您可以在react-native-maps包中使用自定义 Tile Overlay（OpenStreetMap）： https ://github.com/react-native-maps/react-native-maps

（滚动到使用自定义平铺覆盖部分）

您需要添加 api 密钥。 您根本不需要使用 Maps API，在这种情况下也不会使用密钥。