Přidání vlastního JavaScriptu

Princip

Přidání JavaScriptu (JS) je užitečné pro různá pokročilá použití. Můžete například:

  • skrýt některé prvky uživatelského rozhraní, které nechcete zobrazovat ve výchozím nastavení.

  • přidání vlastního tlačítka do uživatelského rozhraní

  • přidat vyskakovací okno při otevření projektu (pro zobrazení sponzorů, kreditů…)

  • zabránit tomu, aby lidé mohli stahovat prvky stránky kliknutím pravým tlačítkem myši, a samozřejmě mnoho dalšího.

Předpoklady

  • Tuto funkci musí aktivovat správce instance Lizmap.

  • Adresář media. Přečtěte si, jak používat adresář Media v Lizmap.

Konfigurace nástroje

  • V úložišti (např. /home/data/repo1/myproject.qgs) byste měli mít tyto adresáře:

    media
    |-- js
      |-- myproject
      |-- default
    
  • Veškerý kód JavaScriptu, který zkopírujete do adresáře /home/data/rep1/media/js/myproject/, spustí Lizmap pouze pro tento konkrétní projekt.

  • Veškerý kód JavaScriptu v default se spustí pro všechny projekty.

  • Chcete-li povolit spouštění kódu JavaScript, musíte v administračním rozhraní Lizmap přidat oprávnění Povolit motivy pro tento repozitář.

Výukové video

Toto video je rychlý návod, jak přidat JavaScript pro změnu výchozího panelu v Lizmap.

Knihovna skriptů

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.

Odstraňte příponu .example a zkopírujte je do složky media/js/default/, abyste je aktivovali.

API documentation

An automated generated documentation of the JavaScript API is available on docs.3liz.org.

Dostupné události Javascript

Kód Javascript může využívat mnoho událostí vyvolaných aplikací Lizmap Web Client. Zde je seznam všech dostupných událostí s vrácenými vlastnostmi.

Dostupné události webového klienta Lizmap

Název události

Popis

Vrácené vlastnosti

treecreated

Vyvolá se, když je na panelu legendy vytvořen strom vrstev

mapcreated

Vyvoláno po vytvoření mapy OpenLayers

layersadded

Vyvoláno po přidání vrstev Openlayers

uicreated

Vyvoláno po vytvoření rozhraní

dockopened

Vyvoláno při otevření doku (levý panel)

id

dockclosed

Spuštěno při zavření doku (levý panel)

id

minidockopened

Vyvolá se, když je otevřen minidok (pravý kontejner na nástroje).

id

minidockclosed

Vyvolá se, když je minidok uzavřen.

id

bottomdockopened

Spustí se při otevření spodního doku

id

bottomdockclosed

Vypaluje se při zavřeném spodním doku

id

lizmapbaselayerchanged

Vyvoláno při výměně základní vrstvy

vrstva

lizmapswitcheritemselected

Vyvolá se, když je vrstva zvýrazněna na panelu legendy vrstvy.

name | type | selected

layerstylechanged

Vyvolává se při změně stylu vrstvy

featureType

lizmaplocatefeaturecanceled

Vyvolá se, když uživatel zruší nástroj vyhledávání podle vrstvy.

featureType

lizmaplocatefeaturechanged

Vyvolá se, když uživatel vybere položku v nástroji vyhledávání podle vrstvy.

featureType | featureId

lizmappopupdisplayed

Vyvoláno při zobrazení obsahu vyskakovacího okna

lizmappopupallchildrendisplayed

Vyvolává se při zobrazení vyskakovacích oken všech podřazených objektů.

parentPopupElement | childPopupElements

lizmappopupdisplayed_inattributetable

Vyvolá se, když je obsah vyskakovacího okna zobrazen v tabulce atributů (pravý dílčí panel).

lizmapeditionformdisplayed

Vyvolává se při zobrazení formuláře pro editaci

layerId | featureId | editionConfig

lizmapeditionfeaturecreated

Vyvolá se, když byl prvek vrstvy vytvořen nástrojem pro editaci.

layerId

lizmapeditionfeaturemodified

Vyvolá se, když byl prvek vrstvy upraven nástrojem pro editaci.

layerId

lizmapeditionfeaturedeleted

Vyvolá se, když byl prvek vrstvy odstraněn nástrojem pro editaci.

layerId | featureId

attributeLayersReady

Vyvolá se, když jsou nastaveny všechny vrstvy, které se mají zobrazit v nástroji atributové vrstvy.

vrstvy

attributeLayerContentReady

Vyvolá se, když je v dolním doku zobrazena tabulka pro vrstvu.

featureType

layerfeaturehighlighted

Vyvolá se, když je prvek zvýrazněn v tabulce atributů ( šedý obdélník ). Vyvolání této události ručně vynutí obnovení podřízených tabulek, pokud pro vrstvu existují.

sourceTable | featureType | fid

layerfeatureselected

Spuštěním této události se spustí výběr prvku pro vrstvu, přičemž se předá id prvku. Jakmile je výběr proveden, je zpětně vyvolána událost layerSelectionChanged.

featureType | fid | updateDrawing

layerfeaturefilterselected

Vyvoláním této události se spustí filtrování vrstvy pro vybrané prvky. Před spuštěním této události musíte vybrat některé prvky. Jakmile je filtr použit, Lizmap zpětně vyvolá událost layerFilteredFeaturesChanged.

featureType

layerFilteredFeaturesChanged

Vyvolá se, když byl na mapu pro vrstvu použit filtr. Tato událost také spustí překreslení mapy a obsahu atributových tabulek.

featureType | featureIds | updateDrawing

layerFilterParamChanged

Vyvolává se, když se pro vrstvu změní parametry požadavků WMS. Například když byl pro vrstvu změněn STYL nebo FILTR.

featureType | filter | updateDrawing

layerfeatureremovefilter

Vyvoláním této události odstraníte všechny filtry použité na mapě. Jakmile je to provedeno, vyvolá se zpět událost layerFilteredFeaturesChanged a obsah mapy a atributových tabulek se obnoví.

featureType

layerSelectionChanged

Vyvolá se, když byl pro vrstvu změněn výběr. To také vyvolá překreslení obsahu atributové tabulky a obsahu mapy.

featureType | featureIds | updateDrawing

layerfeatureselectsearched

Vyvoláním této události se vyberou všechny prvky odpovídající zobrazeným řádkům tabulky atributů, které může uživatel vizuálně filtrovat zadáním některých znaků do textového vstupu pro vyhledávání.

featureType | updateDrawing

layerfeatureunselectall

Vyvoláním této události odstraníte všechny prvky z výběru vrstvy. Jakmile je to provedeno, Lizmap reaguje událostí layerSelectionChanged.

featureType | updateDrawing

lizmapexternalsearchitemselected

Vyvolá se, když uživatel vybere položku uvedenou ve výsledcích vyhledávání v záhlaví.

funkce

actionResultReceived

Vyvolává se, když byla provedena akce vyskakovacího okna Lizmap a byl přijat výsledek.

layerId | featureId | action | features

K dispozici jsou také některé proměnné.

Lizmap Web Client dostupné proměnné

Název proměnné

Popis

lizUrls.media

URL pro získání média

lizUrls.params.repository

Název aktuálního úložiště

lizUrls.params.project

Název aktuálního projektu

Příklady

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

Zakázat kliknutí pravým tlačítkem myši

Přidejte soubor s názvem např. disableRightClick.js s následujícím kódem:

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});
  • Pokud chcete, aby se tento kód spustil pro všechny projekty vašeho úložiště, musíte soubor zkopírovat do adresáře /home/data/rep1/media/js/default/ a ne do /home/data/rep1/media/js/myproject/.

Odeslat aktuální přihlašovací ID uživatele

Příklad umožňující odeslat aktuální přihlašovací ID uživatele (a/nebo jiné údaje o uživateli) do sloupce tabulky PostgreSQL pomocí editačního nástroje:

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 statického souboru

Pokud chcete získat adresu URL statického souboru, který se nachází ve složce Media:

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;" />';

Je možné použít funkci z knihovny OpenLayers, která pomůže sestavit adresu URL :

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