利用并排的两个div展示二三维地图

今天将地图图层列表收缩隐藏显示功能实现后,继续做接下来功能遇到两个问题。一是div并排显示,二是arcgis for javascript的放大缩小按钮显示。

新做的这个项目,需要用到二三维地图。按照需求说明,需要做到二三维地图的联动,而目前设想是在大的一个div下面,有两个小的div,其中左边的div用来放至二维地图,右边的div用于放置三维地图。因为在大的div中position中使用了fix来固定布局,依次与头部距离一定的高度。而两个并排的子div在一开始种由于使用的position为absolute,所以调试的时候即使使用网络的上提供的常见float:left设置,最终两个div还是挤到一块。最后做了将两个子的div的position设置为relative,最后才能并排显示。那么来看一下最后的结果。

利用并排的两个div展示二三维地图

其中左侧以及实现了二维地图的展示,右边红色部分为即将用于三维地图展示空间,头部的蓝色部分作为系统的标题等信息展示。我们来看一下大div以及两个子div的css样式。

大的div样式。

.main_content{width:100%;height:100%;position:fixed;left:0px;top:60px;z-index:10;}

两个子div样式。

.map2d_Content_half{width:50%;height:100%;;position:relative;float:left;}

同时,今天在写系统的时候还遇到使用arcgis for javascript在地图展示时,去掉左边的最小和最大缩放按钮,一开始也摘取了网络相关资料。我们来看一下具体的实现代码。

             map.on("load",function(){
                var objButton = document.getElementById("map2dDiv1_zoom_slider").style;
                objButton.visibility = "collapse";
             })

但是需要注意的是,我使用的是arcgis for javascript3.20放大缩小按钮会随着地图的div的id名称改变而改变,所以当地图div的id发生变化时,上面的代码需要做相应的调整。