5. Přidání liniových a bodových prvků

Parcely katastrální mapy jsou pro nás podkladovou mapou. V dalším kroku bychom chtěli přidat obsah týkající se specifických prvků - místa obřadu, restaurace a informace o přesunech z jednoho místa do druhého. Tyto informace jsou z velké části uloženy v připravených GeoJSON souborech. Tyto soubory do mapy přidáme následujícím způsobem:

// Routes from one important place to another
var routes = new VectorLayer({
  source: new VectorSource({
     url: 'features/routes.geojson',
     format: new GeoJSON({
        defaultDataProjection :'EPSG:5514', 
        projection: 'EPSG:5514'
     })
  }),
  style: routeStyle
});

// Add layer to map
map.addLayer(routes);

// Map symbols of both important places
var mapSymbols = new VectorLayer({
  source: new VectorSource({
     url: 'features/map_symbols.geojson',
     format: new GeoJSON({
        defaultDataProjection :'EPSG:5514', 
        projection: 'EPSG:5514'
     })
  }),
  style: mapSymbolStyle
});

// Add layer to map
map.addLayer(mapSymbols);

Styly routeStyle a mapSymbolStyle definujeme na začátku skriptu main.js (tam kde jsme definovali statické stylování pro vektorové dlaždice). Jedná se o statické stylování pomocí funkce, která styluje prvky podle informací obsažených v GeoJSON souborech. U cest definujeme sílu a typ čáry, zatímco u mapových symbolů definujeme vzhled ikonky (velikost, umístění, symbol).

// Style for routes according to geojson file
function routeStyle (feature) {
  return new Style({
    stroke: new Stroke({
      color: feature.getProperties().color,
      width: feature.getProperties().width,
      lineDash: feature.getProperties().lineDash,
    })
  })
};

// Style for map symbols according to geojson file
function mapSymbolStyle (feature) {
  return new Style({
    image: new Icon({
      scale: feature.getProperties().scale,
      anchor: feature.getProperties().anchor,
      anchorXUnits:  feature.getProperties().anchorXUnits,
      anchorYUnits: feature.getProperties().anchorYUnits,
      src: feature.getProperties().src
    })
  })
};

Samozřejmě nesmíme zapomenout na přidání importních deklarací pro nové závislosti:

import {Icon, Fill, Stroke, Style} from 'ol/style';

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

import GeoJSON from 'ol/format/GeoJSON';

V mapě se zobrazí dvě ikonky a několik linestringů zobrazujících možnosti přesunů z místa obřadu do místa hostiny.

Trasy a ikonky vytvořené na základě GeoJSON souboru

S těmito prvky budeme dále pracovat a přidávat jim interaktivitu.