Я перепробовал этот вопрос на StackOverflow, но не получил никаких ответов. Надеюсь, вы все сможете помочь.
Создание веб-картографического приложения в Javascript / Dojo:
Когда я загружаю приложение в браузер, оно загружает элементы html, но затем останавливает обработку. Я должен обновить браузер, чтобы загрузить остальную часть страницы и JavaScript.
Я провел тестирование и отладку весь день и понял, что мои внешние файлы JS были в неправильном месте (я новичок). Исправлено, и приложение загружается отлично ... КРОМЕ одного из моих файлов не читается правильно, или вообще.
Когда я перемещаю содержимое рассматриваемого внешнего 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 разных изображения, чтобы при нажатии на изображение открывалось раскрывающееся меню, содержащее галерею базовой карты, список слоев и легенду?
Ответы:
Я бы объединил все эти вызовы dojo.addOnLoad (). Я подозреваю, что что-то не загружается до вызова функции.
Уберите все вызовы dojo.addOnLoad из всех ваших внешних файлов javascript и объедините их в один вызов в вашем основном HTML-файле. Поместите все функции, которые вы хотите запустить при загрузке, в новую функцию в нижней части вашего JavaScript, как это:
Это гарантирует, что все загружено, прежде чем пытаться отключить какие-либо функции.
источник
Если вы хотите тонко контролировать / тестировать это глубже, за пределами того, что любой фреймворк (jquery / dojo) должен запустить это. Вы можете попробовать эту маленькую библиотеку:
И затем используйте это так:
По сути, вы говорите: подождите, чтобы сделать что-то, пока этот div не существует. Он ведет себя не так, как document.ready, чуть позже «выстрелив». так что для вас, вы бы поместили код
dojo.*
здесь.Это отличный тест, чтобы увидеть, не попал ли вам кусочек порядка загрузки некоторого кода JavaScript. Я даю это, потому что это было полезно для устранения неполадок такого рода проблем.
источник
onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });
это не решение напрямую, но оно поможет вам понять проблему с порядком загрузкиПохоже, у вас проблема с порядком скриптов. Ваш toggles.js зависит от загрузки додзё. Однако в вашем html вы вызываете toggles.js перед загрузкой javascript api ESRI, который загружает dojo. Вот предложение о том, как вы можете реорганизовать свои сценарии.
источник