Приложение карты требует обновления для инициализации

9

Я перепробовал этот вопрос на 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 разных изображения, чтобы при нажатии на изображение открывалось раскрывающееся меню, содержащее галерею базовой карты, список слоев и легенду?

arcgis-server  arcgis-javascript-api 
— Craig
источник
Я не вижу тега head / body здесь, весь ваш код javascript загружен в заголовок или нет?
— Гленн Плас
Сожалею. Починил это. Каким-то образом это было отформатировано, когда я начал пост.
— Крейг
— Mapperz
попробовал, но ничего. Я почти уверен, что проблема связана с моими функциями dojo.fx.Toggler. Все остальные мои внешние js-файлы работают отлично. Не уверен, почему у меня проблемы. Свяжитесь с ESRI, и они изучают это, так что, надеюсь, у меня скоро будет решение.
— Крейг
Вы пытались использовать что-то вроде инструментов разработчика Chrome, чтобы увидеть, какие внешние файлы на самом деле загружаются? Это может по крайней мере сказать вам, как далеко продвигается ваша страница при загрузке файлов и где находятся какие-либо ошибки.
— pecoanddeco

Ответы:

7

Я бы объединил все эти вызовы dojo.addOnLoad (). Я подозреваю, что что-то не загружается до вызова функции.

Уберите все вызовы dojo.addOnLoad из всех ваших внешних файлов javascript и объедините их в один вызов в вашем основном HTML-файле. Поместите все функции, которые вы хотите запустить при загрузке, в новую функцию в нижней части вашего JavaScript, как это:

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

Это гарантирует, что все загружено, прежде чем пытаться отключить какие-либо функции.

— Mintx
источник
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 зависит от загрузки додзё. Однако в вашем html вы вызываете toggles.js перед загрузкой javascript api ESRI, который загружает dojo. Вот предложение о том, как вы можете реорганизовать свои сценарии.

...
<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
источник
Я попытался переупорядочить сценарии. Когда я размещаю внешние скрипты после скрипта API, загружается только HTML (заголовок, логотип, подзаголовок). Затем я должен обновить, чтобы получить JavaScript для загрузки.
— Крейг,
Я отредактировал свой последний ответ. Попробуйте также поставить скрипт dojo.requires перед вашими внешними файлами. Кроме того, вы можете рассмотреть возможность перемещения внешних сценариев внизу тела html, чтобы убедиться, что все элементы DOM загружены до запуска этих сценариев.
— Raykendo
обе ваши отредактированные опции приводят к одной и той же ошибке, требующей обновления для загрузки js.
— Крейг,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.