如何将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项目中的方法，或者目前还没有适当的支持。

- Amal p

---

你有没有得到任何线索或代码，如何在React Native中集成开放地图？ - Ankush Rishi

是的，如果您计划商业化它，您将不得不为其付费。这些套餐在他们的网站上展示。 - Amal p

我相信标准的 react-native-maps 软件包可以完成您想要完成的工作吗？ - user2953840

嘿 @Amalp，你解决了吗？ - DevAS

很遗憾，如果您正在使用Mapbox，请查看此链接：https://stackoverflow.com/questions/59266242/directions-between-two-point-location-in-mapbox-gl-react-native - DevAS

Answer 1

使用Mapbox GL

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

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

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

通常会对Mapbox感到困惑，因为该平台（全球样式、瓷砖集、数据集、Mapbox Studio等）是付费的，但Mapbox GL是一个库，您可以使用它来显示自托管或由Mapbox平台托管的内容。

下面是一个示例代码片段of an example，使用Stamen Watercolor tiles（也基于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 API密钥才能使用此库（如果您不显示Google地图）最好还是不清楚：Google表示"要使用Android Maps SDK，您必须拥有API密钥"，但是react-native-maps似乎使用了一个名为AirMapView的替代Maps SDK，该SDK支持其他提供商，并声称您只需要在Android上设置本机Maps SDK "以支持本机Google Maps"。为了安全起见，大多数人最终都会与Google建立计费账户来生成API密钥（即使您不打算计算单个地图视图），而Mapbox则不需要。

- Rafael Almeida

---

Mapbox在2020年12月转向了非开源许可证。如果您托管自己的矢量切片，Mapbox SDK是否免费仍有待商榷。 - marco

Answer 2

您可以在react-native-maps包中使用自定义Tile Overlay（OpenStreetMap也适用）：https://github.com/react-native-maps/react-native-maps （滚动到使用自定义Tile Overlay部分）

您需要添加API密钥。如果不使用Maps API，则无需使用该密钥。请注意保留HTML标记。

- Andrei Konstantinov

---

我尝试使用这个库，但为什么它需要谷歌地图API密钥？我正在使用自定义的OSM瓦片服务器！ - Vahid Alimohamadi

所以这基本上仍然使用谷歌地图API密钥，对吧？ - sommesh

@VahidAlimohamadi 很遗憾，谷歌不接受我的客户签证卡，所以我无法获得密钥:( 我不知道如何在没有密钥或谷歌地图服务的情况下处理它。 - Oliver D

@OliverD 只需在谷歌地图中创建一个免费的令牌。您不会渲染谷歌瓷砖，因此不必担心超载免费令牌。 - Vahid Alimohamadi

由于 https://github.com/react-native-maps/react-native-maps/pull/2348#issuecomment-809502618 的原因，此内容已不再相关。 - rusakovic