使用Mapbox GL

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作为他们的来源。mapbox建议将其整合到react-native项目中的好方法（下面给出的链接）

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

有没有办法将openstreet map集成到react-native项目中或者他们还没有为它创造适当的支持。

Answer 1

使用Mapbox GL

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

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

以下是使用of an example（也是基于OSM的）的Stamen Watercolor tiles片段：

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说"To use the Maps SDK for Android you must have an API key"，但是{{ 1}}似乎使用了名为AirMapView的嵌入式Maps SDK替代品，该替代品支持其他提供商，并且声称您仅需要在Android上设置本机Maps SDK即可“支持本机Google Maps”。为了安全起见，大多数人最终都在Google上建立了一个计费帐户来生成API密钥（即使您不打算计算单个地图视图也是如此），而Mapbox并不需要这样做。

Answer 2

您也可以在react-native-maps包：https://github.com/react-native-community/react-native-maps

中使用自定义的Tile Overlay（也适用于OpenStreetMap）

（滚动到使用自定义图块叠加层部分）

如何将OpenStreetMap集成到反应原生项目中？

2 个答案:

使用Mapbox GL

其他选项