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

【问题标题】：react-native-maps - Very low resolution with OpenStreetMapreact-native-maps - OpenStreetMap 的分辨率非常低
【发布时间】：2020-04-15 01:52:54
【问题描述】：

我在 React Native 中使用 react-native-maps，我想使用 OpenStreetMap（因为 Google 地图对于商业项目来说非常昂贵）。 MapView 给出的图块分辨率很低，图块和标签非常模糊（见下图）。

此代码与 Google 地图完美配合：

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

如何使图块的分辨率更高（或模拟缩小？）

【问题讨论】：

您需要使用支持high-resolution tiles 的不同图块源，也称为视网膜图块。
我不知道它是否有帮助，但是 OSM 鼓励用户运行他们自己的 tile 服务器 - 也许这样可以解决 res 问题？

标签： react-native openstreetmap resolution react-native-maps blurry

【解决方案1】：

从您的屏幕截图中，我看到尚未加载的更高缩放比例的图块。相反，您的应用程序使用较低缩放和比例的图块，而不是加载正确的图块。您的问题是您使用 openstreetmap.org 作为平铺源，这是一个糟糕的商业理念。他们的基础设施完全超载。 openstreetmap.org 还会及时更新他们的数据并在数据发生更改时重新渲染图块以支持映射器。但这对于只想显示地图的外部应用程序来说毫无用处。

使用基于 OSM 数据但针对网站和应用进行了优化的不同磁贴提供程序，并以智能方式缓存磁贴以实现快速交付。这将花费一些钱，但远低于 G Maps。

【讨论】：