react原生地图-使用OpenStreetMap的分辨率非常低

Question

我在react native中使用react native地图，我想使用OpenStreetMap(因为谷歌地图对于商业项目来说非常昂贵(。MapView提供的分幅分辨率非常低，分幅和标签非常模糊(见下图(。

此代码与谷歌地图完美配合：

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结果(非常模糊(

---

环境信息：

• 反应：~116.9.0=>16.9.0
• 天然反应：0.61.4
• react本地映射：0.26.1

---

我该如何提高瓦片的分辨率(或模拟缩小？(

Answer 1

从您的屏幕截图中，我看到缩放比例更高的瓦片尚未加载。相反，您的应用程序使用缩放比例较低的平铺，直到加载正确的平铺。你的问题是，你正在使用openstreetmap.org作为tile源，这是一个糟糕的商业想法。他们的基础设施完全超载。openstreetmap.org还会详细更新他们的数据，如果数据发生变化，则会重新发送瓦片以支持映射器。但这使得它对只想显示地图的外部应用程序没有用处。

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