将图像添加到 Openlayers 时出现问题

Question

我正在尝试在我的网页中实施 Annotorious Openlayers example。我能够正确获取地图，但没有图像被加载到其中。我以前从未使用过Openlayers。

默认代码为：

var baseLayer = new OpenLayers.Layer.TMS("Baselayer", "map_muenster/",
  { layername: ".",
    serviceVersion: ".",
    transitionEffect: "resize",
    type:"jpg" });

我认为它在 map_muenster 目录中查找图像，但我只希望它显示一张图像。

稍作查找后，我发现 this Stack Overflow post。我尝试在地图中添加这一层：

var osm = new OpenLayers.Layer.OSM();

var graphic = new OpenLayers.Layer.Image(
    'Image',
    'https://www.w3schools.com/css/paris.jpg',
    new OpenLayers.Bounds(27.418100,35.771100,28.388000,36.558500),
    new OpenLayers.Size(800,255),
    {numZoomLevels: 3}
);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addLayers([osm, graphic]);
map.zoomToExtent(new OpenLayers.Bounds(27.418100,35.771100,28.388000,36.558500));

但容器显示的不是 https://www.w3schools.com/css/paris.jpg 中的图像，而是一张世界地图。

如何将图像添加到我的地图并使其可注释？

Answer 1

通过替换此行使其正常工作：

map.addLayers([osm, graphic]);

有了这个：

map.addLayers([graphic, osm]);

将图像添加到 Openlayers 时出现问题

Issue in adding image to Openlayers

javascript

openlayers