中文

操作方法:在 Web AppBuilder for ArcGIS 的 infoWindow 弹出窗口中启用拖放功能

摘要

当用户单击 Web 地图上的要素时,系统会将 infoWindow 弹出窗口设置为在指针所在位置打开,且该弹出窗口不可移动。 此行为是有意设计的。 然而,该行为有时会遮挡其他要素并破坏视图。

提供的说明描述了如何使 Web AppBuilder for ArcGIS 中的弹出窗口通过鼠标光标拖动窗口进行移动。
 

过程

请按照以下步骤、使用指定的 Dojo 工具包在弹出窗口中启用拖放功能。 需要对 Web AppBuilder for ArcGIS 中的两个基本文件进行编辑:

  • common.css 文件,位于:[app install]\server\apps\[app#]\themes\LaunchpadTheme
  • utils.js 文件,位于:[app install]\server\apps\[app#]\jimu.js
  1. 编辑 common.css 文件,将移动属性插入光标。 以下代码片段说明了如何将光标指针更改为移动光标以指示可移动面板。
@import url("panels/LaunchpadPanel/style.css");    
.esriPopupWrapper .title {  
    cursor: move;  
}  
.esriPopup .hidden {  
    display: none !important;
  1. 在 utils.js 文件中,在代码开头定义指定的 dojo 工具包。 定义属性必须具有以下 dojo 定义。
define([
 ...
    'dojo/dnd/Moveable',
    'dojo/dom-class',
 ...
  ],
  1. 在同一 utils.js 文件中,找到 mo.createWebMap 代码段,并编辑此代码段以合并第 2 步中设置的已添加 dojo 属性。 以下代码片段演示了编辑代码的方法。
mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) 
{  
    portalUrl = portalUrlUtils.getStandardPortalUrl(portalUrl);  
    var itemUrl = portalUrlUtils.getBaseItemUrl(portalUrl);  
    arcgisUtils.arcgisUrl = itemUrl;  
    var def = arcgisUtils.createMap(itemId, mapDiv, options);  
    def.then(function (response){  
        var map = response.map;  
        var handle = query(".title", map.infoWindow.domNode)[0];  
        var dnd = new Moveable(map.infoWindow.domNode, {  
            handle: handle  
        });  
    });  
     return def;  
  };

相关信息