Utilisation de la fonctionnalité overlayMapTypes dans React-native-map

Question

1. Image en double
2. Ne fonctionne pas
Les vignettes
3. url sont des images côté serveur
4. Même image affichée plus de 100 fois Ce code est pour le Web, comment l'implémenter dans React-Native, j'utilise React-native-map

/*** @Licence
 *Droits d'auteur 2019 Google LLC.
 * Identifiant de licence SPDX : Apache-2.0*/
fonction initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 18,
    centre : { lat : 37,783, lng : -122,403 },
  });
  limites const = {
    17 : [
      [20969, 20970],
      [50657, 50658],
    ],
    18 : [
      [41939, 41940],
      [101315, 101317],
    ],
    19 : [
      [83878, 83881],
      [202631, 202634],
    ],
    20 : [
      [167757, 167763],
      [405263, 405269],
    ],
  } ;
  const imageMapType = nouveau google.maps.ImageMapType({
    getTileUrl : fonction (coordonnée, zoom) {

      console.log("coord",coord)
      retour [
        "https://www.gstatic.com/io2010maps/tiles/5/L2_",
        Zoom,
        "_",
        coordonnée.x,
        "_",
        coordination,
        ".png",
      ].rejoindre("");
    },
    TileSize : nouveau google.maps.Size (256, 256),
  });
//cosonle.log("imageMapType",imageMapType)
  map.overlayMapTypes.push(imageMapType);
}

window.initMap = initMap;

Veuillez fournir une réponse pour les urlTiles utilisant React-native-map dans React-native

Answer 1

如何使用这段代码
import {UrlTile} from 'react-native-maps';

<MapView region={this.state.region} onRegionChange={this.onRegionChange}>
  <UrlTile
    /**
     * 瓦片服务器的url模板。运行时将替换{x} {y} {z}模式
     * 例如，http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
     */
    urlTemplate={this.state.urlTemplate}
    /**
     * 此瓦片叠加层的最大缩放级别。对应于MKTileOverlay中的maximumZ设置。仅适用于iOS。
     */
    maximumZ={19}
    /**
     * flipY允许使用具有倒置的y坐标（地图左下角为原点）的瓦片。默认值为false。
     */
    flipY={false}
  />
</MapView>;