OpenLayers je výkonný nástroj JavaScript, který nám umožňuje vytvářet a zobrazovat nejrůznější mapy na webových stránkách. Tento článek vás provede přidáním funkce bodu a řetězce čáry, poté transformuje jejich projekce tak, aby používaly souřadnice, a poté přidá barvu nastavením stylu vrstvy.
Chcete -li postupovat podle tohoto článku, musíte mít na webové stránce nainstalovanou funkční mapu OpenLayers. Pokud ji nemáte, podívejte se na Jak vytvořit mapu pomocí OpenLayers 3.
Kroky
Část 1 ze 3: Přidání funkcí řetězců bodů a čar
Krok 1. Vytvořte bodovou funkci
Jednoduše zkopírujte následující řádek kódu do souboru
živel:
var point_feature = new ol. Feature ({});
Krok 2. Nastavte geometrii bodu
Chcete-li sdělit OpenLayers, kam umístit bod, musíte vytvořit geometrii a dát jí sadu souřadnic, což je pole ve tvaru [zeměpisná délka (E-W), zeměpisná šířka (N-S)]. Následující kód to vytvoří a nastaví geometrii bodu:
var point_geom = nový ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Krok 3. Vytvořte funkci řetězce řádku
Řetězce jsou přímé čáry rozdělené na segmenty. Vytváříme je stejně jako body, ale poskytujeme dvojici souřadnic pro každý bod řetězce řádku:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Krok 4. Přidejte funkce do vektorové vrstvy
Chcete -li přidat funkce na mapu, musíte je přidat do zdroje, který přidáte do vektorové vrstvy, kterou pak můžete přidat do mapy:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]}))}) map.addLayer (vector_layer);
Část 2 ze 3: Transformace geometrií prvků na použití souřadnic
Jako u každého výkonného mapovacího softwaru mohou mít mapy OpenLayers různé vrstvy s různými způsoby zobrazování informací. Protože je Země zeměkoule a není plochá, musí se software při pokusu o její zobrazení na našich plochých mapách přizpůsobit umístění tak, aby odpovídalo ploché mapě. Tyto různé způsoby zobrazení informací na mapě se nazývají projekce. Chcete -li použít vektorovou vrstvu a vrstvu dlaždic společně na stejné mapě, znamená to, že musíme transformovat vrstvy z jedné projekce do druhé.
Krok 1. Vložte funkce do pole
Začneme tím, že funkce, které chceme transformovat, dáme dohromady do pole, které můžeme iterovat.
var features = [point_feature, linestring_feature];
Krok 2. Napište funkci transformace
V OpenLayers můžeme použít funkci transform () na geometrickém objektu každého prvku. Vložte tento transformační kód do funkce, kterou můžeme zavolat později:
funkce 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. Zavolejte funkci transformace funkcí
Nyní jednoduše opakujte pole.
features.forEach (transform_geometry);
Část 3 ze 3: Nastavení stylu vektorové vrstvy
Abychom mohli změnit vzhled jednotlivých prvků na mapě, musíme vytvořit a použít styl. Styly mohou měnit barvy, velikosti a další atributy bodů a čar a mohou také zobrazovat obrázky pro každý bod, což je velmi užitečné pro přizpůsobené mapy. Tato část není nutná, ale je zábavná a užitečná.
Krok 1. Vytvořte výplň a přidejte
Vytvořte objekt stylu výplně a poloprůhlednou červenou barvu a styl tahu (čáry), který je plnou červenou čarou:
var fill = new ol.style. Fill ({barva: [180, 0, 0, 0,3]}); var tah = nový ol.style. Stroke ({barva: [180, 0, 0, 1], šířka: 1});
Krok 2. Vytvořte styl a aplikujte jej na vrstvu
Objekt stylu OpenLayers je poměrně silný, ale zatím nastavíme pouze výplň a tah:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (styl);
