• arcgis server java 气泡显示


    1。定义做个MapToolAction实现点击功能。
    在MapToolAction中得到要展示的点的基本信息,保存到webcontext中。

    // 得到click点,并将信息存储为SimplePointInfo
    _context = event.getWebContext();
    WebMap map = _context.getWebMap();
    WebPoint screenPoint = (WebPoint) event.getWebGeometry();
    WebPoint mapPoint = (WebPoint) event.getWebGeometry().toMapGeometry(map);
    SimplePointInfo pointInfo = new SimplePointInfo();
    pointInfo.setScreenX(screenPoint.getX());
    pointInfo.setScreenY(screenPoint.getY());
    pointInfo.setMapX(mapPoint.getX());
    pointInfo.setMapY(mapPoint.getY());
    _context.setAttribute("pointInfo", pointInfo);

    2.SimplePointInfo 为保存点信息的bean类

    具备下面属性

    private double _screenX;
    private double _screenY;
    private double _mapX;
    private double _mapY;


    3. 实现AJAXRenderer。
    在AJAXRenderer中得到webcontext中保存的基本信息,在添加到xml中。
    public void renderAjaxResponse(FacesContext facesContext,UIComponent component, Object state, boolean isEventSource,Element parentElement) {
    try {
    WebContext context = ((MapControl) component).getWebMap().getWebContext();
    SimplePointInfo info = (SimplePointInfo) context.getAttribute("pointInfo");
    context.setAttribute("pointInfo", null);
    System.out.println("screenX:"+info.getScreenX());
    if(info!=null){
    Element pointInfo= XMLUtil.createElement("pointInfo", null, parentElement);
    Element point= XMLUtil.createElement("point", "", pointInfo);
    point.setAttribute("screenX",String.valueOf(info.getScreenX()));
    point.setAttribute("screenY",String.valueOf(info.getScreenY()));
    point.setAttribute("mapX",String.valueOf(info.getMapX()));
    point.setAttribute("mapY",String.valueOf(info.getMapY()));
    }
    } catch (Exception e) {
    }
    }
    }

    4.把实现的AJAXRenderer在ajax-renderers.xml注册
    注册后,系统会自动调用,不需要人为调用了。
    <list-entries>
    .................................

    <value>#{ajaxGpAsyncTaskResultsRenderer}</value>
    <value>#{MyAjaxRender}</value> <--------- 自己实现的AJAXRenderer,下面是bean的定义。两个名称要一样
    </list-entries>

    <managed-bean>
    <managed-bean-name>MyAjaxRender</managed-bean-name>
    <managed-bean-class>com.rasa.MyAjaxRender</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    </managed-bean>
    ..............................
    5.客户端设计
    5.1加上回调
    EsriControls.addPostBackTagHandler("pointInfo", showPointInfo);
    //注意pointInfo对应于你上面中建立在response下的pointInfo
    5.2显示气泡
    function showPointInfo(xml, eventSources) {
    //得到点信息
    var point = xml.getElementsByTagName("point")[0];
    var screenX = point.getAttribute("screenX");
    var screenY = point.getAttribute("screenY");
    var mapX = point.getAttribute("mapX");
    var mapY = point.getAttribute("mapY");

    //构造气泡div
    var content = "<div id='balloontip'> "+
    "<div id='tipclose' onclick='hideBalloonTip();'></div>"+
    "<div id='frame1'></div>"+
    "<div id='frame2'>"+
    "<div id='tiptitle'></div>"+
    "<div id='tipcontent'>"+
    "<ul id='tipcontent_ul'>"+
    "screenX:"+screenX+"<br>"+
    "screenY:"+screenY+"<br>"+
    "mapX:"+mapX+"<br>"+
    "mapY:"+mapY+
    "</ul>"+
    "</div>"+
    "</div>"+
    "<div id='frame3'></div>"+
    "</div>"

    //显示气泡div
    var style = "display:block;cursor:default;position:absolute;left:"+screenX+"px;top:"+screenY+"40px;282px;z-index:100;";
    var map = EsriControls.maps['map1'];
    var popUpId = 'divPopUp';
    var popUp = document.getElementById(popUpId);
    if( popUp==null ) {
    popUp = document.createElement('div');
    popUp.id = popUpId;
    popUp.innerHTML=content;
    map.divObject.appendChild(popUp); //注意:要添加到divObject下,否则关闭按钮不起作用
    EsriUtils.setElementStyle(popUp, style);
    }else{
    popUp.innerHTML=content;
    EsriUtils.setElementStyle(popUp, style);
    }
    }

    6.其他tool点击时隐藏气泡内容

    在esri_map.js内的EsriMap.prototype.setCurrentToolItem下添加
    if("Identify"!=toolItem.id){
    var popUp = document.getElementById('divPopUp');
    if(popUp!=null) popUp.style.display='none';
    }

    7.透明气泡的css

    #frame1{
    background:transparent url(../images/balloontip/info_frame_left.png) no-repeat;
    282px;
    height:37px;
    }
    #frame2{
    background:transparent url(../images/balloontip/info_frame_02.png) repeat-y;
    282px;
    }
    #frame3{
    background:transparent url(../images/balloontip/info_frame_03.png) no-repeat;
    282px;
    height:13px;
    }
    #tipcontent{
    padding-bottom:5px;
    }
    #tiptitle{
    font-family: "宋体";
    font-size: 9pt;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #2d4291;
    text-indent:10px;
    background: url(../images/balloontip/info_frame_line.gif) no-repeat bottom center;
    padding-bottom:5px;
    margin:0px;
    }
    #tipclose{
    cursor:pointer;
    background: url(../images/balloontip/info_frame_close.gif) no-repeat center center;
    top:34px;
    left:251px;
    position:absolute;
    z-index:101;
    14px;
    height:14px;
    }

    #tipclose:hover{
    background: url(../images/balloontip/info_frame_close_J.gif) no-repeat center center;
    14px;
    height:14px;
    }

    #tipcontent_ul{
    padding:5px 10px 5px 13px;
    margin:0;
    }
    #tipcontent_ul li{
    font:normal 9pt "宋体";
    margin:0px;
    padding:0px;
    line-height:20px;
    text-align:left;
    list-style-type:none;
    }

  • 相关阅读:
    three.js中 用 鼠标点击+呼吸灯
    socket.io学习以及在vuehtml使用,node搭建的后台
    网路在线古诗文免费阅读网站
    vue-element-admin默认加载Dashboard更改
    vue-element-admin后台框架侧边蓝图标添加自定义
    吸顶操作vue
    对图片进行裁剪(vueCropper)图片不显示
    ucharts使用内容
    文字转换为语音在线免费工具连接
    tree.js外部骨骼动画
  • 原文地址:https://www.cnblogs.com/myparamita/p/2077759.html
Copyright © 2020-2023  润新知