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?
Jawaban:
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:
Ini akan memastikan bahwa semuanya telah dimuat sebelum mencoba mematikan fungsi apa pun.
sumber
Jika Anda ingin menyelesaikan / menguji ini lebih dalam, di luar apa kerangka kerja (jquery / dojo) harus memulai ini. Anda dapat mencoba perpustakaan kecil ini:
Dan kemudian gunakan seperti ini:
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.
sumber
onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });
Ini bukan solusi secara langsung tetapi ini akan membantu Anda memahami masalah urutan pemuatanSepertinya 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.
sumber