在Seadragon中不能創建多個疊加層

Question

我正在嘗試將疊加層添加到正在制作的seadragon地圖中，但是由於某種原因，我無法確定我們的seadragon會忽略除第一個疊加層以外的所有疊加層。 非常感謝您提供任何幫助。

var viewer = null;

function init() {
    Seadragon.Config.autoHideControls = false;

    viewer = new Seadragon.Viewer("container");

    viewer.addEventListener("open", addOverlays);

    viewer.addControl(makeControl(), Seadragon.ControlAnchor.TOP_RIGHT);

    $(viewer.getNavControl()).parent().parent().css({ 'top': 10, 'right': 10 });
    viewer.openDzi("_assets/Mapdata/dzc_output.xml");

}

function makeControl() {
    var control = document.createElement("a");
    var controlText = document.createTextNode("");

    control.href = "#"; // so browser shows it as link
    control.className = "control";
    control.appendChild(controlText);

    Seadragon.Utils.addEvent(control, "click",
                    onControlClick);

    return control;
}

function onControlClick(event) {
    Seadragon.Utils.cancelEvent(event); // don't process link

    if (!viewer.isOpen()) {
        return;
    }

    // These are the coordinates of europe on this map
    var x = 0.5398693914203284;
    var y = 0.21155952391206562;
    var z = 5;

    viewer.viewport.panTo(new Seadragon.Point(x, y));
    viewer.viewport.zoomTo(z);
    viewer.viewport.ensureVisible();
}

function addOverlays(viewer) {
    drawer = viewer.drawer;
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";

    $(img).addClass('pushPin');

    var overlays = [
        { elmt: img, point: new Seadragon.Point(0.51, 0.22) },
        { elmt: img, point: new Seadragon.Point(0.20, 0.13) }
    ];

    for (var i = 0; i < overlays.length; i++) {
        drawer.addOverlay(overlays[i].elmt, overlays[i].point);
    }


}

Seadragon.Utils.addEvent(window, "load", init);

Answer 1

我應該已經創建了一個返回img並在對象數組中調用它的函數

function newpushPin() {
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";
    return img
}

var overlays = [
    { elmt: newpushPin(), point: new Seadragon.Point(0.51, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.23) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.50, 0.20) }
];