首页 文章

如何在openlayers中显示图像层

提问于
浏览 次
1

我正在使用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时，图像消失了 . 我真的不介意将图像设置为基础层，但如果我这样做，只有图像可见，不再有 Map .

在此先感谢您的任何建议！

javascript visibility openlayers openstreetmap

1 回答

  • 2

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

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

    // 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);
    回复于

相关问题