ArcGIS Server Java ADF 案例教程 13

【案例】给地图加上弹出气泡

在这一小节里，我们将会在地图上加一个气泡，很多时候你需要弹出一些简短的信息到地图上，气泡就是为了满足这样的要求的。

首先让我们回忆下这一章的主要内容，前面讲了ADF一些常用的地图组件，然后从Map组件入手详细分析了它在服务器端和浏览器端的具体实现。现在我们的气泡功能主要是对浏览器端的Map进行功能扩展，那么首先应该想到的就是EsriMap这个JavaScript类，我们在EsriMap中弹出一个div，再放上我需要的信息不就可以了么？

等等，在页面上弹出一个div是很简单，但是用户还会操作地图，比如拖动一下啊什么的，那这个div怎么跟地图一起移动呢？再回想下图 9，你应该可以得到答案吧？对了，把这个div放到imageGrid中去。

下面让我们来具体实现这个功能，先看一下效果吧，如图 10。

图 10 地图弹出气泡效果

在这个简单的页面上，我们放置了两个按钮。当点击“显示气泡”按钮的时候，地图上会弹出一个提示框，提示框中有我们想要显示给用户的信息；当点击“隐藏气泡”按钮的时候，这个提示框会隐藏掉；另外，当我们拖动地图的时候，这个气泡也会跟着地图一起移动。

在这里主要封装了两个JavaScript函数，分别绑定到“显示气泡”和“隐藏气泡”按钮的onclick事件上。
我们先来看一下“显示气泡”按钮的事件，它将会触发showPopUp函数，这个函数执行的操作如下：
function showPopUp()
{
var popUpId = 'divPopUp';
var popUp = document.getElementById(popUpId);
if( popUp==null )
{
popUp = document.createElement('div');
popUp.id = popUpId;
popUp.innerHTML = "这是我要弹出的信息";
var map = EsriControls.maps['map'];
map.imageGrid.appendChild(popUp);
}
var style = 'display:block;position:absolute;z-index:2;';
style += 'left:100; top:100;';
style += 'background-image:url(images/wuyf/popup.png);width:400px; height:200px;';
style += 'background-repeat:no-repeat;';
style += 'padding:10px;';
EsriUtils.setElementStyle(popUp, style);
}
首先，我们试图通过getElementById()方法去获得气泡div是否已经存在；如果不存在，则新建这个div并添加到地图上。我们看到，把气泡div（id为divPopUp）添加到地图上的过程实际上就是把这个div添加到EsriMap的imageGrid中去，这主要是通过appendChild(popUp)这个方法实现的。

仅仅把这个div添加到imageGrid以后并不能看到这个它，在下面还有一些其它的设置，否则我们的气泡div会被地图遮挡住。这里主要的概念是CSS中的z-index属性，使用这个属性来控制imageGrid中各个子元素的叠置顺序，imageGrid中地图图片的z-index值为1，因此我们需要给气泡div设置一个比1大的数值才可以。另外，在气泡div的样式中我们还必须通过“display:block;”来设置这个div可见，再通过“position:absolute;”来设置这个div的定位模式，这些都是必须的。

顺便提一句，这里使用的是EsriUtils的setElementStyle()方法来给气泡div来设置CSS属性；你直接用obj.style.attributes=value;的方法来设置也是一样的。

再来看一下“隐藏气泡”按钮的事件，这就简单多了：
function hidePopUp()
{
var popUpId = 'divPopUp';
var popUp = document.getElementById(popUpId);
if( popUp!=null )
{
EsriUtils.setElementStyle(popUp, "display:none;");
}
}

这里事实上只做了一件事情，就是把气泡div的display样式设置成“none”，浏览器就不会去渲染这个气泡了。

通过这个小案例，你是不是对ADF中的Map组件，特别是JavaScript脚本库中的EsriMap有了更加深入的理解了？