我正在使用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时,图像消失。我真的不介意将图像设置为基础层,但如果我这样做,只有图像可见,不再有地图。
提前感谢任何建议!
答案 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);