日本語
Continue in the app
Be The First To Get Support Updates
Want to know about the latest technical content and software updates?

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

概要

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

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

注意: これらの手順は、ローンチパッド テーマ固有のものです。他のテーマを使用するには、common.css ファイルと style.css ファイルへのパスを更新してください。

手順

以下の手順に従い、指定された 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; };

関連情報

更新日時: 12/4/2020

記事 ID: 000015175

ソフトウェア: Web AppBuilder for ArcGIS 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3, 2.2, 2.18, 2.17, 2.16, 2.15, 2.14, 2.13, 2.12, 2.11, 2.10, 2.1, 2.0