带有OpenWeatherMap图块叠加层的Google Maps Javascript API

Question

如何在Google Maps API 3上叠加XYZ图块集(如下所示)？我想覆盖天气数据(云层等等).随意使用我的OpenWeatherMaps URL来测试它:

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

我花了好几天试图找出这个看似简单的功能.如果有人可以提供一个有效的例子我会欠你的债.请随意使用此天气数据叠加层的OL3和OSM查看我的GitHub Gist实现.我也很想知道这是不是很容易实现/需要黑客攻击.

谢谢!

更新:感谢@ wf9a5m75的回答,我能够将这个jsFiddle与我的问题的解决方案放在一起:https://jsfiddle.net/601oqwq2/4/

Answer 1

ImageMapType适用于您的目的.请在此处阅读: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');

[update]将imageMapType覆盖在当前mapType上方

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