gwt-openlayers 和 openstreetmap 示例

发布于 2024-08-26 06:41:07 字数 98 浏览 7 评论 0原文

我想将 OSM 集成到 GWT 中。 我找到了这个名为 gwt-openlayers 的库,但我不明白如何使其与 OSM 映射一起使用。

谁能给我提供一个简短的例子?

I'd like to integrate OSM in GWT.
I found this library called gwt-openlayers, but I don't understand how can I make it work with the OSM map.

Can anyone provide me a short example?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

凶凌 2024-09-02 06:41:07

确保通过将以下内容添加到模块文件中来继承 gwt-openlayers:

另外,请确保引入 OpenLayers javascript通过在“Application.html”页面中添加以下行,将库和 OpenStreetMap OpenLayers 添加到您的应用程序中:

那么创建起来应该很简单使用开放街道地图的图层:

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

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

Make sure you inherit from gwt-openlayers by adding the following to your module file:

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

Also make sure you bring in the OpenLayers javascript library and OpenStreetMap OpenLayers into your application by adding the following lines in "Application.html" page:

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

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

Then it should a simple thing to create a layer that uses open street maps:

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

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

女中豪杰 2024-09-02 06:41:07

GWT-OpenLayersHelloWorld与 OpenStreetMap

下面的示例对我来说效果很好,使用OpenLayers-2.8/OpenLayers.jsOpenStreetMap.js< /code>如上所述:

公共无效onModuleLoad(){

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

OSM osm_1 = OSM.Osmarender("Osmarender"); // 菜单“LayerSwitcher”的标签
    osm_1.setIsBaseLayer(true);

OSM osm_2 = OSM.Mapnik("Mapnik"); // 菜单“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 = 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());

 // 地图.setCenter(new LonLat(6.95, 50.94), 12); // 警告:在 OSM 层的情况下,方法“setCenter()”使用 Gauss-Krueger 坐标,
                                                           // 因此我们必须首先将正常的纬度/经度值转换为该投影:
    LonLat lonLat = 新 LonLat(6.95, 50.94); // (6.95, 50.94) --> (773670.4、6610687.2)
           lonLat.transform("EPSG:4326", "EPSG:900913"); //           
    地图.setCenter(lonLat, 12); // 请参阅http://docs.openlayers.org/library/spherical_mercator.html

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

GWT-OpenLayersHelloWorldwith OpenStreetMap

The following example works fine for me usingOpenLayers-2.8/OpenLayers.jsandOpenStreetMap.jsas described above:

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); }
剩余の解释 2024-09-02 06:41:07

您可以在此处找到 gwt-openlayers 的当前版本: http://sourceforge.net/projects/gwt-openlayers /

you find the current version of gwt-openlayers here: http://sourceforge.net/projects/gwt-openlayers/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文