Problem beim Hinzufügen von Bild zu Openlayers

Question

Ich versuche Annotorious Openlayers example in meiner Webseite zu implementieren. Ich bin in der Lage, die Karte richtig zu bekommen, aber kein Bild wird darin geladen. Ich habe noch nie zuvor OpenLayers benutzt.

Der Standardcode lautet:

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

die ich denke, sehen für ein Bild in map_muenster Verzeichnis, aber ich will es nur ein Bild anzuzeigen.

Nach einem Blick nach oben, fand ich this Stack Overflow Post. Ich habe versucht, das Hinzufügen dieser Schicht in der Karte:

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)); 

aber statt das Bild in https://www.w3schools.com/css/paris.jpg zeigt, wobei der Container zeigt eine Weltkarte.

Wie kann ich das Bild zu meiner Karte hinzufügen und annotierbar machen?

Answer 1

Verstanden durch Ersetzen Sie diese Zeile arbeiten:

map.addLayers([osm, graphic]); 

mit diesem:

map.addLayers([graphic, osm]);