日本語

Web AppBuilder for ArcGIS の infoWindow ポップアップでドラッグ機能を有効にする方法

概要

ユーザーが Web マップでフィーチャをクリックしたときに、infoWindow ポップアップがポインターと同じ位置で開くように設定され、ポップアップ ウィンドウが固定されます。 この挙動は意図的なものです。 ただし、これが他のフィーチャを遮ったり、表示の邪魔になる場合があります。

以下の手順では、マウスカーソルを使用してウィンドウをドラッグして Web AppBuilder for ArcGIS のポップアップ ウィンドウを移動できるようにする方法について説明します。
 

手順

以下の手順に従い、指定された Dojo ツールキットを利用して、ポップアップ ウィンドウでドラッグ機能を有効にします。 Web AppBuilder for ArcGIS の 次の 2 つの基本ファイルを編集する必要があります。

  • [app install]\server\apps\[app#]\themes\LaunchpadTheme にある common.css ファイル
  • [app install]\server\apps\[app#]\jimu.js にある utils.js ファイル
  1. common.css ファイルを編集して、カーソルに対する move プロパティを挿入します。 次のコード スニペットは、カーソル ポインターを移動カーソルに変更して、移動可能なパネルを指定する方法を示しています。
@import url("panels/LaunchpadPanel/style.css");    
.esriPopupWrapper .title {  
    cursor: move;  
}  
.esriPopup .hidden {  
    display: none !important;
  1. utils.js ファイル内のコードの先頭で、指定された Dojo ツールキットを定義します。 define プロパティに、次の 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;  
  };

関連情報