javascript - 标记错位在其他图层上

Question

我目前正在开发我的第一个 OSM 项目，并尝试从 OpenLayers Examples 库中的标准示例开始，我设法在 map 上放置 3 个标记并显示其他图层(Google Streetmap、Mapnik)

但是如果我继续更改图层(例如从 WSM 更改为 Mapnik)，我的标记将重置到点 0,0。我不会改变投影。

我有什么遗漏吗？

<script defer="defer" type="text/javascript">
    var map, layer;

    function init(){
        OpenLayers.ProxyHost="/proxy/?url=";
        map = new OpenLayers.Map('map');
        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(layer);

        var osm = new OpenLayers.Layer.OSM();            
        var gmap = new OpenLayers.Layer.Google("Google Streets");
        map.addLayers([osm, gmap]);

        map.setCenter(new OpenLayers.LonLat(0, 0), 0);

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
        var halfIcon = icon.clone();

        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(10,10),icon));
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));

        marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
        marker.setOpacity(0.9);
        marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
        markers.addMarker(marker); 
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();

        halfIcon.setOpacity(0.5);
    }
</script>

Answer 1

此问题与基础层使用的投影有关。WMS 层使用 EPSG:4326 的投影。该投影将地球视为椭球体，其度数范围为 -180.0000、-90.0000、180.0000、90.0000

虽然 OSM 和其他知名 map (例如 Google map )，但 Bing map 使用 EPSG:900913(正式名称为 EPSG:3857)。这是墨卡托投影，它将地球视为球体而不是椭球体，并且包含从 -20037508.34 到 20037508.34 的米范围。

因此，当您将图层从 WMS 更改为 OSM 时；投影更改为 EPSG:900913，在 EPSG:900913 中，您添加的点之间的差异可以忽略不计(因为它们被视为米而不是度)，它们被投影在 0,0 附近。 (进行全缩放以查看点之间的差异。)

据我所知，要解决此问题，您必须通过 OpenLayers.LonLat.transform 转换您的观点更改基础层时的方法。您可以关联“changebaselayer”事件以在基础层更改时引发事件。

为了更清楚起见，我修改了 jsfiddle由 Andreas 提供，并进行以下更改

1. 添加了显示 WMS 和 OSM 图层投影的标签。 (仅供引用)

2. 与 map 对象关联的changebaselayer方法

   map = new OpenLayers.Map('map', {
       eventListeners: {
           "changebaselayer": mapBaseLayerChanged
       }
   });
   

3. 添加了方法“”，您可以在其中编写逻辑以通过调用转换方法来更改标记的投影。

   function mapBaseLayerChanged(event) {
       var currentLayer = event.layer;
       alert(currentLayer.name);
       // Write code to transform each markers.
   }
   

希望这个回答对你有帮助。