独自の 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:` このリポジトリのテーマを許可する ` を追加する 必要 があります。
ビデオチュートリアル
このビデオは、lizmapのデフォルトパネルを変更するためにJavaScriptを追加する方法を簡単に説明します。
スクリプトのライブラリ
リポジトリ 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 クライアントによって発生する多数のイベントを使用できます。返されるプロパティを持つ、すべてのイベントの一覧を次に示します。
イベント名 |
説明 |
プロパティを返す |
|---|---|---|
ツリー作成 |
レイヤーツリーが凡例パネルに作成されたときに発生します。 |
|
マップの作成 |
OpenLayersマップが作成されたときに発生します |
|
レイヤーを追加 |
Openlayersレイヤーが追加されたときに発生します |
|
ＵＩ作成 |
ユーザーインターフェイスが作成されたときに発生します。 |
|
画面に表示する |
画面に表示をしたとき(左パネル) |
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検索アイテム選択 |
ヘッダー検索入力の結果に一覧表示された項目をユーザーが選択したときに発生します |
地物 |
使用可能な変数もいくつか存在します。
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 mediaUrl = OpenLayers.Util.urlAppend(
lizUrls.media,
OpenLayers.Util.getParameterString({
"repository": lizUrls.params.repository,
"project": lizUrls.params.project,
"path": "picture.png"
})
);
もしくは
var domain = 'https://' + document.domain + lizUrls.basepath;
var image = '<img src="' + domain + 'index.php/view/media/getMedia?repository=REPOSITORY&project=PROJECT&path=/media/logo.png" title="Logo" />';