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

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

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

其中左侧以及实现了二维地图的展示,右边红色部分为即将用于三维地图展示空间,头部的蓝色部分作为系统的标题等信息展示。我们来看一下大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发生变化时,上面的代码需要做相应的调整。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yGIS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值