ESRI WAB自定义小部件弹出窗口在1秒后消失

时间:2018-09-27 06:42:42

标签: javascript jquery esri

我正在为ESRI上的WebApp开发面板内自定义小部件。当小部件处于活动状态时,地图将侦听鼠标单击事件。触发后,将通过ajax调用REST服务,结果将显示在弹出窗口中。

如果没有像WMS / WFS处于活动状态的其他层,则一切工作正常。但是对于另一个活动层,弹出窗口会显示一秒钟,然后消失。

有什么主意吗?

define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/layers/layer', 'dojo/dom-construct', 'esri/geometry/webMercatorUtils', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'],
  function(declare, BaseWidget, Layer, domConstruct, webMercatorUtils) {
    var map;
    return declare([BaseWidget], {
      baseClass: 'jimu-widget-myTest',
      name: 'myTest',

        customPopup: new Popup({
            offsetX: 10,
                offsetY: 10,
                visibleWhenEmpty: true
        },domConstruct.create("div")),

      startup: function() {
            map = this.map;         
            this.map._mapParams.infoWindow = this._customPopup;
      },

      onOpen: function(){
            document.getElementById(this.map.id).addEventListener("click", myClickListener);
      },



      onClose: function(){
            document.getElementById(this.map.id).removeEventListener("click", myClickListener);
      }

    });

    function myClickListener(evt) {
        if(evt.mapPoint) {

            var content = "";
            var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
            lon = mp.x;
            lat = mp.y;

            var service_url = "xxxxxx";

            $.ajax({
                method: 'GET',
                url: service_url,
                dataType: 'json',
                error: function() {
                    console.log("Could not load data.");
                },
                success: function(result) {

                    for(var i = 0; i < result.values.length; i++) {
                        content += "<div class='test'>";
                        content += "<table style='width:100%'><tr><td><b>bli</b></td><td>" + result.values[i].bli + "</td></tr>" +
                                    "<tr><td><b>bla</b></td><td>" + result.values[i].bla + "</td></tr>" +
                                    "<tr><td><b>blub</b></td><td>" + result.values[i].blub + "</td></tr>";
                        content += "</table></div>";
                    }


                    map.infoWindow.setTitle("myTest");  
                    map.infoWindow.setContent(content);
                    map.infoWindow.show(evt.screenPoint);

                }

            });
        }
    }
  });

1 个答案:

答案 0 :(得分:0)

通过添加侦听器来解决问题

  onOpen: function(){
        map.on("click", myClickListener);
  },

不是这样

  onOpen: function(){
        document.getElementById(this.map.id).addEventListener("click", myClickListener);
  },