7. Dynamické stylování

Dále bychom chtěli, aby vektorové prvky (ikonky a trasy) a vybrané parcely reagovaly na dotyk kursorem myši. Tato interaktivita uživatele může povzbudit ke kliku na zvýrazněný prvek, čímž si otevře popup okno s více informacemi. Pokud mapa na první pohled interaktivní nebude, uživatele nemusí vůbec napadnout na objekty v mapě kliknout.

Dynamické stylování vektorových vrstev

Vrstva mapových symbolů a vrstva cest budou stylovány pomocí stylovacích funkcí na základě informací uvedených v GeoJSON souborech. Jedná se o velmi podobné řešení jako u statické stylizace. Rozdíl je v tom, že výsledná stylovací funkce vectorLayerHoverStyle bude argumentem při zavolání konstruktoru objektu interakce mezi prvkem a kursorem myši. Dynamické stylování vložíme za statické stylování (stylovací proměnné i funkce se obvykle umísťují na začátek souboru hned po importních klausulích).

// Style for hovering on routes
function routeHoverStyle (feature) {
  return new Style({
    stroke: new Stroke({
      color: feature.getProperties().color_hover,
      width: feature.getProperties().width_hover,
      lineDash: feature.getProperties().lineDash_hover,
    })
  })
};

// Style for hovering on map symbols
function mapSymbolHoverStyle (feature) {
  return new Style({
    image: new Icon({
      scale: feature.getProperties().scale_hover,
      anchor: feature.getProperties().anchor_hover,
      anchorXUnits:  feature.getProperties().anchorXUnits,
      anchorYUnits: feature.getProperties().anchorYUnits,
      src: feature.getProperties().src
    })
  })
};

// Hovering over vector layers
function vectorLayerHoverStyle (feature) {
  if ((feature.getGeometry().getType() == "Point")) {
    var style = mapSymbolHoverStyle(feature); 
  } else if ((feature.getGeometry().getType() == "LineString")) {
    var style = routeHoverStyle(feature);
  }
  return style;
};

Jako typ interakce zvolíme pointerMove (nebo-li hovering či najetí). Po najetí kursorem na ikonu by mělo dojít ke zvětšení ikony. Podobně při najetí kursorem na některou z tras dojde k obarvení trasy na zářivě modrou. Následující kód přidává tento typ interakce do mapy. Umístíme ho na konec souboru main.js.

// Select interaction working on "pointermove"
const selectPointerMove = new Select({
  condition: pointerMove,
  style: vectorLayerHoverStyle,
});

map.addInteraction(selectPointerMove);

Opět nezapomene na vložení nových importních deklarací na začátek souboru.

import {pointerMove} from 'ol/events/condition';
import Select from 'ol/interaction/Select';

Trasy se po najetí zobrazí modře a ikonky se po najetí o trošku zvětší.

Změna barvy po najetí kursorem myši na objekt GeoJSON vrstvy

Dynamické stylování vektorových dlaždic

Podobně jako u statického stylování vektorových dlaždic, i zde využijeme toho, že vektorové dlaždice si s sebou nesou atributovou informaci.

// Style for hovering on vector tile features
const vectorTilesHoverStyle = new Style({
  stroke: new Stroke({
    color: 'black',
    width: 2,
  }),
  fill: new Fill({
    color: 'cyan',
  }),
});

Vytvoříme novou vrstvu vektorových dlaždic, která bude reagovat na pointermove událost. Ve chvíli, kdy bude ID_2 parcely rovno požadovanému číslu (parcela pod restaurací či parcela pod kostelem), dojde k přidání parcely do výběrové množiny. Ve všech ostatních případech bude výběrová množina prázdná.

// Init selection list
let selection = {};

// Vector tile hovering layer
const hoverVectorTiles = new VectorTileLayer({
  map: map,
  renderMode: 'vector',
  source: vectorTiles.getSource(),
  style: function (feature) {
    if (feature.get("ID_2") in selection) {
      return vectorTilesHoverStyle;
    }
  },
});

// Select chosen vector tile features while hovering
map.on(['pointermove'], function (event) {
  vectorTiles.getFeatures(event.pixel).then(function (features) {
    const feature = features[0];
    if (!feature) {
      return;
    }
    if ((feature.get("ID_2") == 2238913101 ) || (feature.get("ID_2") == 2113941101)) {
      const fid = feature.get("ID_2");
      selection[fid] = feature;
      hoverVectorTiles.changed();
      return;
    }
    selection = {};
    hoverVectorTiles.changed();
  });
});

Po najetí kursorem myši na příslušnou parcelu dosáhneme modrého zbarvení:

Změna barvy po najetí kursorem myši na prvek ve vektorové dlaždici