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

Question

我正在开发一个包括地图和一些标记的移动应用程序，我发现在Google中使用react本地地图将花费很多钱。

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

我的问题是，我找不到一个库来显示我的地图在反应本机组件。

这是我的MapTiler服务器:我不知道如何在我的react本地应用程序中实现这些光栅块。

我在用世博会。

​

​

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

我试着用反应-本地地图，但它没有显示任何瓷砖。

        <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

问题是，react本机不理解什么是localhost。我不得不将本地主机更改为IP地址192.168.1.1

我使用命令ipconfig从CMD获得它。

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

Answer 2

请你查一下下面的文章，让我知道，你在那里找到了一些有用的信息吗？它的目标是服务器云，但我相信一些原则将非常类似于MapTiler。

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