Ajouter un calque personnalisé à Google Maps

Question

J'essaie d'appliquer le calque personnalisé fourni par WeatherBug pour la température/Radar/Humidité. etc dans ma carte google en utilisant google javascript library.

Je dois appliquer le carreau transparent sur ma carte google.

Je reçois les images de tuiles de l'URL ci-dessous. Alors, comment puis-je lier cela dans ma carte?

http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx=0&ty=0&zm=1&mw=1&ds=0&stl=0&api_key=xxxxx

Answer 1

Vous devriez être en mesure d'ajouter ceci comme une carte Google Custom type. En principe, lorsque vous demandez l'API WeatherBug, vous récupérez une mosaïque que vous pouvez utiliser sur Google Maps.

Vous pouvez trouver la documentation de Google Maps here.

Le code pour vous de commencer devrait probablement ressembler à cela, vous pouvez travailler à partir de ce point:

var tileLayerOverlay = new GTileLayerOverlay(
    new GTileLayer(null, null, null, { 
    tileUrlTemplate: 'http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx={X}&ty={Y}&zm={Z}&mw=1&ds=0&stl=0&api_key=xxxxx', 
    isPng:true, 
    opacity:1.0 
    }) 
); 

map.addOverlay(tlo); 

Vérifiez également les WeatherBug description et les liens là-dedans.

Answer 2

Voici une solution pour les services WMS inpired par: http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49

Vous pouvez simplement ajust la fonction de vos besoins.

function MCustomTileLayer(map,url) { 
this.map = map; 
this.tiles = Array(); 
this.baseurl = url; 
this.tileSize = new google.maps.Size(256,256); 
this.maxZoom = 19; 
this.minZoom = 3; 
this.name = 'Custom Layer'; 
this.visible = true; 
this.initialized = false; 
this.self = this; 
} 

MCustomTileLayer.prototype.getTile = function(p, z, ownerDocument) { 
for (var n = 0; n < this.tiles.length ; n++) { 
    if (this.tiles[n].id == 't_' + p.x + '_' + p.y + '_' + z) { 
     return this.tiles[n]; 
    } 
} 
var tile = ownerDocument.createElement('IMG'); 
tile.id = 't_' + p.x + '_' + p.y + '_' + z; 
tile.style.width = this.tileSize.width + 'px'; 
tile.style.height = this.tileSize.height + 'px'; 
tile.src = this.getTileUrl(p,z); 
if (!this.visible) { 
    tile.style.display = 'none'; 
} 
this.tiles.push(tile); 

while (this.tiles.length > 100) { 
    var removed = this.tiles.shift(); 
    removed = null; 
} 
return tile; 
}; 

MCustomTileLayer.prototype.getTileUrl = function(p,z) { 
var url = this.baseurl + 
      "&REQUEST=GetMap" + 
      "&SERVICE=WMS" + 
      "&VERSION=1.1.1" + 
      "&BGCOLOR=0xFFFFFF" + 
      "&TRANSPARENT=TRUE" + 
      "&SRS=EPSG:3857" + 
      "&WIDTH=256" + 
      "&HEIGHT=256" + 
      "&FORMAT=image/png" + 
      "&mode=tile" + 
      "&tilemode=gmap" + 
      "&tile="+ p.x + "+" + p.y + "+" + z 
return url; 
} 

Vous pouvez l'utiliser comme ça

var hMap = new MCustomTileLayer(map, "http://my_base_url"); 
map.overlayMapTypes.insertAt(0, hMap); 

Et pour supprimer la superposition

map.overlayMapTypes.setAt(0,null);