0

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

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

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

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

我正在使用世博会。

在此处输入图像描述

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

我尝试使用 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>

在此处输入图像描述

4

2 回答 2

0

您能否查看以下文章并告诉我，您是否在那里找到了一些有用的信息？它以 MapTiler Cloud 为目标，但我相信某些原理会与 Server 非常相似。

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

于 2022-02-08T07:22:58.110 回答
0

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

我使用命令从 CMD 得到它ipconfig

urlTemplate="http://192.168.1.1:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
于 2022-02-08T08:36:22.340 回答