如何将OpenStreetMap集成到本机反应项目中？

Question

我试图整合OpenStreetMap到一个反应原生的项目.但是我找不到任何库或任何与他们github帐户中的本地反应相关的东西(下面给出的链接).

https://github.com/openstreetmap

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

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

但是,一个人都表示,mapbox使用openstreet map他们的source.The mapbox建议将其集成到一个好办法react-native项目(如下链接).

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

有没有一种方法可以集成openstreet map到一个react-native项目中,或者他们还没有为它创建适当的支持.

Answer 1

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

（滚动到使用自定义瓷砖叠加部分）

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

Answer 2

使用 Mapbox GL

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

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

下面是使用雄蕊水彩瓷砖（也是基于 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 说“要使用适用于 Android 的 Maps SDK，您必须拥有 API 密钥”，但react-native-maps似乎使用名为AirMapView 的嵌入式Maps SDK 替代品，它支持其他提供商，并声称您只需要在 Android 上设置本机 Maps SDK 即可“支持本机 Google 地图”。为了安全起见，大多数人最终都会在 Google 上设置一个计费帐户来生成 API 密钥（即使您不打算计算单个地图视图），而 Mapbox 不需要。