React-Native-Maps <LocalTiles /> 不工作

Question

我目前正在使用 React-Native-Maps 进行展示；这些是我的步骤：

1 通过使用 QGIS，我生成了一个包含 XYZ 文件的文件夹

2 我已将 XYZ 文件上传到下载下的 android 模拟器：

3 在我的 React-Native 代码中，我使用了组件并给出了路径：

<MapView
  style={styles.map}
  mapType={Platform.OS == "android" ? "none" : "standard"}
>
  <LocalTile
    // The path template of the locally stored tiles. The patterns {x} {y} {z} will be                    replaced at runtime
    // For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
    pathTemplate={`${RNFS.DownloadDirectoryPath}/123/{z}/{x}/{y}.png`}
    // The size of provided local tiles (usually 256 or 512).
    tileSize={512}
  />
  // I also tried the UrlTile
  <UrlTile
    urlTemplate={`file://${RNFS.DownloadDirectoryPath}/123/{z}/{x}/{y}.png`}
    zIndex={10}
  />
</MapView>

我有 console.log pathTemplate，它直接指向“/storage/emulated/0/Download/123/{z}/{x}/{y}.png”

但是页面什么也没有显示

有人可以帮我吗？我不确定这是 XYZ 文件问题还是路径问题

谢谢

地图将显示 XYZ 方块

Answer 1

我正在做类似的事情，那是对我有用的代码（UrlTile 和 LocalTile 都在工作）：

import React from "react";
import MapView, { LocalTile, UrlTile } from "react-native-maps";
import RNFetchBlob from "rn-fetch-blob";

const MapScreen = () => {
  const urlTemplate =
    "file://" +
    RNFetchBlob.fs.dirs.DocumentDir +
    "/assets/tiles/{z}/{x}/{y}.png";
  const localTemplate =
    RNFetchBlob.fs.dirs.DocumentDir + "/assets/tiles/{z}/{x}/{y}.png";

  const initialRegion = {
    latitude: 50.0647,
    longitude: 19.945,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  };

  return (
    <MapView
      style={{
        flex: 1,
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        position: "absolute",
      }}
      minZoomLevel={16}
      maxZoomLevel={16}
      initialRegion={initialRegion}
    >
      {/* <UrlTile urlTemplate={urlTemplate} zIndex={-1} tileSize={256} /> */}
      <LocalTile pathTemplate={localTemplate} tileSize={256} zIndex={-1} />
    </MapView>
  );
};

export default MapScreen;

只需确保您的 XYZ 文件是正确的。我用这个工具来制作瓷砖：https://blog.studioblueplanet.net/software/open-street-map-tile-downloader然后将它们存储在data/data/com.appname/files/assets/tiles