如何在 React Native 应用程序中实现 MapTiler 服务器

Question

我正在构建一个包含地图和一些标记的移动应用程序，我发现使用带有 Google API 的 react-native-maps 会花费很多。

我开始使用 MapTiler 托管自己的地图切片服务器。

我的问题是我找不到可以在 React 本机组件中显示我的地图的库。

这是我的 MapTiler 服务器：我不知道如何在我的 React 本机应用程序中实现这些栅格图块。

我正在使用 Expo。

我应该使用哪个没有任何定价或商业许可的图书馆。如果你有好的解决方案请举个例子。

我尝试使用 react-native-maps 但它没有显示任何图块。

        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
          mapType="none"
        >
          <UrlTile
            tileSize={512}
            urlTemplate="http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>

Answer 1

能否请您查看以下文章并告诉我，您是否从中找到了一些有用的信息？它针对的是MapTiler Cloud，但是我相信一些原理会和Server很相似。

https://documentation.maptiler.com/hc/en-us/articles/4405444890897-How-to-display-MapLibre-GL-JS-map-using-React-JS

Answer 2

问题是 react native 不理解 localhost 是什么。我不得不将 localhost 更改为我的 IP 地址 192.168.1.1

我使用命令 ipconfig

从 CMD 获取了它

urlTemplate="http://192.168.1.1:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"

如何在 React Native 应用程序中实现 MapTiler 服务器

How to implement MapTiler server in React Native app

react-native

expo

react-native-maps

maptiler