ArcGIS JavaScript API开发的地图—重新布局

来源：互联网发布：mac docker 仓库地址编辑：程序博客网时间：2024/05/01 03:18

上次的布局在开发过程中发现效果不是很理想，特别是在Toc实现以后,

要是图层多了都要拉框，不是很合理。最近把dijit.layout中的控件好好学习了，网上有篇帖子讲了各个布局小部件的用法http://www.oschina.net/question/12_10306，但是感觉只是讲了大概的意思，没有把实际应用中的方法写出来，还是要看大拿的书才行。改进以后的界面代码：

<body class="nihilo">      <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">  <!-- 以下是系统的标题 -->      <div id="header" dojotype="dijit.layout.ContentPane" region="top" >           城市环境地质风险评价与决策服务信息平台     </div>                <div dojoType="dijit.layout.BorderContainer" design="headline" region="center">    <!-- toolbar for maps apps. -->    <div dojoType="dijit.Toolbar" region="top" style="height:35px;">    <div align="left">        <button id="zoomIn" dojoType="dijit.form.Button">        放大        </button>        <button id="zoomOut" dojoType="dijit.form.Button">        缩小        </button>        <button id="zoomBox" dojoType="dijit.form.Button">        全图        </button>        <button id="zoomprev" dojoType="dijit.form.Button">        前一视图        </button>        <button id="zoomnext" dojoType="dijit.form.Button">        后一视图        </button>        <div dojoType="dijit.form.DropDownButton">                    <span>编辑</span><div dojoType="dijit.Menu">                    <div dojoType="dijit.MenuItem">点</div><div dojoType="dijit.MenuItem">线</div><div dojoType="dijit.MenuItem">面</div><div dojoType="dijit.PopupMenuItem"><span>自定义例子</span><div dojoType="dijit.Menu">                    <div dojoType="dijit.MenuItem">点</div><div dojoType="dijit.MenuItem">线</div><div dojoType="dijit.MenuItem">面</div>                       </div>   </div>                  </div>        </div>                <!-- slider for maps apps. -->        <div align="right" style="vertical-align:top;">        <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"                value="8" minimum="0" maximum="10" discreteValues="11"                intermediateChanges="false"                showButtons="false" style="width:200px; vertical-align:top; margin-top: -10px; margin-right:10px;" layoutAlign="right"        >        <span>图层透明度</span>        </div>        </div>        <!-- slider for maps apps. -->       </div>    </div>    <div dojoType="dijit.layout.AccordionContainer" id="myAccordionContainer" region="left" splitter="true" style="width:15%">            <div dojoType="dijit.layout.AccordionPane" title="图层">    <div id="treeboxbox_tree" style="width:98%; height:98%; background-color:#FFFFFF;border :0px solid Silver; overflow:auto;"></div></div><div dojoType="dijit.layout.AccordionPane" title="工具 - 测量" id="measurePane"></div>    </div>    <div id="map" class="shadow" dojotype="dijit.layout.ContentPane" region="center" >       <span id="info" style="position:absolute; right:10px; bottom:1px; color:#002; z-index:50;"></span>             </div></div></div></body></html>

这样方便以后添加新的功能。这里主要是dojo的应用程序部件中的button变体、菜单部件、toolbar和布局部件，在这个基础上可以任意构建自己的布局。