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

最新推荐文章于 2021-12-16 08:07:00 发布

cehui115081

最新推荐文章于 2021-12-16 08:07:00 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： dojo arcgis server

本文链接：https://blog.youkuaiyun.com/cehui115081/article/details/8112960

dojo arcgis server 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Dojo框架进行Web应用程序布局的实际案例。通过详细展示BorderContainer、AccordionContainer等组件的具体应用，阐述了如何构建一个功能丰富且易于扩展的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次的布局在开发过程中发现效果不是很理想，特别是在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>