时间戳

首页 > 解决方案 > react-native-maps - OpenStreetMap 的分辨率非常低

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

问题描述

我在 React Native 中使用 react-native-maps 并且我想使用 OpenStreetMap（因为 Google Map 对于商业项目来说非常昂贵）。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>

谷歌地图结果

更改为使用 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 结果（非常模糊）

环境信息：

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

标签： react-nativeopenstreetmapresolutionreact-native-mapsblurry

解决方案

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

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

推荐阅读