Google Maps API V3 - Tiles sur mesure
-
15-10-2019 - |
Question
Je travaille actuellement sur Google Maps API V3 sur
Si vous effectuez un zoom entre 21 à 23, il y aura une superposition d'image sur la carte. L'image prend trop de temps à charger et j'ai décidé de le casser en tuiles différentes pour faciliter le chargement. J'utilise carrelette automatique pour couper l'image en tuiles.
J'ai des problèmes avec le script;
var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document
var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document
Première question Comment trouvez-vous les valeurs de X et Y du document photoshop?
Disons que si je parviens à résoudre la première question.
Deuxième question ci-dessous code est correct pour afficher les tuiles en fonction du niveau de zoom? Ou suis-je manque des codes?
var BuildingsLayer = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
map.overlayMapTypes.push(BuildingsLayer);
La solution
Au lieu d'utiliser carrelette automatique, j'ai utilisé et recommandé MapTiler. Non seulement il fend l'image en tuiles et il génère également un script de tuiles javascript pour l'utiliser.
Cependant, le script est écrit dans v2. Vous pouvez modifier les codes suivant:
v3 de script tuiles
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(36.07, -112.19));
map.setZoom(11);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, maptiler);
}