react-native-maps-OpenStreetMap的分辨率非常低

Question

我在React Native中使用react-native-maps，并且我想使用OpenStreetMap（因为Google Map对于商业项目而言非常昂贵）。 MapView提供的分辨率非常低的图块，这些图块和标签非常模糊（请参见下图）。

此代码与Google Maps完美结合：

import MapView, {
  MAP_TYPES,
  PROVIDER_DEFAULT,
  PROVIDER_GOOGLE,
} from "react-native-maps";
...
<MapView
  ref={(map) => (currentMap = map)}
  initialRegion={location}
  showsUserLocation
  style={{
    height: Globals.Layout.window.height,
    width: Globals.Layout.window.width,
  }}
></MapView>

Google map result

---

更改为使用OpenStreetMap，您将获得正确的图块，但是所有内容都是模糊的且分辨率较低：

import MapView, {
  MAP_TYPES,
  PROVIDER_DEFAULT,
  PROVIDER_GOOGLE,
} from "react-native-maps";
...
<MapView
  ref={(map) => (currentMap = map)}
  initialRegion={location}
  showsUserLocation
  provider={PROVIDER_DEFAULT}
  mapType={MAP_TYPES.NONE}
  style={{
    height: Globals.Layout.window.height,
    width: Globals.Layout.window.width,
  }}
>
    <MapView.UrlTile
      urlTemplate={"http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"}
      shouldReplaceMapContent={true}
    />
</MapView>

OpenStreetMap result (very blurry)

---

环境信息：

• 反应：〜16.9.0 => 16.9.0
• 本机：0.61.4
• react-native-maps：0.26.1

---

我该如何提高瓷砖的分辨率（或模拟缩小？）

Answer 1

从您的屏幕截图中，我看到尚未加载的具有更高缩放比例的图块。取而代之的是，您的应用程序使用的缩放比例和缩放比例要比加载正确的拼贴之前低。您的问题是您将openstreetmap.org用作图块源，这是一个坏主意。他们的基础设施完全过载。 openstreetmap.org还会及时更新其数据，并在发生数据更改以支持映射器时重新渲染图块。但是，这对于只想显示地图的外部应用程序没有用。

[使用基于OSM数据但针对网站和应用进行了优化的其他图块提供程序，并以智能方式缓存图块以快速交付。这将花费一些钱，但远低于G地图。