Question

我是使用dojo工具包的新手。我创建了一个浮动窗格并在其中添加了一些工具。问题是浮动窗格图标默认位于页面上（左下角）。我想把位置改为顶部。如何更改浮动窗格的位置？ enter image description here

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
   <link  rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/esri/css/esri.css">
<script type="text/javascript" src="http://.../arcgis_js_api/library/3.13/3.13/init.js"></script>
<script type="text/javascript" src="http://.../js/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://.../js/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/FloatingPane.css" />
 <link rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/ResizeHandle.css" />
<link  rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/ExpandoPane.css">
<script type="text/javascript" src="jsapi_vsdoc10_v38.js"></script>
<style>
   html, body {
    height: 100%;
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow:hidden;
  }

  #mymap{
    padding:0;
  }



</style>

   <script>

       require(["dojo/parser", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/map", "dijit/Toolbar", "esri/dijit/Legend", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/registry", "dojox/layout/ExpandoPane", "dojox/layout/FloatingPane", "dijit/form/Button"], function (parser, Infotemplate) {
           parser.parse();

           var sr = new esri.SpatialReference({ wkid: 4326 });
           //create the extent object
           var startExtent = new esri.geometry.Extent(-88.27, 17.47, -88.16, 17.54, sr);
           //create the map object and load it into the 'mymap'
           var map = new esri.Map("mymap", { extent: startExtent });

           var layer3 = new esri.layers.FeatureLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer/0", { outFields: ["*"] });

           var layer2 = new esri.layers.FeatureLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer/1", { outFields: ["*"] });
           //var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer");

           map.addLayer(layer2);
           map.addLayer(layer3);


           // legend
           var legend = new esri.dijit.Legend({ map: map }, "legendDiv");
           legend.startup();
           //overview
           var overview = new esri.dijit.OverviewMap({ map: map });
           overview.startup();
           //scalbar
           var scalebar = new esri.dijit.Scalebar({ map: map });
           //navigation toolbar

           require(["esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dojo/domReady!", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dijit/form/button"],
        function (Navigation, on, parser, registry) {
            parser.parse();
            navToolbar = new Navigation(map);
            on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

            registry.byId("zoomin").on("click", function () {
                navToolbar.activate(Navigation.ZOOM_IN);
            });

            registry.byId("zoomout").on("click", function () {
                navToolbar.activate(Navigation.ZOOM_OUT);
            });

            registry.byId("zoomfullext").on("click", function () {
                navToolbar.zoomToFullExtent();
            });

            registry.byId("zoomprev").on("click", function () {
                navToolbar.zoomToPrevExtent();
            });

            registry.byId("zoomnext").on("click", function () {
                navToolbar.zoomToNextExtent();
            });

            registry.byId("pan").on("click", function () {
                navToolbar.activate(Navigation.PAN);
            });

            registry.byId("deactivate").on("click", function () {
                navToolbar.deactivate();
            });

            function extentHistoryChangeHandler() {
                registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
                registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
            }

        });


           var t = "<b>${NAME}</b> [${RATING}/5]<br>" +
"${WEBSITE}<br>" + "${DESCRIPTION}";
           //create the info template object and pass the template
           var infoTemplate = new esri.InfoTemplate("Identify", t);
           //assign the infotemplate so it applies on every feature in this

           layer3.setInfoTemplate(infoTemplate);







       }); 
   </script>

</head>

<body class="tundra" >



       <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer" style="width:100%;height:100%;">

  <div data-dojo-type="dojox.layout.ExpandoPane" title="Legend" data-dojo-props="title: 'legend', maxWidth:225, splitter:true, region:'leading'" style="width: 225px;">
   <div id="legendDiv"></div>
  </div>
  <div data-dojo-type="dijit.layout.ContentPane" id="mymap" data-dojo-props="splitter:true, region:'center'">

  </div>

   <div data-dojo-type="dijit.layout.ContentPane" id="top" data-dojo-props="splitter:true, region:'top'">

<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Navigation', onClick:function(){dijit.byId('dFloatingPane').show();}"></div>
<!-- makes example preview div big enough: --><div style="height:30px;width:100%;"></div>

  </div>

</div>




    <div data-dojo-type="dojox/layout/FloatingPane" id="dFloatingPane" 
   title="A floating pane" data-dojo-props="resizable:false, dockable:true, title:'Navigation' ,closable: false",
   style="position:absolute;top:100px;left:300px;width:100px;height:300px;visibility:show;">


      <div data-dojo-type="dijit/form/Button" id="zoomin"   >Zoom In</div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
      <div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
    </div>





</body>
</html>

Answer 1

似乎问题在于您的dijit.layout.ContentPane布局没有收听ContentPane的region: top部分。

首先，它应该有助于纠正布局的一般顺序。如果你想要＆＃34; top＆＃34; ContentPane首先将其放在dijit.layout.BorderContainer中。文档表明，这应该没有div的实际排序，但由于它不是，其他一些必须是错误的。

其次，您似乎没有设置ContentPanes的大小。 Dojo文档建议您需要设置大小：

使用CSS指定边缘区域的大小（以像素为单位）或百分比 - 顶部和底部的高度以及边的宽度。您可以指定高度的顶部区域：100px，左侧区域宽度：50％。中心不得在CSS中指定任何尺寸，因为它会自动调整大小以填充剩余空间。

请注意，对于区域：顶部，中间，底部仅应用高度样式而不是宽度;左侧和右侧面板仅适用宽度样式。

请参阅dijit/layout/LayoutContainer documentation（因为LayoutContainer是ContentPane的基类），以获取有关区域及其工作方式的更多信息。

如何更改dojo浮动窗格图标的位置？

1 个答案: