添加自定義圖層到谷歌地圖

Question

我想應用溫度/雷達/溼度WeatherBug提供的自定義層。等我的谷歌地圖使用谷歌JavaScript庫。

我需要在我的谷歌地圖上應用透明瓷磚。

我從下面的網址獲取平鋪圖片。那麼我如何將它綁定到我的地圖？

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

您應該能夠添加爲谷歌自定義地圖類型。基本上，當請求WeatherBug API時，您會找回可在Google地圖上使用的圖塊。

您可以從Google Maps here中找到相關文檔。

你開始或許應該是這樣的，你可以從這個點上工作的代碼：

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); 

另外，還要檢查WeatherBug description，並在那裏的鏈接。

Answer 2

這裏是由inpired WMS服務的解決方案：http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49

你可以簡單地ajust適合您需要的功能。

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; 
} 

您可以使用它像

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

並刪除覆蓋

map.overlayMapTypes.setAt(0,null);