OpenLayers je moćan JavaScript alat koji nam omogućuje stvaranje i prikaz svih vrsta karata na web stranici. Ovaj članak će vas voditi u dodavanju funkcije točke i niza linija, zatim transformirati njihove projekcije tako da koriste koordinate, a zatim dodati boju postavljanjem stila sloja.
Imajte na umu da za praćenje ovog članka trebate imati radnu OpenLayers kartu instaliranu na web stranici. Ako ga nemate, pogledajte Kako napraviti kartu koristeći OpenLayers 3.
Koraci
Dio 1 od 3: Dodavanje značajki niza točaka i linija
Korak 1. Kreirajte funkciju tačke
Jednostavno kopirajte sljedeći red koda u svoj
element:
var point_feature = nova ol. Feature ({});
Korak 2. Postavite geometriju tačke
Da biste OpenLayersu rekli gdje postaviti točku, morate stvoriti geometriju i dati joj skup koordinata, što je niz u obliku [dužina (E-Z), širina (N-S)]). Sljedeći kod stvara ovo i postavlja geometriju tačke:
var point_geom = novi ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Korak 3. Kreirajte funkciju nizova linije
Nizovi linija su ravne linije razbijene na segmente. Mi ih stvaramo kao točke, ali za svaku točku niza linija dajemo par koordinata:
var linestring_feature = nova ol. Feature ({geometrija: nova ol.geom. LineString (
Korak 4. Dodajte značajke vektorskom sloju
Da biste dodali značajke na mapu, morate ih dodati izvoru, koji dodate vektorskom sloju, koji zatim možete dodati na kartu:
var vector_layer = novi ol.layer. Vector ({izvor: novi ol.source. Vector ({karakteristike: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Dio 2 od 3: Transformiranje geometrije značajki za korištenje koordinata
Kao i svaki moćan softver za mapiranje, OpenLayers karte mogu imati različite slojeve s različitim načinima prikaza informacija. Budući da je Zemlja globus, a ne ravna, softver koji pokušavamo prikazati na našim ravnim kartama mora softver prilagoditi lokacije tako da odgovaraju ravnoj karti. Zovu se ovi različiti načini za prikaz informacija o karti projekcije. Da bismo koristili vektorski sloj i sloj pločice zajedno na istoj karti znači da moramo transformirati slojeve iz jedne projekcije u drugu.
Korak 1. Stavite funkcije u niz
Započinjemo stavljanjem funkcija koje želimo transformirati zajedno u niz kroz koji možemo iteratirati.
var features = [point_feature, linestring_feature];
Korak 2. Napišite funkciju transformacije
U OpenLayers -u možemo koristiti funkciju transform () na geometrijskom objektu svake značajke. Stavite ovaj kod za pretvaranje u funkciju koju možemo pozvati kasnije:
funkcija transform_geometry (element) {var current_projection = new ol.proj. Projection ({kod: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (trenutna_projekcija, nova_projekcija);); }
Korak 3. Pozovite funkciju transformacije na značajkama
Sada jednostavno ponovite niz.
features.forEach (transform_geometry);
3. dio 3: Postavljanje stila vektorskog sloja
Da bismo promijenili izgled svake značajke na karti, moramo stvoriti i primijeniti stil. Stilovi mogu promijeniti boje, veličine i druge atribute točaka i linija, a mogu prikazati i slike za svaku točku, što je vrlo zgodno za prilagođene karte. Ovaj odjeljak nije potreban, ali je zabavan i koristan.
Korak 1. Kreirajte fill and stoke
Kreirajte objekt u stilu ispune i poluprozirnu crvenu boju te stil poteza (linije) koji je puna crvena linija:
var fill = novi ol.style. Fill ({boja: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({boja: [180, 0, 0, 1], širina: 1});
Korak 2. Kreirajte stil i primijenite ga na sloj
Objekt u stilu OpenLayers je prilično moćan, ali zasad ćemo postaviti samo ispunu i potez:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (style);
