该程序功能的实现过程大致是这样的:
在更新地图范围时,通过向服务器发送AJAX请求,在后台实现该特定请求的监听,获取相应的地图信息后,通过XML形式返回客户端,客户端也实现了相应的JS函数利用返回的xmlhttp参数对浏览页面进行更新。
首先需要给地图控件添加监听器,当指定事件发生时调用指定函数处理该业务功能,这段初始化的JS函数需要在body的load事件发生时即调用,JS代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
function onBodyLoad()
{
var map = EsriControls.maps["Map0"];
map.addUpdateListener("onMapUpdate", onMapUpdate);
}
function onMapUpdate()
{
var map = EsriControls.maps["Map0"];
var formId = map.formId;
var url = EsriUtils.getServerUrl(formId);
var params = "getMapInfo=true&" + EsriUtils.buildRequestParams(formId);
EsriUtils.sendAjaxRequest(url, params, true, processMapInfo);
}
接下来在服务端定义监听器JAVA类,需要实现PhaseListener接口,代码如下所示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
package com.igsnrr;
import javax.faces.event.*;
import javax.faces.context.*;
import java.util.*;
import java.io.*;
import org.w3c.dom.*;
import com.esri.adf.web.data.*;
import com.esri.adf.web.util.WebUtil;
import com.esri.adf.web.util.XMLUtil;
import com.esri.adf.web.data.geometry.*;
import com.esri.adf.web.faces.renderkit.xml.ajax.AJAXUtil;
public class MapUpdatePhaseListener
implements PhaseListener
{
public PhaseId getPhaseId()
{
return PhaseId.APPLY_REQUEST_VALUES;
}
public void beforePhase(PhaseEvent event)
{
// do nothing
}
public void afterPhase(PhaseEvent event)
{
FacesContext facesContext = event.getFacesContext();
Map params = facesContext.getExternalContext().getRequestParameterMap();
WebContext webContext = WebUtil.getWebContext(facesContext.getViewRoot());
WebMap webMap = webContext.getWebMap();
if("true".equals(params.get("getMapInfo")))
{
WebExtent webExtent = webMap.getCurrentExtent();
double xmin = webExtent.getMinX();
double ymin = webExtent.getMinY();
double xmax = webExtent.getMaxX();
double ymax = webExtent.getMaxY();
double scale = webMap.getMapScale();
Document doc = XMLUtil.newDocument();
Element mapinfo = XMLUtil.createElement(doc, "mapinfo", "", null);
XMLUtil.createElement(doc, "xmin", String.valueOf(xmin), mapinfo);
XMLUtil.createElement(doc, "ymin", String.valueOf(ymin), mapinfo);
XMLUtil.createElement(doc, "xmax", String.valueOf(xmax), mapinfo);
XMLUtil.createElement(doc, "ymax", String.valueOf(ymax), mapinfo);
XMLUtil.createElement(doc, "scale", String.valueOf(scale), mapinfo);
try
{
AJAXUtil.writeResponse(facesContext, doc);
}
catch(IOException ex)
{
ex.printStackTrace();
}
finally
{
facesContext.responseComplete();
}
}
}
}
然后在faces-config.xml文件中进行注册
<lifecycle>
<phase-listener>com.igsnrr.MapUpdatePhaseListener</phase-listener>
</lifecycle>
最后一步既是实现分析返回的xml结果的JS函数,更新页面进行显示,代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
function processMapInfo(xh)
{
if(xh != null && xh.readyState == 4 && xh.status == 200)
{
var xml = EsriUtils.getXmlDocument(xh);
var xmin = EsriUtils.getXmlText(xml.getElementsByTagName("xmin").item(0));
var ymin = EsriUtils.getXmlText(xml.getElementsByTagName("ymin").item(0));
var xmax = EsriUtils.getXmlText(xml.getElementsByTagName("xmax").item(0));
var ymax = EsriUtils.getXmlText(xml.getElementsByTagName("ymax").item(0));
var scale = EsriUtils.getXmlText(xml.getElementsByTagName("scale").item(0));
document.getElementById("xmin").innerHTML = xmin;
document.getElementById("ymin").innerHTML = ymin;
document.getElementById("xmax").innerHTML = xmax;
document.getElementById("ymax").innerHTML = ymax;
document.getElementById("scale").innerHTML = scale;
}
}
按照上述步骤依次完成后,即可运行程序,查看效果图,如下所示: