如何在openlayers中显示图像层

时间:2012-04-30 10:23:39

标签: javascript visibility openlayers openstreetmap

我正在使用OpenLayers和OpenStreetMaps来开发一个小型GIS应用程序。 当isBaseLayer设置为false时,图像叠加似乎不起作用,这是我的代码:

  map = new OpenLayers.Map('map',{
                    eventListeners: {
                        "moveend": mapEvent,
                        "zoomend": mapEvent
                    }
                });
  OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, {
      initialize: function(name, options) {
          var url = [
              "http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
              "http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
              "http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://d.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://e.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://f.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png"
          ];
          options = OpenLayers.Util.extend({numZoomLevels: 19}, options);
          OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]);
      },
      CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver"
  });
  l1=new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: true});
  l2=new OpenLayers.Layer.OSM.Toolserver('osm-no-labels', {isBaseLayer: true, visibility: true});
  var pic = new OpenLayers.Layer.Image(
    'shot',
    'shot.jpg',
    new OpenLayers.Bounds(13.409460,52.5207532,13.469466,52.5407532),    new OpenLayers.Size(100, 100),
    {alwaysInRange:true,isBaseLayer: false,transparent: true, visibility: true,numZoomLevels : 3 }
  );
  map.addLayers([pic,l1,l2]);
  map.setCenter(new OpenLayers.LonLat(13.409460,52.5207532).transform(
          new OpenLayers.Projection("EPSG:4326"),
          map.getProjectionObject()
          ),10);

图层“pic”应该出现在图层“l1”和“l2”之间(当用KML图层替换图片时,它工作得很好) - 但它似乎无处可见 - 我不确定,它是否是一个坐标问题或其他。

这个问题可以简化为一个基层“l2”并在其上面覆盖“pic” - 我也无法做到这一点。

我在http://openlayers.org/dev/examples/image-layer.html看到了示例,但在那里,图像是基础层 - 当我将isBaseLayer设置为false时,图像消失。我真的不介意将图像设置为基础层,但如果我这样做,只有图像可见,不再有地图。

提前感谢任何建议!

1 个答案:

答案 0 :(得分:2)

我很确定问题是缺少'pic'图层边界的转换。 在您的代码中,您使用transform方法设置地图中心。确切地说,你必须将它用于'pic'图层的边界。

请查看我用于在地图上设置图像图层的代码:

    // World Geodetic System 1984 projection (lon/lat)
    var projWGS84 = new OpenLayers.Projection("EPSG:4326");

    var options = {   
        opacity: 1.0, 
        isBaseLayer: false,
        numZoomLevels: 20 
    };

    var extent = new OpenLayers.Bounds(WEST,SOUTH,EAST,NORTH)
        .transform(projWGS84, map.getProjectionObject());

    var imageLayer = new OpenLayers.Layer.Image('Image Layer',  
        'http://i.i.com.com/cnwk.1d/i/tim/2012/04/19/20120419_Java_Duke_mascot_001_610x418.jpg', 
        extent,
        new OpenLayers.Size(1,1),
        options);