使用OpenWeatherMap瓷砖层叠加Google Maps Javascript API

Question

使用OpenWeatherMap瓷砖层叠加Google Maps Javascript API

javascriptgoogle-mapsgoogle-maps-api-3openweathermap

7

我该如何在Google Maps API 3上叠加XYZ瓦片集（类似于这个样子）？我希望叠加天气数据（云层覆盖......等）。请随意使用我的OpenWeatherMaps URL进行测试：

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

我花了数天时间试图解决这个看似简单的功能。如果有人能提供一个有效的例子，我将不胜感激。您可以查看我的GitHub Gist实现使用OL3和OSM的天气数据叠加。如果这不容易实现/需要hack，请随便说。谢谢！更新：由于@wf9a5m75的答案，我能够组合出这个jsFiddle，解决了我的问题：https://jsfiddle.net/601oqwq2/4/

- Karl Floersch

2

请告诉我们@wf9a5m75的建议是否对您有用。 - Alexandre Dubé

2个回答

2

改进 wf9a5m75 的回答。

当缩小地图时，叠加图像瓦片不会覆盖底层地图。我们可以使用一个标准化函数（如链接 here 中所述）来确保它们覆盖整个区域。

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>

- Ashesh

我不太确定这个代码现在还有什么作用（2018年）- 除非我误解了 - 目前，使用 coord.x 和 y 而不是它们的标准化对应项提供了一个准确的、可移动的图块，在缩放时也可以在 X 轴上重复。此外，OpenWeatherMap 建议使用 https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={api_key} 获取免费地图，它的实际效果相同，只需要选择您希望叠加的地图类型即可。（降水、云、温度等） - Mackenzie Fritschle

不用在意上一个部分 - 最终开始理解 Vane 如何工作了，你回答中使用的 URL 是他们仍然提供的那种！如果有人和我一样迷失了方向 - 你必须在 owm.io 地图编辑器中创建图层，并选择一个或多个天气图层。 - Mackenzie Fritschle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wf9a5m75 · Accepted Answer

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

[更新] 在当前地图类型上方叠加imageMapType

该功能是在当前地图类型的基础上添加一层imageMapType。

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