我正在GWT应用程序中显示天气图。我使用的是GWT2.7和GoogleMapsJavaScriptneneneba API的GWT包装器(GWT-maps-3.8.0-pre1.zip)
我使用tile服务器获取天气信息,每5分钟更新一次。在5分钟的时候,我通过将缩放设置为1,然后返回到原始,通过触发调整大小,以及通过移除然后再次添加天气层来刷新地图。
效果很好然而,最近我注意到这已经不起作用了:刷新甚至从未进入tile服务器,因此不会显示新的天气。如果你把我的地图放12个小时,你就会看到12个小时前的天气。以前,地图会自动保持更新。我没有更改任何代码所以我的猜测是,底层的GoogleMaps JavaScript API发生了一些变化
然而,我创建了一个简单的纯JavaScript示例:
<!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>
<button type="button" onClick="refreshMap()">Refresh</button>
<script type="text/javascript">
var map;
var tileNEX;
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);
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);
}
function refreshMap(){
var zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
//google.maps.event.trigger(map, 'resize');
//var layer = map.overlayMapTypes.getAt(0);
//map.overlayMapTypes.setAt(0, null);
//map.overlayMapTypes.setAt(0, layer);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
令我惊讶的是,这仍然很好。每当单击"刷新"按钮时,地图都会转到互动程序服务器并获取新的互动程序。
所以我尝试在GWT中做完全相同的事情:
package com.example.client;
import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapType;
import com.google.maps.gwt.client.MapTypeId;
public class GwtMapTest implements EntryPoint {
@Override
public void onModuleLoad() {
AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
options.setOtherParms("sensor=false");
Runnable callback = new Runnable() {
public void run() {
createMap();
}
};
AjaxLoader.loadApi("maps", "3", callback, options);
}
public void createMap() {
MapOptions mapOpts = MapOptions.create();
mapOpts.setZoom(4);
mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
mapOpts.setMapTypeId(MapTypeId.TERRAIN);
mapOpts.setStreetViewControl(false);
final GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);
addWeatherLayer(map);
Button button = new Button("Gwt Refresh");
button.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
refreshWeatherLayer(map);
}
});
Button nativeButton = new Button("Native Refresh");
nativeButton.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
nativeRefreshWeatherLayer(map);
}
});
RootPanel.get().add(button);
RootPanel.get().add(nativeButton);
}
public native void addWeatherLayer(GoogleMap map) /*-{
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new $wnd.google.maps.Size(256, 256),
opacity:.50,
isPng: true
});
map.overlayMapTypes.setAt("0", imageMapType);
}-*/;
private void refreshWeatherLayer(GoogleMap map){
double zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
MapType layer = map.getOverlayMapTypes().getAt(0);
map.getOverlayMapTypes().setAt(0, null);
map.getOverlayMapTypes().setAt(0, layer);
}
private native void nativeRefreshWeatherLayer(GoogleMap map) /*-{
var zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
$wnd.google.maps.event.trigger(map, 'resize');
var layer = map.overlayMapTypes.getAt(0);
map.overlayMapTypes.setAt(0, null);
map.overlayMapTypes.setAt(0, layer);
}-*/;
}
这应该做与纯JavaScript示例相同的事情。相反,当我单击按钮时,地图确实会刷新(我看到天气层闪烁),但它实际上不会进入新瓦片的瓦片服务器。
更奇怪的是,这种"排序"在Internet Explorer中有效:也许我点击按钮三次中就有一次,地图实际上会到达tile服务器。但在Chrome中,当我点击按钮时,它永远不会进入互动程序服务器。
为了确定这一点,我正在查看浏览器工具的网络选项卡我希望每次单击按钮时地图都会进入互动程序服务器这就是它在纯JavaScript中所做的,也是它在GWT中曾经做的,但在过去几个月的某个时候,GWT的行为发生了变化。
我不认为这是浏览器缓存问题问题是而不是地图试图获取新瓦片,而是它从未尝试获取新瓦片。我单击按钮,在开发人员工具的网络选项卡中看不到任何事情。
- 为什么我在JavaScript和GWT中看到不同的行为
- 为什么我在不同的浏览器中看到不同的行为
- GWT GoogleMaps库是否正在进行某种内部缓存?有没有办法禁用它
- 为什么这种行为明显发生了变化
- 如何通过转到tile服务器获取新tile来刷新GWT映射
这不是最终答案。但包含重要信息。
为了管理http调用,GWT有一组类似浏览器的类,我认为这就是问题所在
如果以前使用的代码相同,则磁贴服务器最近可能包含缓存标头(缓存控制:最大年龄=300)。由于某些原因,GWT代码没有正确地管理这个头。
如果我是对的,解决这个问题的一种方法是在GWT调用中附加一个带有当前时间的参数(就像代码的浏览器版本一样)。
public native void addWeatherLayer(GoogleMap map) /*-{
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png?" + new Date().getTime();
},
tileSize: new $wnd.google.maps.Size(256, 256),
opacity:.50,
isPng: true
});
map.overlayMapTypes.setAt("0", imageMapType);
}-*/;