ESRI WAB自定义小部件在1秒后消失。

Question

我正在为我们在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);

                }

            });
        }
    }
  });

Answer 1

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

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

而不是像这样

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