时间戳

首页 > 解决方案 > ESRI WAB 自定义小部件弹出窗口在 1 秒后消失

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

问题描述

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

                }

            });
        }
    }
  });

标签： javascriptjqueryesri

解决方案

通过这种方式添加监听器解决了问题

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

而不是这样

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

推荐阅读