独自の Java スクリプトを追加する
定義
JavaScript (JS) を追加することは、さまざまな高度な使用方法に役立ちます。たとえば、次のことができます。
既定で表示しない UI 要素を非表示にする
UI でカスタム ボタンを追加する
プロジェクトが開かれたときにポップアップを追加します (地物情報、クレジットを表示します)。
ユーザーがページの要素を右クリックしてダウンロードできるようする。
前提条件
This function needs to be activated by the administrator of the Lizmap instance on the repository page.
ディレクトリを
media
ディレクトリ。Lizmap で メディア フォルダーを使用する方法を読んでください。
ツールの設定
リポジトリ (例:
/home/data/repo1/myproject.qgs
) には、次のディレクトリが必要です。media |-- js |-- myproject |-- default
/home/data/rep1/media/js/myproject/
ディレクトリでコピーするすべてのJavaScriptコードは、この 特定 プロジェクトの場合にのみlizmapによって実行されます。``default`` 内のすべての JavaScript コードは 全 プロジェクトに対して実行されます。
JavaScript コードの実行を許可するには、lizmap管理インターフェイスで、特権 :guilabel:` このリポジトリのテーマを許可する ` を追加する 必要 があります。
Tip
It's possible to temporary disable the loading of additional JavaScript by adding a parameter in the URL :
&no_user_defined_js=1
.
ビデオチュートリアル
This video is an quick start how to add a JavaScript to change the default panel in Lizmap.
スクリプトのライブラリ
You can find some examples in the JavaScript library on GitHub.
Also, in the directory lizmap-web-client/lizmap/install/qgis/media/js/
(or in
GitHub),
you can find examples of suitable JavaScript code.
拡張子 .example
を削除し、それらを有効にするために media/js/default/
フォルダにコピーします。
API documentation
An automated generated documentation of the JavaScript API is available on docs.3liz.org.
利用可能な Java スクリプト イベント
Javascript コードでは、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 |
使用可能な変数もいくつか存在します。
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 |
例
Legend API
For a given layer buildings
:
var layer = lizMap.mainLizmap.state.rootMapGroup.getMapLayerByName('buildings');
// Name of the current loaded style
layer.wmsSelectedStyleName
// Toggle true or false the layer in the legend
layer.checked = true;
Please have a look to existing online demo, like the Paris by night
右クリックを無効にする
たとえば、次のコードを使用して 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'
};
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"
})
);