Kako dodati vektorske značajke na OpenLayers 3 kartu (sa slikama)

Sadržaj:

Kako dodati vektorske značajke na OpenLayers 3 kartu (sa slikama)
Kako dodati vektorske značajke na OpenLayers 3 kartu (sa slikama)

Video: Kako dodati vektorske značajke na OpenLayers 3 kartu (sa slikama)

Video: Kako dodati vektorske značajke na OpenLayers 3 kartu (sa slikama)
Video: 35 видео со страшными призраками: мегасборник 2023 года [V1] 2024, Ožujak
Anonim

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 značajke 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 pomoću OpenLayersa 3.

Koraci

1. dio od 3: Dodavanje značajki niza točaka i linija

Korak 1. Izradite značajku točke

Jednostavno kopirajte sljedeći redak koda u svoj

element:

var point_feature = nova ol. Feature ({});

Korak 2. Postavite geometriju točke

Da biste OpenLayerima rekli gdje postaviti točku, morate stvoriti geometriju i dati joj skup koordinata, što je niz u obliku [zemljopisna dužina (E-Z), zemljopisna širina (N-S)]). Sljedeći kôd stvara ovo i postavlja geometriju točke:

var point_geom = novi ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);

Korak 3. Izradite značajku niza retka

Nizovi linija su ravne linije razbijene na segmente. Mi ih stvaramo baš poput točaka, ali za svaku točku niza linija dajemo par koordinata:

var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (

Korak 4. Dodajte značajke vektorskom sloju

Da biste dodali značajke na kartu, 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 ({značajke: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);

Dio 2 od 3: Transformiranje geometrije značajki pomoću koordinata

Kao i svaki moćan softver za mapiranje, karte OpenLayers 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 prilagoditi lokacije tako da odgovaraju ravnoj karti. Zovu se ti različiti načini za prikaz informacija o karti projekcije. Za korištenje vektorskog sloja i sloja pločice zajedno na istoj karti znači da moramo transformirati slojeve iz jedne projekcije u drugu.

Korak 1. Stavite značajke u niz

Započinjemo stavljanjem značajki koje želimo transformirati zajedno u niz kroz koji možemo ponavljati.

var features = [point_feature, linestring_feature];

Korak 2. Napišite funkciju pretvaranja

U OpenLayersima 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);

Dio 3 od 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 nužan, ali je zabavan i koristan.

Korak 1. Izradite fill and stoke

Izradite 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. Izradite 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);

Preporučeni: