GoogleマップOpenWeatherMapタイルレイヤオーバーレイを使用したJavascript API

Google Maps API 3にXYZタイルセット（something like this）をオーバーレイするにはどうすればよいですか？私は気象データ（雲のカバーなど）をオーバーレイしたい。それをテストするために私のOpenWeatherMapsのURLを使用して自由に感じる：GoogleマップOpenWeatherMapタイルレイヤオーバーレイを使用したJavascript API

http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/{z}/{x}/{y}?hash=5

私はこの一見単純な機能を把握しようとしている複数の日を過ごしてきました。誰かが実践的な例を提供できれば、私はあなたの借金になるでしょう。この気象データオーバーレイの私のGitHub Gist implementation using OL3 and OSMをチェックしてみてください。私はまた、これが容易に達成可能でないか、ハックを必要とするかどうかを知りたいと思う。

ありがとうございました！

更新：https://jsfiddle.net/601oqwq2/4/

出典

2016-03-04 Karl Floersch

@ wf9a5m75提案があなたのために働いていた場合、私たちは知ってみましょう。 –

ImageMapTypeがあなたのためである：@ wf9a5m75の答えのおかげで、私は私の問題への解決策と一緒にこのjsFiddleを置くことができました。 https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes

var myMapType = new google.maps.ImageMapType({ 
     getTileUrl: function(coord, zoom) { 
     return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
       zoom + "/" + coord.x + "/" + coord.y + "?hash=5"; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    maxZoom: 9, 
    minZoom: 0, 
    name: 'mymaptype' 
    }); 

    map.mapTypes.set('mymaptype', myMapType); 
    map.setMapTypeId('mymaptype');

を[更新]現在mapTypeはwf9a5m75の答えに改善

var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 

    var myMapType = new google.maps.ImageMapType({ 
     getTileUrl: function(coord, zoom) { 
     return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
       zoom + "/" + coord.x + "/" + coord.y + "?hash=5"; 
     }, 
     tileSize: new google.maps.Size(256, 256), 
     maxZoom: 9, 
     minZoom: 0, 
     name: 'mymaptype' 
    }); 

    map.overlayMapTypes.insertAt(0, myMapType);

出典

2016-03-04 19:18:28 wf9a5m75

不透明度を設定する必要があるようです。また、 'minZoom：0'の後にカンマがありません。ここでは、簡単に一緒にJSFiddleをハックした：https://jsfiddle.net/601oqwq2/ –

私のソリューションでは、OpenWeatherMapタイルの下にGoogle Mapsのタイルがないように見えます。マップ要素を削除しようとしましたが、何もありません。私のjsFiddleの提案/編集はありますか？ –

私ははっきりと確認させてください。あなたはOSM層のもとでオリジナルのGoogleマップタイルを見たいのですか？ – wf9a5m75

上imageMapTypeオーバーレイ：はここにお読みください。

オーバーレイ画像タイルは、ズームアウト時に基礎となるマップをカバーしません。正規化関数（リンクに記載されているように）を使用して、それらが領域全体をカバーするようにすることができます。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<body> 
 
    <div id="map"></div> 
 
    <script> 
 
    var map; 
 

 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 19.0356826, 
 
      lng: 72.9112641 
 
     }, 
 
     zoom: 6, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     disableDefaultUI: true 
 
     }); 
 

 
     var myMapType = new google.maps.ImageMapType({ 
 
     getTileUrl: function(coord, zoom) { 
 
      var normalizedCoord = getNormalizedCoord(coord, zoom); 
 
      if (!normalizedCoord) { 
 
      return null; 
 
      } 
 
      var bound = Math.pow(2, zoom); 
 
      return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
 
      zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + "?hash=5"; 
 
     }, 
 
     tileSize: new google.maps.Size(256, 256), 
 
     maxZoom: 8, 
 
     minZoom: 0, 
 
     name: 'mymaptype' 
 
     }); 
 

 
     // Normalizes the coords that tiles repeat across the x axis (horizontally) 
 
     // like the standard Google map tiles. 
 
     function getNormalizedCoord(coord, zoom) { 
 
     var y = coord.y; 
 
     var x = coord.x; 
 

 
     // tile range in one direction range is dependent on zoom level 
 
     // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc 
 
     var tileRange = 1 << zoom; 
 

 
     // don't repeat across y-axis (vertically) 
 
     if (y < 0 || y >= tileRange) { 
 
      return null; 
 
     } 
 

 
     // repeat across x-axis 
 
     if (x < 0 || x >= tileRange) { 
 
      x = (x % tileRange + tileRange) % tileRange; 
 
     } 
 

 
     return { 
 
      x: x, 
 
      y: y 
 
     }; 
 
     } 
 

 
     map.overlayMapTypes.insertAt(0, myMapType); 
 
    } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
 
</body>

出典

2016-10-04 23:14:46

私が誤解していない限り、これがもう何を達成するのかよく分かりません - 現在、正規化された相手の代わりに 'coord.x'と' y'を使っていますズームに関係なく、X軸を横切って繰り返される、正確で移動可能なピースを提供します。さらに、OpenWeatherMapはフリーマップのために 'https://tile.openweathermap.org/map/ {layer}/{z}/{x}/{y} .png？appid = {api_key}'を使うことを提案しています。同じですが、オーバーレイしたい地図の種類を選択するだけです。（降水量、雲、温度など） –

最後の部分は、ついにVaneの仕組みを理解し始めました。あなたの答えで使用しているURLは、まだ与えられている種類です！誰かが私のように紛失した場合 - owm.ioマップエディタでレイヤーを作成し、1つ以上の天気レイヤーを選択する必要があります。 –

GoogleマップOpenWeatherMapタイルレイヤオーバーレイを使用したJavascript API

答えて

関連する問題