0
Я пытаюсь отобразить карту погоды в приложении GWT. Я использую GWT 2.6.1 и GWT-обертку API-интерфейса GoogleMaps JavaScript here (gwt-maps-3.8.0-pre1.zip).GWT GoogleMaps JavaScript API: тип карты наложения не отображается
Я пытаюсь использовать сервер плитки, точно так же, как this example. Я рассматриваю источник, и я вижу, что они добавляют погоду с помощью наложения типа карты изображения:
goes = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-east-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'GOES East Vis',
isPng: true
});
map.overlayMapTypes.setAt("0",goes);
Я также глядя на примеры того, как наложение тип карты изображения из google's tutorials, и их подход довольно так же:
var imageMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
if (zoom < 17 || zoom > 20 ||
bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
return null;
}
return ['http://www.gstatic.com/io2010maps/tiles/5/L2_',
zoom, '_', coord.x, '_', coord.y, '.png'].join('');
},
tileSize: new google.maps.Size(256, 256)
});
map.overlayMapTypes.push(imageMapType);
Я пытаюсь сделать это с помощью GWT обертку:
package com.test.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.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.ImageMapType;
import com.google.maps.gwt.client.ImageMapTypeOptions;
import com.google.maps.gwt.client.ImageMapTypeOptions.Callback;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.Point;
import com.google.maps.gwt.client.Size;
public class GwtTest 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);
ImageMapTypeOptions imto = ImageMapTypeOptions.create();
imto.setGetTileUrl(new Callback(){
@Override
public String handle(Point coord, double z) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ z + "/" + coord.getX() + "/" + coord.getY() + ".png";
}
});
imto.setTileSize(Size.create(256, 256));
ImageMapType imt = ImageMapType.create(imto);
map.getOverlayMapTypes().push(imt);
}
}
Однако я получаю ошибку компиляции на этой последней строке:
The method push(MapType) in the type MVCArray<MapType> is not applicable for the arguments (ImageMapType)
Похоже, что оболочка GWT отсутствует наследование и не распознает ImageMapType как MapType. Поэтому я стараюсь сделать это в родном JavaScript:
package com.test.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.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.ImageMapType;
import com.google.maps.gwt.client.ImageMapTypeOptions;
import com.google.maps.gwt.client.ImageMapTypeOptions.Callback;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.Point;
import com.google.maps.gwt.client.Size;
public class GwtTest 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);
}
public native void addWeatherLayer(GoogleMap map) /*-{
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
console.log("http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png");
"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),
isPng: true
});
map.overlayMapTypes.insertAt(0, imageMapType);
}-*/;
}
Этот код действительно работает. Если я просмотрю консоль JavaScript при просмотре карты, я могу увидеть распечатки URL-адресов сервера плитки, и они верны. Однако на карте не видно погоды.
Итак, мои вопросы:
- Есть ли способ сделать это в «чистом GWT» с помощью оболочки GWT и не родной JavaScript?
- При использовании родного JavaScript, почему моя погода не видима? Я проверил, чтобы была погода, которая должна быть видимой, но она никогда не отображается на карте.