怎样用js控制让指定的图层显示在最上层

JavaScript026

怎样用js控制让指定的图层显示在最上层,第1张

设置style 中 z-index:auto

auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。

若定义为-1,代表为最底层。

div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上。

·测试效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>div图层样式</title>

<style>

.div-relative{position:relativecolor:#000border:1px solid #000width:500pxheight:400px}

.div-a{ position:absoluteleft:30pxtop:30pxbackground:#F00width:200pxheight:100px}

/* css注释说明: 背景为红色 */

.div-b{ position:absoluteleft:50pxtop:60pxbackground:#FF0width:400pxheight:200px}

/* 背景为黄色 */

.div-c{ position:absoluteleft:80pxtop:80pxbackground:#00Fwidth:300pxheight:300px}

/* DIV背景颜色为蓝色 */

</style>

</head>

<body>

<div class="div-relative">

<div class="div-a">我背景为红色</div>

<div class="div-b">我背景为黄色</div>

<div class="div-c">我背景为蓝色</div>

</div>

</body>

</html>

上篇实现了 基础地图加载以及二三维模式切换 ;本篇的内容则是图层管理控制,从两个不同角度来实现,分别是直接绑定arcgis api提供的图层管理widget(LayerList)以及自定义图层管理图标的点击事件来控制图层的隐藏或者显示。不管是LayerList或者自定义图标点击管理图层的实现方式,核心都是根据Layer的属性visible来设置true或者false来控制的。

TileLayer,加载缓存地图服务的瓦片图层,缓存的服务访问缓存中的瓦片,而不是动态地绘制图像。由于缓存机制,所以渲染的速度比MapImageLayers快多了,适合叠加瓦片切图使用,而不是前端动态渲染的。

MapImageLayer,允许显示和分析在一个地图服务定义层数据,输出图像代替特征。地图服务图像是根据请求动态生成的。

ElevationLayer,即为加载地形高程的图层,应用在三维模式下显示。

SceneLayer,即为加载三维场景图层,应用在三维模式下显示。

LayerList,图层列表控制控件,提供了一种方法来显示一个列表的层以及提供控制图层隐藏或者显示。

1.上面描述的几个类型图层有个属性listMode,默认show,即是这些图层叠加在地图上,默认是在LayerList里面了的,要是LayerList创建的话

GIS之家新博客系列发布更新在GIS之家网站,欢迎关注收藏: GIS之家网站

GIS之家作品: GIS之家

GIS之家交流咨询: 咨询模式

在显示选项卡上,将图层在内容列表中向上或者向下拖动。

将要放置图层的位置处会显示一条黑线。

释放鼠标键将图层放置到新的位置。

通常,各注记图层将按照它们在内容列表中的显示顺序绘制到地图中,这可能会导致注记被隐藏在其他图层之下。但是,您也可以选择将注记图层始终绘制到其他图层上方。要执行此操作,请打开该注记图层的图层属性对话框,单击显示选项卡,然后取消选中以此图层在内容列表中相对于其他图层的顺序绘制此图层。如果取消选中此选项,则即使注记图层位于内容列表的底部,也会始终将其绘制在其他图层之上。如果地图中存在多个注记图层,则这些注记图层的绘制顺序将取决于它们在内容列表中的相对位置。