如何将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

⚠️ 警告： 如果您使用 2.0.0 之后的 SDK/库版本（2020 年 12 月左右发布），下面的 Mapbox 说明似乎不再免费。有关更多详细信息，请参阅此 SO 答案：https://gis.stackexchange .com/a/188241/55948

旧答案（2020 年 12 月之前 - 见上文）：

另一种选择是使用 Mapbox GL，只要您不使用 Mapbox 平台中的任何内容，它就是免费的。与其他选项不同，这不需要 API 密钥（[源 1] [源 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 不需要的。

Answer 2

您可以在

react-native-maps

包中使用自定义平铺覆盖（也可以使用 OpenStreetMap）：https://github.com/react-native-maps/react-native-maps

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

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

Answer 3

我也遇到了这个问题，我只是使用 WebView 通过 leaflet.js 渲染 HTML

实际上很方便，但没有最好的性能。

WebView来自https://github.com/react-native-webview/react-native-webview

使用此方法的真实应用程序： https://github.com/ZarmDev/OpenTransitApp