‎独自の Java スクリプトを追加する‎

定義

JavaScript (JS) を追加することは、さまざまな高度な使用方法に役立ちます。たとえば、次のことができます。‎

  • ‎既定で表示しない UI 要素を非表示にする‎

  • ‎UI でカスタム ボタンを追加する‎

  • ‎プロジェクトが開かれたときにポップアップを追加します (地物情報、クレジットを表示します)。‎

  • ‎ユーザーがページの要素を右クリックしてダウンロードできるようする。

‎前提条件‎

  • ‎この機能は、Lizmap インスタンスの管理者によって有効化される必要があります。‎

  • ‎ディレクトリを media ディレクトリ。Lizmap で ‎メディア‎ フォルダーを使用する方法を読んでください。‎

‎ツールの設定

  • ‎リポジトリ (例: /home/data/repo1/myproject.qgs ) には、次のディレクトリが必要です。‎

    media
    |-- js
      |-- myproject
      |-- default
    
  •  /home/data/rep1/media/js/myproject/ ディレクトリでコピーするすべてのJavaScriptコードは、この 特定 プロジェクトの場合にのみlizmapによって実行されます。‎

  • ‎``default`` 内のすべての JavaScript コードは プロジェクトに対して実行されます。‎

  • ‎JavaScript コードの実行を許可するには、lizmap管理インターフェイスで、特権 :guilabel:` このリポジトリのテーマを許可する ` を追加する 必要 があります。‎

‎ビデオチュートリアル‎

This video is an quick start how to add a JavaScript to change the default panel in Lizmap.

‎スクリプトのライブラリ‎

‎リポジトリ https://github.com/3liz/lizmap-javascript-scripts に例をいくつか示します。‎

‎また、ディレクトリ lizmap-web-client/lizmap/install/qgis/media/js/ (or in GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier)では、適切なJavaScriptコードの例を見つけることができます。‎

‎拡張子 .example を削除し、それらを有効にするために media/js/default/ フォルダにコピーします。‎

‎利用可能な Java スクリプト イベント‎

‎Javascript コードでは、lizmap Web クライアントによって発生する多数のイベントを使用できます。返されるプロパティを持つ、すべてのイベントの一覧を次に示します。‎

lizmap Web クライアントで利用可能なイベント‎

‎イベント名‎

説明

プロパティを返す‎

‎ツリー作成‎

‎レイヤーツリーが凡例パネルに作成されたときに発生します。‎

マップ‎の作成

OpenLayersマップが作成されたときに発生します‎

‎レイヤーを追加‎

Openlayersレイヤーが追加されたときに発生します‎

UI作成

‎ユーザーインターフェイスが作成されたときに発生します。‎

画面に表示する

画面に表示をしたとき(左パネル)‎

id

画面表示を閉じる

画面表示を閉じたとき(左パネル)‎

id

最小サイズで表示する

最小サイズ (右パネル) で表示しとき‎

id

最小サイズの表示を閉じる

最小サイズの表示が閉じたとき‎

id

画面下に表示をする

画面下に表示したとき

id

画面下の表示を閉じる

‎画面下に表示を閉じたとき‎

id

lizmapベースレイヤーが変更されました‎

‎ベースレイヤが変更されたときに発生します‎

レイヤ

lizmapスイッチアイテム‎の選択

‎レイヤーの凡例パネルでレイヤーがハイライト表示されたとき‎

name | type | selected

‎レイヤースタイル変更‎

‎レイヤー スタイルが変更されたとき

地物タイプ‎

lizmaplocatefeatureキャンセル

‎ユーザーがレイヤー別の位置指定ツールをキャンセルしたとき

地物タイプ‎

lizmaplocatefeature変更

‎レイヤーツールでアイテムを選択したときに発生します‎

featureType | featureId

lizmap地物情報表示‎

地物情報コンテンツが表示されたとき

lizmap地物情報オールチルドレン表示‎

‎すべての下位ポップアップが表示されたとき

上位地物情報Element | 下位地物情報Elements

lizmap地物情報表示_‎inattributetable

地物情報コンテンツが属性テーブルに表示されたとき (右サブパネル)‎

lizmap編集フォーム表示

編集フォームが表示されたとき

layerId | featureId| 編集設定

lizmap編集地物作成

‎レイヤー 、地物が編集 ツールで作成されたとき

layerId

lizmap編集地物‎変更‎

‎レイヤー、地物が編集ツールで変更されたとき

layerId

lizmap編集地物削除

‎レイヤー 、地物が編集ツールで削除されたとき

layerId | featureId

‎全属性‎レイヤ表示‎

‎属性レイヤー ツールに表示されるすべてのレイヤーが表示されている場合

レイヤ

全‎属性‎レイヤ‎コンテンツ‎表示

‎レイヤのテーブルが画面下に表示されたときに発生します‎

地物タイプ‎

レイヤ地物上部表示

‎属性テーブル (灰色の四角形) で地物がハイライト表示されたときに発生します。このイベントを手動で発生させると、そのレイヤーに下位テーブルが存在する場合は、強制的に更新されます。‎

sourceTable | featureType | fid

レイヤ地物選択

‎このイベントを発生させると、地物のID を渡すことによって、レイヤーの地物の選択がトリガーされます。選択が完了すると、イベントレイヤーSelectionChangedが返り代わりに起動されます。‎

featureType | fid | updateDrawing

レイヤ地物フィルター選択

‎このイベントを発生させると、選択した地物のレイヤーのフィルタリングがトリガーされます。このイベントを発生させるには、いくつかの設定を選択する必要があります。フィルターが適用されると、lizmapはイベント レイヤーを起動しますフィルター処理された機能変更を返します。‎

地物タイプ‎

レイヤフィルタ地物変更

‎レイヤーのマップにフィルターが適用されたときに発生します。このイベントは、マップと属性テーブルのコンテンツの再描画も起動します。‎

featureType | featureIds | updateDrawing

レイヤフィルタ属性変更

‎WMS 要求パラメーターがレイヤーに対して変更されたときに発生します。たとえば、STYLE または FILTER がレイヤーに対して変更されている場合などです。‎

featureType | filter | updateDrawing

レイヤ地物移動フィルター

‎マップに適用されているフィルタを削除するには、このイベントを発生させます。完了すると、イベント レイヤーFilteredFeaturesChanged が再び発生し、マップ コンテンツと属性テーブルのコンテンツが更新されます。‎

地物タイプ‎

レイヤ選択変更

‎レイヤーの選択が変更されたときに発生します。これにより、属性テーブルのコンテンツとマップコンテンツの再描画も起動されます。‎

featureType | featureIds | updateDrawing

レイヤ地物選択検索

‎このイベントを発生させると、属性テーブルの表示行に対応するすべてのフィーチャが選択され、検索テキスト入力に文字を入力してユーザーが視覚的にフィルター処理できます。‎

featureType | updateDrawing

レイヤ地物全選択解除

‎レイヤーの選択からすべての地物を解除するには、このイベントを発生させます。一度完了すると、lizmap‎‎はイベント レイヤー選択変更‎で応答します

featureType | updateDrawing

lizmap ‎external検索アイテム選択

‎ヘッダー検索入力の結果に一覧表示された項目をユーザーが選択したときに発生します‎

地物

アクション結果受信

‎Lizmap 地物情報アクションが実行され、結果が受信された場合に発生します。‎

layerId | featureId | action | features

‎使用可能な変数もいくつか存在します。‎

Lizmap Web Client available variables

Variable name

説明

lizUrls.media

URL to get a media

lizUrls.params.repository

Name of the current repository

lizUrls.params.project

Name of the current project

‎例‎

‎凡例のグループを折りたたむ‎

lizMap.events.on({
    uicreated: function(e) {
        $('#group-groupname td a.expander').click();
    }
});

‎右クリックを無効にする‎

‎たとえば、次のコードを使用して disableRightClick.js を追加します。‎

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});
  • ‎このコードをリポジトリのすべてのプロジェクトに対して実行する場合は、ファイルをディレクトリ /home/data/rep1/media/js/default/ ではなく、 /home/data/rep1/media/js/myproject/ にコピーする必要があります。‎

‎現在のログイン ユーザー ID を送信します。‎

‎現在のログイン User-ID (および/または他のユーザー データ) を、編集ツールを使用して PostgreSQL テーブル列に送信できる例:‎

var formPrefix = 'jforms_view_edition';

// Name of the QGIS vector layer fields which must contain the user info
// In the list below, replace the right side by your own fields in Lizmap
var userFields = {
   login: 'your_lizmap_user_login_field',
   firstname: 'your_lizmap_user_firstname_field',
   lastname: 'your_lizmap_user_lastname_field',
   organization: 'your_lizmap_user_organization_field'
};


lizMap.events.on({

   'lizmapeditionformdisplayed': function(e){

      // If user is logged in
      if( $('#info-user-login').length ){
            // Loop through the needed fields
            for( var f in userFields ){
               // If the user has some data for this property
               if( $('#info-user-' + f).text() ){
                  // If the field exists in the form
                  var fi = $('#' + formPrefix + '_' + userFields[f]);
                  if( fi.length ){
                        // Set val from lizmap user data
                        fi.val( $('#info-user-' + f).text() )
                        // Set disabled
                        fi.hide();
                  }
               }
            }
      }

   }

});

‎静的ファイルの URL‎

‎メディア‎ フォルダにある静的ファイルの URL を取得する場合は、次の手順を実行します。‎

var media = '/media/image/logo.jpg';
// It can also be a media located in the common media folder such as
// var media = '../media/logo.png';
var url = lizUrls.media + '?repository=' + lizUrls.params.repository + '&project=' + lizUrls.params.project + '&path=' + media;
// console.log(url);
var image  = '<img src="' + url + '" title="Logo" style="display:inline;height:80px;margin:20px 10px;" />';

It's possible to use a function from the OpenLayers library to help building the URL :

var mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);