2010-03-22 34 views
10

Tôi muốn tích hợp OSM trong GWT. Tôi tìm thấy thư viện này được gọi là gwt-openlayers, nhưng tôi không hiểu làm thế nào tôi có thể làm cho nó hoạt động với bản đồ OSM.gwt-openlayers với ví dụ openstreetmap

Có ai có thể cung cấp cho tôi một ví dụ ngắn không?

Trả lời

11

Hãy chắc chắn rằng bạn kế thừa từ gwt-openlayers bằng cách thêm dòng sau vào tập tin mô-đun của bạn:

<inherits name='org.gwtopenmaps.openlayers.OpenLayers'/>

Ngoài ra hãy chắc chắn rằng bạn mang trong OpenLayers javascript thư viện và OpenLayers OpenStreetMap vào ứng dụng của bạn bằng cách thêm những điều sau đây dòng trong trang "Application.html":

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

Sau đó, nó nên một điều đơn giản để tạo ra một lớp có sử dụng bản đồ đường phố mở:

OSM openStreetMap = OSM.Osmarender("Base Map"); openStreetMap.setIsBaseLayer(true);

MapWidget mapWidget = new MapWidget("350px", "350px"); mapWidget.getMap().addLayer(openStreetMap);

+0

Có một CDN an toàn cho OpenLayers .js và OpenStreetMap.js? –

11

GWT-OpenLayers HelloWorld với OpenStreetMap

Các ví dụ sau hoạt động tốt cho tôi bằng cách sử dụng OpenLayers-2.8/OpenLayers.jsOpenStreetMap.js như mô tả ở trên:

public void onModuleLoad() {

MapOptions defaultMapOptions = new MapOptions(); 
MapWidget mapWidget = new MapWidget("800px", "600px", defaultMapOptions); 

OSM osm_1 = OSM.Osmarender("Osmarender"); // Label for menu 'LayerSwitcher' 
    osm_1.setIsBaseLayer(true); 

OSM osm_2 = OSM.Mapnik("Mapnik"); // Label for menu 'LayerSwitcher' 
    osm_2.setIsBaseLayer(true); 

OSM osm_3 = OSM.CycleMap("CycleMap"); 
    osm_3.setIsBaseLayer(true); 

OSM osm_4 = OSM.Maplint("Maplint"); 
    osm_4.setIsBaseLayer(true); 

Map map = mapWidget.getMap(); 
    map.addLayer(osm_1); 
    map.addLayer(osm_2); 
    map.addLayer(osm_3); 
    map.addLayer(osm_4); 
    map.addControl(new LayerSwitcher()); 
    map.addControl(new MousePosition()); 

// map.setCenter(new LonLat(6.95, 50.94), 12);   // Warning: In the case of OSM-Layers the method 'setCenter()' uses Gauss-Krueger coordinates, 
                  //   thus we have to transform normal latitude/longitude values into this projection first: 
    LonLat lonLat = new LonLat(6.95, 50.94);    //   (6.95, 50.94) --> (773670.4, 6610687.2) 
      lonLat.transform("EPSG:4326", "EPSG:900913"); //   
    map.setCenter(lonLat, 12);        //   see http://docs.openlayers.org/library/spherical_mercator.html 

RootPanel.get().add(mapWidget); } 
+1

'defaultMapOptions' và phần' map.setCenter (lonLat, 12); 'có vẻ rất quan trọng ... – Ich