Aplikasi Peta Membutuhkan Refresh untuk Menginisialisasi

9

Saya mencoba pertanyaan ini di StackOverflow tetapi tidak mendapat jawaban. Semoga Anda semua bisa membantu.

Membuat aplikasi pemetaan web dalam Javascript / Dojo:

Ketika saya memuat aplikasi di browser, ia memuat elemen html tetapi kemudian berhenti memproses. Saya harus menyegarkan peramban agar dapat memuat sisa halaman dan javascript.

Saya telah melakukan pengujian dan debugging sepanjang hari dan menemukan bahwa saya memiliki file JS eksternal di tempat yang salah (saya pemula). Memperbaiki itu dan aplikasi memuat banyak ... KECUALI salah satu file saya tidak dibaca dengan benar, atau tidak sama sekali.

Ketika saya memindahkan konten file JS eksternal yang dimaksud ke kode utama di default, fungsi yang dikandungnya, berfungsi dengan baik ... TETAPI peta membutuhkan penyegaran lagi.

Bingung. Di bawah ini adalah kode dalam file JS eksternal yang menyebabkan masalah saya. Saya tidak tahu mengapa ini menjadi masalah karena fungsinya berfungsi seperti yang diharapkan ketika itu bukan eksternal.

Setiap bantuan sangat dihargai.

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

Inilah bagian depan kode saya

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

EDIT 2 Saya sudah menulis ulang aplikasi yang menempatkan semua kode (kecuali css) di file default.html utama. Saya menguji sepotong demi sepotong untuk memastikan itu berfungsi seperti yang saya inginkan. Menambahkan kode sakelar adalah satu-satunya kode yang membuangnya dan menyebabkan penyegaran ekstra.

Jadi untuk saat ini saya menggunakan dijit.TitlePane untuk menahan elemen drop-down (galeri basemap, layer, legenda). Namun dengan ini Anda tidak dapat mengubah tampilan dan nuansa untuk menjadikannya gambar, yang merupakan tujuan akhir saya.

Adakah yang bisa menyarankan alternatif sehingga saya dapat menggunakan 3 gambar yang berbeda sehingga ketika Anda mengklik gambar dan menu drop-down terbuka memegang galeri basemap, daftar lapisan dan legenda?

arcgis-server  arcgis-javascript-api 
— Craig
sumber
Saya tidak melihat tag kepala / tubuh di sini, apakah semua kode javascript Anda dimuat di header atau tidak?
— Glenn Plas
Maaf. Memperbaikinya. Entah bagaimana itu diformat ketika saya memulai posting.
— Craig
— Mapperz
mencobanya, tetapi tidak ada. Saya hampir yakin masalahnya ada pada fungsi dojo.fx.Toggler saya. Semua file js eksternal saya yang lain berfungsi dengan baik. Tidak yakin mengapa saya mendapat masalah. Menghubungi ESRI dan mereka mencari tahu, jadi mudah-mudahan saya akan segera mendapatkan resolusi.
— Craig
Sudahkah Anda mencoba menggunakan sesuatu seperti alat pengembang Chrome untuk melihat file eksternal apa yang sebenarnya dimuat? Setidaknya ini bisa memberi tahu Anda seberapa jauh halaman Anda dalam memuat file dan di mana ada kesalahan.
— pecoanddeco

Jawaban:

7

Saya akan menggabungkan semua panggilan dojo.addOnLoad (). Saya curiga ada sesuatu yang tidak dimuat sebelum suatu fungsi dipanggil.

Strip semua dojo.addOnLoad panggilan dari semua file javascript eksternal Anda dan bundel menjadi satu panggilan di file HTML utama Anda. Masukkan semua fungsi yang ingin Anda jalankan ke fungsi baru di bagian bawah javascript Anda seperti ini:

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

Ini akan memastikan bahwa semuanya telah dimuat sebelum mencoba mematikan fungsi apa pun.

— Mintx
sumber
5

Jika Anda ingin menyelesaikan / menguji ini lebih dalam, di luar apa kerangka kerja (jquery / dojo) harus memulai ini. Anda dapat mencoba perpustakaan kecil ini:

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

Dan kemudian gunakan seperti ini:

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

Pada dasarnya yang Anda lakukan adalah mengatakan: tunggu untuk melakukan hal-hal sampai div ini ada. Berperilaku berbeda dari dokumen. Sudah, 'menembak' sedikit nanti. jadi untuk Anda, Anda akan meletakkan kode di dojo.*sini.

Ini adalah tes yang bagus untuk melihat apakah Anda tergigit oleh urutan memuat beberapa kode javascript. Saya memberikan ini karena telah berguna untuk (memecahkan masalah) menyelesaikan masalah semacam ini.

— Glenn Plas
sumber
Saya sudah mencoba memasukkan saran Anda ke kode saya tanpa hasil. Bisakah Anda membantu menjelaskan lebih lanjut ke mana perginya kekacauan ini?
— Craig
letakkan blok teratas di file js terpisah, sertakan di header, lalu uji elemen dom yang Anda gunakan, dalam kode Anda: onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });Ini bukan solusi secara langsung tetapi ini akan membantu Anda memahami masalah urutan pemuatan
— Glenn Plas
3

Sepertinya Anda mengalami masalah urutan skrip. Toggles.js Anda bergantung pada dojo yang sedang dimuat. Namun, di html Anda, Anda menelepon toggles.js sebelum memuat api javascript ESRI, yang memuat dojo. Berikut adalah saran tentang bagaimana Anda dapat mengatur ulang skrip Anda.

...
<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
sumber
Saya mencoba memesan ulang skrip. Saat saya menempatkan skrip eksternal setelah skrip API, hanya html yang dimuat (header, logo, subheader). Saya kemudian harus menyegarkan untuk mendapatkan javascript untuk memuat.
— Craig
Saya mengedit jawaban terakhir saya. Coba juga letakkan skrip dojo.requires di depan file eksternal Anda. Selain itu, Anda dapat mempertimbangkan untuk memindahkan skrip eksternal ke bagian bawah badan html, untuk memastikan bahwa semua elemen DOM telah dimuat sebelum skrip tersebut dijalankan.
— raykendo
kedua opsi yang Anda edit menghasilkan kesalahan yang sama, perlu menyegarkan untuk memuat js.
— Craig
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.