OpenLayers je výkonný JavaScript nástroj, ktorý nám umožňuje vytvárať a zobrazovať všetky druhy máp na webových stránkach. Tento článok vás prevedie pridaním funkcie bodu a reťazca, potom transformuje ich projekcie tak, aby používali súradnice, a potom pridá farbu podľa nastavenia štýlu vrstvy.
Podľa tohto článku musíte mať na webovej stránke nainštalovanú funkčnú mapu OpenLayers. Ak ho nemáte, prečítajte si časť Ako vytvoriť mapu pomocou OpenLayers 3.
Kroky
Časť 1 z 3: Pridanie funkcií reťazcov bodov a čiar
Krok 1. Vytvorte bodovú funkciu
Jednoducho skopírujte nasledujúci riadok kódu do svojho
element:
var point_feature = new ol. Feature ({});
Krok 2. Nastavte geometriu bodu
Aby ste OpenLayers povedali, kam umiestniť bod, musíte vytvoriť geometriu a dať jej sadu súradníc, čo je pole vo forme [zemepisná dĺžka (V-Z), zemepisná šírka (S-S)]. Nasledujúci kód to vytvorí a nastaví geometriu bodu:
var point_geom = nový ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Krok 3. Vytvorte funkciu reťazca riadka
Reťazce čiar sú rovné čiary rozdelené na segmenty. Vytvárame ich rovnako ako body, ale pre každý bod reťazca riadkov uvádzame dvojicu súradníc:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Krok 4. Pridajte funkcie do vektorovej vrstvy
Ak chcete pridať funkcie na mapu, musíte ich pridať do zdroja, ktorý pridáte do vektorovej vrstvy, ktorú potom môžete pridať na mapu:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]}))}) map.addLayer (vector_layer);
Časť 2 z 3: Transformácia geometrií prvkov na použitie súradníc
Ako každý výkonný mapovací softvér, aj mapy OpenLayers môžu mať rôzne vrstvy s rôznymi spôsobmi zobrazovania informácií. Pretože je Zem zemeguľa a nie plochá, pri pokuse o zobrazenie na našich plochých mapách musí softvér upraviť polohy tak, aby zodpovedali plochej mape. Tieto rôzne spôsoby zobrazovania informácií na mape sa nazývajú projekcie. Ak chcete použiť vektorovú vrstvu a vrstvu dlaždíc spoločne na tej istej mape, znamená to, že musíme vrstvy transformovať z jednej projekcie do druhej.
Krok 1. Vložte funkcie do poľa
Začneme tým, že funkcie, ktoré chceme transformovať, spojíme do poľa, cez ktoré môžeme iterovať.
var features = [point_feature, linestring_feature];
Krok 2. Napíšte funkciu transformácie
V OpenLayers môžeme použiť funkciu transform () na geometrický objekt každého prvku. Vložte tento transformačný kód do funkcie, ktorú môžeme zavolať neskôr:
funkcia transform_geometry (element) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Krok 3. Zavolajte funkciu transformácie funkcií
Teraz jednoducho iterujte cez pole.
features.forEach (transform_geometry);
Časť 3 z 3: Nastavenie štýlu vektorovej vrstvy
Aby sme mohli zmeniť vzhľad každého objektu na mape, musíme vytvoriť a použiť štýl. Štýly môžu meniť farby, veľkosti a ďalšie atribúty bodov a čiar a môžu tiež zobrazovať obrázky pre každý bod, čo je veľmi vhodné pre prispôsobené mapy. Táto sekcia nie je potrebná, ale je zábavná a užitočná.
Krok 1. Vytvorte výplň a prilepte
Vytvorte objekt štýlu výplne a polopriehľadnú červenú farbu a štýl ťahu (čiary), ktorý je plnou červenou čiarou:
var fill = new ol.style. Fill ({farba: [180, 0, 0, 0,3]}); var stroke = new ol.style. Stroke ({farba: [180, 0, 0, 1], width: 1});
Krok 2. Vytvorte štýl a naneste ho na vrstvu
Objekt štýlu OpenLayers je dosť výkonný, ale zatiaľ nastavíme iba výplň a ťah:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (štýl);
