从maplibre-react-native中的文件渲染本地.mbtiles

Question

我想知道是否可以使用

mbtiles

覆盖

VectorSource

文件，并使用

FillLayer

覆盖

maplibre-react-native

。目前，我的设置适用于远程托管数据集，但在使用具有文档文件系统路径中的路径的 .mbtiles 文件时则不适用于。

我正在将 Expo 工作流程与开发客户端一起使用，所以如果可以在不接触本机文件的情况下完成它，我会最好。

const downloadMbtiles = async () => {
  const remoteUrl = 'my-url';
  const localPath = FileSystem.documentDirectory + 'test.mbtiles';
  const { status, uri } = await FileSystem.downloadAsync(remoteUrl, localPath);
  console.warn(status, uri); // 200 ok
};

return (
  <MapLibreGL.VectorSource
    key={'maps-overlay'}
    id={'maps-source'}
    url={FileSystem.documentDirectory + 'test.mbtiles'}
  >
    <MapLibreGL.FillLayer
      id={'test-overlay'}
      sourceLayerID={'test-123'}
      style={{
        fillOpacity: 0.8,
        fillColor: [
          'interpolate',
          ['linear'],
          ['get', 'v'],
          0,
          'gold',
          2,
          'red',
        ],
      }}
    />
  </MapLibreGL.VectorSource>
);

Answer 1

要在

Expo

工作流程中使用带有

.mbtiles

的本地 maplibre-react-native 文件而不接触本机代码，您可以尝试使用应用程序中的本地服务器通过 HTTP 提供

.mbtiles

文件。
这将涉及使用像

expo-server

这样的库（或任何其他合适的库）在本地提供文件：启动本地服务器，提供

.mbtiles

文件，然后使用本地服务器的 URL 作为

 中的源 URL VectorSource

。

我看到一个月前发布的 @expo/server 包（带有相当新的 changelog）。

尝试改为 mbtiles-server 或更新的

tileserver-gl

(

npm install -g tileserver-gl

)。

A

tileserver-gl path/to/your/test.mbtiles

应启动本地服务器，通常可通过

http://localhost:8080

访问，提供

.mbtiles

文件中的图块。控制台输出将提供准确的 URL。

在您的图块服务器运行时，您将需要更新您的

maplibre-react-native

组件以从本地

tileserver-gl

实例获取图块。将

url

组件中的

VectorSource

属性替换为

tileserver-gl

s 提供的 URL：

const LOCAL_TILESERVER_URL = "http://localhost:8080/data/v3/{z}/{x}/{y}.pbf";

return (
  <MapLibreGL.VectorSource
    key={'maps-overlay'}
    id={'maps-source'}
    url={LOCAL_TILESERVER_URL} // Use the URL provided by tileserver-gl
  >
    <MapLibreGL.FillLayer
      id={'test-overlay'}
      sourceLayerID={'test-123'}
      style={{
        fillOpacity: 0.8,
        fillColor: [
          'interpolate',
          ['linear'],
          ['get', 'v'],
          0,
          'gold',
          2,
          'red',
        ],
      }}
    />
  </MapLibreGL.VectorSource>
);

由于

tileserver-gl

在Expo环境之外运行，因此应该不存在兼容性问题。但是，请确保您的移动设备或模拟器可以访问本地服务器。如果在物理设备上测试，您的设备和服务器必须在同一网络，并且您可能需要使用您机器的 IP 地址而不是

localhost

。