Harita Uygulaması Başlatmak İçin Yenile Gerektiriyor

9

Bu soruyu StackOverflow üzerinde denedim ama cevap alamadım. Hepinizin yardımcı olabileceğini umuyoruz.

Javascript / Dojo'da web eşleme uygulaması oluşturma:

Uygulamayı bir tarayıcıya yüklediğimde html öğelerini yükler, ancak işlemeyi durdurur. Ben sayfanın geri kalanını ve javascript yüklemek için tarayıcı yenilemek zorunda.

Bütün gün test ve hata ayıklama yaptım ve harici JS dosyalarımı yanlış noktada (bir çaylak) olduğumu anladım. Düzeltildi ve uygulama harika yükleniyor ... Dosyalarımdan biri doğru okunmuyor veya hiç.

Söz konusu harici JS dosyasının içeriğini varsayılan olarak ana koda taşıdığımda, içerdikleri işlevsellik iyi çalışır ... AMA harita yeniden yenileme gerektirir.

Kafası karışmış. Dış JS dosyasındaki sorunuma neden olan kod aşağıdadır. Neden bir sorun olduğunu anlayamıyorum çünkü fonksiyonlar harici olmadığında beklendiği gibi çalışıyor.

Herhangi bir yardım büyük beğeni topluyor.

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

İşte kodumun ön kısmı

<!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 Tamamen ana default.html dosyasında (css hariç) tüm kodu yerleştirerek uygulamayı yeniden yazdım. İstediğim gibi çalıştığından emin olmak için parça parça test ettim. Geçiş kodunu eklemek, kodu atan ve ekstra yenilemeye neden olan tek koddur.

Şimdilik dijit.TitlePane'i aşağı açılan elemanları (baz haritası galerisi, katmanlar, efsane) tutmak için kullanıyorum. Ancak bununla görüntüyü yapmak için görünüşü ve hissi değiştiremezsiniz, bu benim son hedefim.

Herhangi bir alternatif önerebilir, böylece 3 farklı görüntüyü kullanabilirim, böylece resme tıklayıp açılır menüde temel harita galerisini, katman listesini ve göstergeyi tutarak açılır mı?

arcgis-server  arcgis-javascript-api 
— Craig
kaynak
Burada kafa / gövde etiketi görmüyorum, tüm javascript kodunuz başlıkta yüklü mü değil mi?
— Glenn Plas
Afedersiniz. Onu düzeltti. Gönderiyi başlattığımda bir şekilde biçimlendi.
— Craig
— Mapperz
denedim ama hiçbir şey. Neredeyse benim dojo.fx.Toggler fonksiyonları ile ilgili sorun olduğundan eminim. Diğer tüm harici js dosyalarım mükemmel çalışıyor. Neden sorun yaşadığımdan emin değilim. ESRI ile temasa geçtiler ve içine bakıyorlar, umarım yakında bir çözüm bulurum.
— Craig
Hangi harici dosyaların yüklendiğini görmek için Chrome geliştirici araçları gibi bir şey kullanmayı denediniz mi? Bu, en azından sayfanızın dosyaları yüklerken ne kadar ilerlediğini ve hataların nerede olduğunu söyleyebilir.
— pecoanddeco

Yanıtlar:

7

Tüm bu dojo.addOnLoad () çağrılarını birleştiririm. Bir işlev çağrılmadan önce bir şeyin yüklenmediğinden şüpheleniyorum.

Tüm harici javascript dosyalarınızdan dojo.addOnLoad çağrılarını soyun ve ana HTML dosyanızdaki tek bir çağrıda toplayın. Yüklemek istediğiniz tüm işlevleri, javascriptinizin altındaki yeni bir işleve şu şekilde yerleştirin:

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

Bu, herhangi bir işlevi tetiklemeye çalışmadan önce her şeyin yüklenmesini sağlayacaktır.

— Mintx
kaynak
5

Bunu daha derinden kontrol etmek / test etmek istiyorsanız, herhangi bir çerçevenin (jquery / dojo) bunu başlatmak için dışında olması gerekir. Bu küçük kütüphaneyi deneyebilirsiniz:

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

Ve sonra böyle kullanın:

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

Temel olarak yaptığınız şey: bu div var olana kadar bir şeyler yapmak için bekleyin. Belgeden farklı davranır. Zaten, biraz sonra 'ateş'. yani kodu dojo.*buraya koyarsınız .

Bazı javascript kodlarının yükleme sırasına göre ısırılmış olup olmadığınızı görmek için harika bir test. Bunu veriyorum çünkü bu tür problemleri sıralamak (sorun gidermek) için yararlı oldu.

— Glenn Plas
kaynak
Herhangi bir şans olmadan benim kod için öneri dahil denedim. Bunun mevcut dağınıklığımda nereye gitmesi gerektiğini daha fazla açıklamaya yardımcı olabilir misiniz?
— Craig
üst bloğu ayrı bir js dosyasına koyun, başlığa ekleyin, ardından kodunuzda üzerinde çalıştığınız dom öğelerinizi test edin: onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });Doğrudan bir çözüm değil, ancak yükleme sırası sorununuzu anlamanıza yardımcı olacaktır
— Glenn Plas
3

Bir komut dosyası siparişi sorununuz var gibi görünüyor. Toggles.js dosyanız dojo'nun yüklenmesine dayanır. Ancak, html'nizde, ESRI'nin dojo yükleyen javascript api'sini yüklemeden önce toggles.js'yi çağırıyorsunuz. İşte senaryolarınızı nasıl yeniden düzenleyebileceğinize dair bir öneri.

...
<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
kaynak
Senaryoları yeniden sipariş etmeyi denedim. Harici komut dosyalarını API komut dosyasından sonra yerleştirdiğimde, yalnızca html yüklenir (başlık, logo, alt başlık). Sonra yüklemek için javascript almak için yenilemek zorunda.
— Craig
Son cevabımı düzenledim. Ayrıca dojo.requires komut dosyasını harici dosyalarınızın önüne koymayı deneyin. Ayrıca, bu komut dosyaları çalıştırmadan önce tüm DOM öğelerinin yüklendiğinden emin olmak için harici komut dosyalarınızı html gövdesinin altına taşımayı düşünebilirsiniz.
— raykendo
düzenlediğiniz seçeneklerin her ikisi de js'i yüklemek için yenilemeniz gereken aynı hatayla sonuçlanır.
— Craig
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.