Question

在Javascript / Dojo中创建Web制图应用程序：

当我在浏览器中加载应用程序时，它会加载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"/>

        <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/toggles.js"></script>
        <script src="JS/identify.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");

      var map, locator, layer, visible = [];
            var legendLayers = [];
            var resizeTimer;
            var identifyTask,identifyParams;
            var findTask, findParams;
            var basemaptoggler = null;
            var layertoggler = null;
            var legendtoggler = null;
            var findTaskParcel, findParamsParcel;
      // var gridParcel, storeParcel;

编辑2

我已经完全重写了将所有代码（css除外）放在主default.html文件中的应用程序。我逐个测试，以确保它的功能我想要的。添加切换代码是唯一会抛出它并导致额外刷新的代码。

所以现在我使用dijit.TitlePane来保存下拉元素（底图库，图层，图例）。然而，通过这种方式，您无法改变外观和感觉来制作图像，这是我的最终目标。

任何人都可以建议替代方案，以便我可以使用3个不同的图像，这样当您点击图像并打开下拉菜单时，会按住底图库，图层列表和图例吗？

编辑3

显示我用来调用切换功能的代码可能会有所帮助：我怀疑这可能是我的问题所在。

<!--Legend-->
    <div id="subheader">
  <div style="position:absolute; right:60px; top:10px; z-Index:98;">
            <div id="legendbutton">
        <button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
            <img src="images/Legend.png" />
                <script type="dojo/method" event="onClick">
                    legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
                </script>
        </button>
                <div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
                    <div id="legendDiv"></div>
                </div>
            </div>
<!--Layer Toggle-->
            <div id="layerbutton">
                <button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
                    <img src="images/layers.png"/>
                        <script type="dojo/method" event="onClick">
                            layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
                        </script>
                </button>
                    <div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
                        <span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
                        </span>
                    </div>
            </div>
<!--Basemap Gallery-->
            <div id="basemapbutton">
                <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
                    <img src="images/imgBaseMap.png"/>
                        <script type="dojo/method" event="onClick">

                        </script>
                </button>
                    <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
                        <span id="basemapGallery">
                        </span>
                    </div>
            </div>

Answer 1

作为解决方法，我做了类似的事情：

http://www.martindueren.de/paperwriting/

应用程序右侧的图标使dijit.TitlePanes可以擦除。可以在此页面上找到用于此的效果：

http://dojotoolkit.org/documentation/tutorials/1.8/effects/

这个代码就像这样：

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

        on(slideAwayButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
        });
    });
</script>

随意查看我的源代码并从中复制内容！如果我理解正确，这正是你所需要的。

Answer 2

你在这里提到了很多故事，很难确切地指出你的问题是什么..但是既然你说'地图需要额外的刷新'，那么我猜测它可能是由于你调用的东西流动所需要的对于。问题很可能是，您从dojo版本中推出了传统的加载程序代码，这是AMD加载程序可用的。

由于我之前没有运行任何esri组件，这是一种疯狂的猜测 - 但从我的pov中可能值得一试。我确定谷歌地图有一个onload监听器 - 我怀疑esri会遵循这种行为。

在加载任何esri模块之前尝试初始化应用程序中的所有内容，例如：

dojo.addOnLoad(function() {
  basemapToggle();
  layerToggle();
  legendToggle();
  dojo.require("esri.map");
  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("esri.tasks.find");
});

对于您正在寻找的效果，我个人会使用dojo.animateProperty并将其与dijit/TooltipDialog结合使用。

这个http://jsfiddle.net/seeds/a8BBm/2/展示了如何“破解”onShow机制，在开场动画中留下可选效果。默认情况下，DropDownButton只会淡入。

有关弹出tooltipdialog的其他方法，请参阅http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example - 即将dijit.popup连接到任何点击/鼠标悬停事件。

应用程序需要刷新才能初始化

2 个答案: