マップアプリケーションを初期化するには更新が必要です


9

StackOverflowでこの質問を試してみましたが、回答がありませんでした。皆様のお役に立てれば幸いです。

JavaScript / DojoでWebマッピングアプリケーションを作成する:

アプリをブラウザーに読み込むと、html要素が読み込まれますが、処理が停止します。ブラウザーを更新して、ページの残りの部分とJavaScriptをロードする必要があります。

私は一日中テストとデバッグを行っており、外部JSファイルが間違った場所にあることがわかりました(私は新人です)。それを修正し、アプリは素晴らしいロードをします...私のファイルの1つが正しく読まれていないか、まったくありません。

問題の外部JSファイルのコンテンツをデフォルトのメインコードに移動すると、それらに含まれる機能が正常に動作しますが、マップには再度更新が必要です。

困惑。以下は、私の問題の原因となっている外部JSファイルのコードです。関数が外部ではないときに期待どおりに機能するため、なぜ問題なのか理解できません。

どんな助けでも大歓迎です。

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

これが私のコードの前部です

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

編集2 すべてのコード(cssを除く)をメインのdefault.htmlファイルに配置するアプリを完全に書き直しました。私はそれが私が望むように機能することを確かめるために少しずつテストしました。トグルコードの追加は、それをスローし、追加の更新を引き起こす唯一のコードです。

したがって、今のところ、私はdijit.TitlePaneを使用して、ドロップダウン要素(ベースマップギャラリー、レイヤー、凡例)を保持しています。ただし、これを使用して外観を変更してイメージにすることはできません。これが私の最終目標です。

誰かが代替案を提案して、3つの異なる画像を使用できるようにして、画像をクリックしてドロップダウンメニューが開き、ベースマップギャラリー、レイヤーリスト、凡例が表示されるようにすることはできますか?


ここにhead / bodyタグがありません。すべてのJavaScriptコードがヘッダーに読み込まれていますか?
Glenn Plas

ごめんなさい。修正しました。私が投稿を始めたとき、どういうわけかそれはフォーマットされました。
クレイグ、


試しましたが、何もしませんでした。私の問題は、dojo.fx.Toggler関数にあるとほぼ確信しています。私の他のすべての外部jsファイルは完全に動作します。なぜ問題が発生するのかわかりません。ESRIに連絡したところ、ESRIが調査を行っているため、まもなく解決策が見つかるでしょう。
Craig、

Chrome開発ツールなどを使用して、実際に読み込まれている外部ファイルを確認しましたか?これは、少なくとも、ページがファイルのロードにどの程度到達しているか、およびエラーがどこにあるかを教えてくれるでしょう。
pecoanddeco

回答:


7

これらのdojo.addOnLoad()呼び出しをすべて統合します。関数が呼び出される前に何かが読み込まれていないのではないかと思います。

すべての外部JavaScriptファイルからすべてのdojo.addOnLoad呼び出しを取り除き、それらをメインHTMLファイルの1つの呼び出しにバンドルします。ロード時に起動するすべての関数を、次のようにJavaScriptの下部にある新しい関数に配置します。

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

これにより、すべての関数を起動する前に、すべてが読み込まれたことを確認できます。


5

フレームワーク(jquery / dojo)がこれを開始しなければならない以外に、これをより細かく制御/テストしたい場合。あなたはこの小さなライブラリを試すことができます:

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

そして、次のように使用します。

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

基本的にあなたがしていることは言う:このdivが存在するまで何かを待つ。動作はdocument.readyとは異なり、少し後で「発砲」します。あなたのために、あなたはdojo.*ここにコードを置くでしょう。

これは、javascriptコードのロード順序に偶然噛まれたかどうかを確認するための優れたテストです。このような問題を整理(トラブルシューティング)するのに役立ったので、これをあげます。


私はあなたの提案を私のコードに組み込むことを試みました。これが私の既存の混乱のどこに行くべきかをさらに説明するのを手伝ってくれませんか?
クレイグ

上部のブロックを別のjsファイルに入れ、ヘッダーに含めてから、操作するdom要素をコードでテストします。onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });これは直接的な解決策ではありませんが、読み込み順序の問題を理解するのに役立ちます
Glenn Plas

3

スクリプトの注文に問題があるようです。toggles.jsは、ロードされているdojoに依存しています。ただし、HTMLでは、dojoをロードするESRIのJavaScript APIをロードする前にtoggles.jsを呼び出しています。ここでは、スクリプトを再編成する方法についての提案を示します。

...
<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>
    ...

スクリプトを並べ替えてみました。APIスクリプトの後に外部スクリプトを配置すると、html(ヘッダー、ロゴ、サブヘッダー)のみが読み込まれます。次に、JavaScriptをロードするために更新する必要があります。
クレイグ、

私は最後の答えを編集しました。また、dojo.requiresスクリプトを外部ファイルの前に置いてみてください。また、スクリプトを実行する前にすべてのDOM要素が確実に読み込まれるように、外部スクリプトをhtml本文の下部に移動することを検討してください。
raykendo

編集したオプションの両方で同じエラーが発生し、jsをロードするために更新する必要があります。
クレイグ、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.