带有 OpenWeatherMap 平铺层叠加的 Google Maps Javascript API
Posted
技术标签:
【中文标题】带有 OpenWeatherMap 平铺层叠加的 Google Maps Javascript API【英文标题】：Google Maps Javascript API with an OpenWeatherMap Tile Layer Overlay 【发布时间】：2016-06-18 15:58:06 【问题描述】：如何在 Google Maps API 3 上叠加 XYZ 瓦片集 (something like this)？我想覆盖天气数据（云层......等）。随意使用我的 OpenWeatherMaps URL 进行测试：
http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/z/x/y?hash=5
我花了好几天的时间试图弄清楚这个看似简单的功能。 如果有人能提供一个可行的例子，我会欠你的。随时查看我的GitHub Gist implementation using OL3 and OSM 这个天气数据叠加。我也很想知道这是否不容易实现/需要破解。
谢谢！
更新：感谢@wf9a5m75 的回答，我能够将这个jsFiddle 与我的问题的解决方案放在一起：https://jsfiddle.net/601oqwq2/4/
【问题讨论】：
如果@wf9a5m75 的建议对您有用，请告诉我们。 【参考方案1】：改进 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>【讨论】：
我不太确定这能实现什么（2018 年）——除非我有误解——目前，使用coord.x 和 y 而不是它们的标准化对应物提供了一个准确、可移动的部分，无论缩放如何，它也会在 X 轴上重复。此外，OpenWeatherMap 建议使用https://tile.openweathermap.org/map/layer/z/x/y.png?appid=api_key 获取免费地图，其工作原理几乎相同，您只需要选择要叠加的地图类型即可。 （降水、云、温度等）
别在意最后一部分 - 终于开始了解 Vane 的工作原理，并且在您的答案中使用的 URL 是他们仍然提供的那种！如果有人像我一样迷路 - 您必须在 owm.io 地图编辑器中制作图层，然后选择一个或多个天气图层。【参考方案2】：
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 覆盖在当前 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);
【讨论】：
似乎需要设置不透明度。在minZoom: 0 之后也缺少逗号。这是一个快速破解的 JSFiddle：jsfiddle.net/601oqwq2
在我的解决方案中，OpenWeatherMap 磁贴下似乎没有 Google 地图磁贴。我尝试删除地图元素，但没有任何内容。你对我的 jsFiddle 有什么建议/修改吗？
让我确认清楚。你想不想在 OSM 图层下看到原始的谷歌地图瓦片？
是的，我想查看 OSM 层下的原始 Google 地图图块。
完美！非常感谢@wf9a5m75！我已经更新了我的 jsFiddle 以包含您的更改，并且它完全按预期工作。 jsfiddle.net/601oqwq2/4以上是关于带有 OpenWeatherMap 平铺层叠加的 Google Maps Javascript API的主要内容，如果未能解决你的问题，请参考以下文章