Für die Kartenanwendung ist zum Initialisieren eine Aktualisierung erforderlich

9

Ich habe diese Frage bei StackOverflow ausprobiert, aber keine Antworten erhalten. Ich hoffe, Sie alle könnten helfen.

Erstellen einer Web-Mapping-Anwendung in Javascript / Dojo:

Wenn ich die App in einen Browser lade, werden die HTML-Elemente geladen, die Verarbeitung wird jedoch beendet. Ich muss den Browser aktualisieren, damit er den Rest der Seite und das Javascript lädt.

Ich habe den ganzen Tag getestet und debuggt und herausgefunden, dass ich meine externen JS-Dateien an der falschen Stelle hatte (ich bin ein Neuling). Das wurde behoben und die App wird großartig geladen ... AUSSER eine meiner Dateien wird nicht richtig oder überhaupt nicht gelesen.

Wenn ich den Inhalt der betreffenden externen JS-Datei standardmäßig in den Hauptcode verschiebe, funktioniert die darin enthaltene Funktionalität einwandfrei ... ABER die Karte muss erneut aktualisiert werden.

Verblüfft. Unten finden Sie den Code in der externen JS-Datei, der mein Problem verursacht. Ich kann nicht herausfinden, warum es ein Problem ist, weil die Funktionen wie erwartet funktionieren, wenn sie nicht extern sind.

Jede Hilfe wird sehr geschätzt.

//Toggles
function basemapToggle() {
            basemaptoggler = new dojo.fx.Toggler({
                node: "basemaptoggle",
                showFunc : dojo.fx.wipeIn,
                showDuration: 1000,
                hideDuration: 1000,
                hideFunc : dojo.fx.wipeOut
            })
        }
        dojo.addOnLoad(basemapToggle);

        function layerToggle() {
            layertoggler = new dojo.fx.Toggler({
                node: "layertoggle",
                showFunc : dojo.fx.wipeIn,
                showDuration: 750,
                hideDuration: 750,
                hideFunc : dojo.fx.wipeOut
            })
        }
        dojo.addOnLoad(layerToggle);

        function legendToggle() {
            legendtoggler = new dojo.fx.Toggler({
                node: "legendtoggle",
                showFunc : dojo.fx.wipeIn,
                hideFunc : dojo.fx.wipeOut
            })
        }
        dojo.addOnLoad(legendToggle);

Hier ist der vordere Teil meines Codes

<!DOCTYPE HTML> 
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title> 
        Zoning Classifications
    </title> 
        <link rel="Stylesheet" href="ZoningClassifications.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
    <style type="text/css"> 
    </style> 

        <script src="JS/layers.js"></script>
        <script src="JS/search.js"></script>
        <script src="JS/basemapgallery.js"></script>

        <script src="JS/identify.js"></script>
        <script src="JS/toggles.js"></script>
        <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript"> 

            dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
            dojo.require("esri.tasks.locator");
            dojo.require("esri.dijit.Legend");
            dojo.require("esri.dijit.Popup");
            dojo.require("dijit.form.Button");
            dojo.require("dojo.fx");
            dojo.require("dijit.Dialog");
            dojo.require("dojo.ready");
      dojo.require("dijit.TooltipDialog");
            dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");

BEARBEITEN 2 Ich habe die App komplett neu geschrieben und den gesamten Code (außer dem CSS) in der Hauptdatei default.html platziert. Ich habe Stück für Stück getestet, um sicherzustellen, dass es so funktioniert, wie ich es will. Das Hinzufügen des Umschaltcodes ist der einzige Code, der ihn auslöst und die zusätzliche Aktualisierung verursacht.

Im Moment verwende ich dijit.TitlePane, um die Dropdown-Elemente (Grundkartengalerie, Ebenen, Legende) zu speichern. Damit kann man jedoch das Erscheinungsbild nicht ändern, um daraus Bilder zu machen, was mein Endziel ist.

Kann jemand eine Alternative vorschlagen, damit ich 3 verschiedene Bilder verwenden kann, sodass beim Klicken auf das Bild und das Dropdown-Menü die Grundkartengalerie, die Ebenenliste und die Legende geöffnet werden?

arcgis-server arcgis-javascript-api Craig
quelle
Ich sehe hier kein Kopf / Körper-Tag. Ist Ihr gesamter Javascript-Code in den Header geladen oder nicht?
Glenn Plas
Es tut uns leid. Behoben. Irgendwie wurde es formatiert, als ich den Beitrag startete.
Craig
onUpdate ()? resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/…
Mapperz
versuchte es, aber nichts. Ich bin mir fast sicher, dass das Problem bei meinen Funktionen dojo.fx.Toggler liegt. Alle meine anderen externen JS-Dateien funktionieren einwandfrei. Ich bin mir nicht sicher, warum ich Ärger bekomme. Ich habe ESRI kontaktiert und sie prüfen es. Hoffentlich habe ich bald eine Lösung.
Craig
Haben Sie versucht, mithilfe der Chrome-Entwicklertools zu ermitteln, welche externen Dateien tatsächlich geladen werden? Dies könnte Ihnen zumindest sagen, wie weit Ihre Seite beim Laden der Dateien kommt und wo Fehler sind.
Pecoanddeco

Antworten:

7

Ich würde all diese dojo.addOnLoad () -Aufrufe konsolidieren. Ich vermute, dass etwas nicht geladen wird, bevor eine Funktion aufgerufen wird.

Entfernen Sie alle dojo.addOnLoad-Aufrufe von allen externen Javascript-Dateien und bündeln Sie sie in einem Aufruf in Ihrer Haupt-HTML-Datei. Fügen Sie alle Funktionen, die Sie beim Laden auslösen möchten, wie folgt in eine neue Funktion am unteren Rand Ihres Javascript ein:

function init() {
  basemapToggle();
  layerToggle();
  whatEver();
}
dojo.addOnLoad(init);

Dadurch wird sichergestellt, dass alles geladen wurde, bevor versucht wird, Funktionen auszulösen.

Mintx
quelle
5

Wenn Sie dies genauer steuern / testen möchten, müssen Sie dies außerhalb eines Frameworks (jquery / dojo) starten. Sie könnten diese kleine Bibliothek ausprobieren:

var stack = [],
    interval,
    loaded; // has window.onload fired?

function doPoll() {
  var notFound = [];
  for (var i=0; i<stack.length; i++) {
    if (document.getElementById(stack[i].id)) {
      stack[i].callback();
    } else {
      notFound.push(stack[i]);
    }
  }
  stack = notFound;
  if (notFound.length < 1 || loaded) {
    stopPolling();
  }
}

function startPolling() {
  if (interval) {return;}
  interval = setInterval(doPoll, 10);
}

function stopPolling() {
  if (!interval) {return;}
  clearInterval(interval);
  interval = null;
}

function onAvailable(id, callback) {
  stack.push({id:id, callback:callback});
  startPolling();
}

window.onload = function() {
  loaded = true;
  doPoll();
};

Und dann benutze es so:

onAvailable('map', function () {
    // Only do stuff here once the map div is available (this always happens after the DOM is ready)
  ....
});

Grundsätzlich sagen Sie: Warten Sie, bis dieses Div existiert. Es verhält sich anders als document.ready und wird etwas später "ausgelöst". Für Sie würden Sie den Code dojo.*hier einfügen .

Es ist ein großartiger Test, um festzustellen, ob Sie von der Ladereihenfolge eines Javascript-Codes gebissen werden. Ich gebe dies, weil es von Nutzen war, diese Art von Problemen zu beheben.

Glenn Plas
quelle
Ich habe versucht, Ihren Vorschlag ohne Glück in meinen Code aufzunehmen. Können Sie uns weiter erklären, wohin dies in meinem bestehenden Chaos führen soll?
Craig
Fügen Sie den obersten Block in eine separate js-Datei ein, fügen Sie ihn in den Header ein und testen Sie dann in Ihrem Code, ob Ihre Dom-Elemente, auf die Sie einwirken, onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });direkt : Es ist keine direkte Lösung, aber es hilft Ihnen, Ihr Problem mit der
Ladereihenfolge zu
3

Es sieht so aus, als hätten Sie ein Problem mit der Skriptreihenfolge. Ihre toggles.js ist darauf angewiesen, dass das Dojo geladen wird. In Ihrem HTML-Code rufen Sie jedoch toggles.js auf, bevor Sie die Javascript-API von ESRI laden, mit der das Dojo geladen wird. Hier ist ein Vorschlag, wie Sie Ihre Skripte neu organisieren können.

...
<style type="text/css"></style> 

    <script type="text/javascript"> 
       var djConfig = { parseOnLoad: true };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript"> 

        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("dijit.TitlePane");
        dojo.require("esri.dijit.BasemapGallery");
        dojo.require("esri.arcgis.utils");
        dojo.require("esri.tasks.locator");
        dojo.require("esri.dijit.Legend");
        dojo.require("esri.dijit.Popup");
        dojo.require("dijit.form.Button");
        dojo.require("dojo.fx");
        dojo.require("dijit.Dialog");
        dojo.require("dojo.ready");
        dojo.require("dijit.TooltipDialog");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("esri.tasks.find");
    </script>
    <script src="JS/layers.js"></script>
    <script src="JS/search.js"></script>
    <script src="JS/basemapgallery.js"></script>

    <script src="JS/identify.js"></script>
    <script src="JS/toggles.js"></script>
    ...
Raykendo
quelle
Ich habe versucht, die Skripte neu zu bestellen. Wenn ich die externen Skripte nach dem API-Skript platziere, wird nur das HTML geladen (Header, Logo, Subheader). Ich muss dann aktualisieren, damit das Javascript geladen wird.
Craig
Ich habe meine letzte Antwort bearbeitet. Stellen Sie auch das Skript dojo.requires vor Ihre externen Dateien. Sie können auch erwägen, Ihre externen Skripte an den unteren Rand des HTML-Körpers zu verschieben, um sicherzustellen, dass alle DOM-Elemente geladen wurden, bevor diese Skripte ausgeführt werden.
Raykendo
Beide bearbeiteten Optionen führen zu demselben Fehler und müssen aktualisiert werden, um die js zu laden.
Craig