谷歌地图API:刷新ImageMapType覆盖

Google Maps API: Refresh ImageMapType Overlay

本文关键字：ImageMapType 覆盖 刷新 API 谷歌地图      更新时间：2023-09-26

我使用Google Maps JavaScript API来显示来自tile服务器的天气。贴片服务器可以在这里找到:http://mesonet.agron.iastate.edu/ogc/

我正在使用ImageMapType显示tile服务器并将其添加到Google Map的overlayMapTypes:

<!DOCTYPE html>
<html>
    <head>
        <title>Map Test</title>
        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0; }
            #map {
                width:90%;
                height: 90%;
                display:inline-block;
            }
        </style>
    </head>
<body>
<div id="map"></div>
<script type="text/javascript">
    var map;
    function initMap() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(42.5, -95.5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var tileNEX = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); 
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.60,
            name : 'NEXRAD',
            isPng: true
        });
        map.overlayMapTypes.setAt("0",tileNEX);
        setInterval(function (){console.log("resize"); google.maps.event.trigger(map, 'resize');}, 60000);
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>

这可以正常工作(将其复制到index.html中并打开浏览器查看)，但现在我想每隔X分钟刷新一次天气覆盖。

瓷砖服务器显示当前天气数据，并且该天气数据每5分钟更新一次。我想让我的天气数据自动刷新，以始终显示当前天气。

我已经尝试调用google.maps.event.trigger(map, 'resize');告诉地图重新绘制自己(看看我的JavaScript中的最后一行)，但这实际上并没有重新获取瓷砖-它只是重新绘制它已经获取的瓷砖。

我可以删除图层，重新创建它，然后再添加它，但这会导致在没有显示天气时出现令人讨厌的第二秒。

我的下一个想法是在背景中创建另一个天气层，然后从第一层渐变到第二层，但这似乎有点小题大做。

没有一个简单的ImageMapType.refetchTiles()函数吗?

问题是触发resize-event并不会强制加载新的tile。(当您查看网络时，您将看到没有加载任何内容)

改变缩放将加载新的贴图:

function initMap() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(42.5, -95.5),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var tileNEX = new google.maps.ImageMapType({
        getTileUrl: function(tile, zoom) {
            //return if zoom is not an integer
            if(zoom%1)return null;
            return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); 
        },
        tileSize: new google.maps.Size(256, 256),
        opacity:0.60,
        name : 'NEXRAD',
        isPng: true
    });
    map.overlayMapTypes.setAt("0",tileNEX);
    setInterval(function (){
      //this will change the zoom of the map  
      map.setZoom(map.getZoom()+.000000000000001);
      //this will change the zoom again and load fresh tiles
      map.setZoom(Math.round(map.getZoom()));
      }, 60000);
}

但是，不管你怎么尝试，这个:当没有显示天气时，会导致令人讨厌的第二秒将永远是你的问题，因为它需要一些时间来加载瓷砖

相关文章：