OpenLayers je močno orodje JavaScript, ki nam omogoča ustvarjanje in prikaz vseh vrst zemljevidov na spletnem mestu. Ta članek vas bo vodil pri dodajanju funkcije točke in niza črte, nato pa njihove projekcije pretvorite v koordinate, nato pa dodajte nekaj barve z nastavitvijo sloga plasti.
Upoštevajte, da morate za spremljanje tega članka imeti delujoč zemljevid OpenLayers na spletni strani. Če ga nimate, glejte Kako narediti zemljevid z uporabo OpenLayers 3.
Koraki
1. del od 3: Dodajanje funkcij nizov točk in linij
Korak 1. Ustvarite funkcijo točke
Preprosto kopirajte naslednjo vrstico kode v svojo
element:
var point_feature = nova ol. Feature ({});
Korak 2. Nastavite geometrijo točke
Če želite OpenLayers-u povedati, kje postaviti točko, morate ustvariti geometrijo in ji dati niz koordinat, ki je matrika v obliki [zemljepisna dolžina (E-Z), zemljepisna širina (N-S)]). Naslednja koda ustvari to in nastavi geometrijo točke:
var point_geom = nova ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Korak 3. Ustvarite funkcijo niza vrstice
Vrstice so ravne črte, razdeljene na odseke. Ustvarjamo jih tako kot točke, vendar za vsako točko vrstice podamo par koordinat:
var linestring_feature = nova ol. Feature ({geometrija: nova ol.geom. LineString (
Korak 4. Dodajte funkcije v vektorsko plast
Če želite dodati lastnosti na zemljevid, jih morate dodati v vir, ki ga dodate v vektorsko plast, ki jo lahko nato dodate na zemljevid:
var vector_layer = nov ol.layer. Vector ({vir: nov ol.source. Vector ({funkcije: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
2. del 3: Preoblikovanje geometrij elementov za uporabo koordinat
Tako kot vsaka zmogljiva programska oprema za kartiranje imajo lahko zemljevidi OpenLayers različne plasti z različnimi načini prikaza informacij. Ker je Zemlja globus in ni ravna, mora programska oprema, ko jo poskušamo prikazati na naših ravnih zemljevidih, prilagoditi lokacije, da se ujemajo z ravnim zemljevidom. Ti različni načini prikaza informacij o zemljevidu se imenujejo projekcije. Če uporabljamo vektorsko plast in plast ploščice skupaj na istem zemljevidu, moramo plasti preoblikovati iz ene projekcije v drugo.
Korak 1. Postavite funkcije v matriko
Začnemo tako, da funkcije, ki jih želimo preoblikovati, postavimo v matriko, ki jo lahko ponavljamo.
var lastnosti = [point_feature, linestring_feature];
Korak 2. Napišite funkcijo preoblikovanja
V OpenLayersu lahko uporabimo funkcijo transform () na objektu geometrije vsake funkcije. To pretvorbeno kodo postavite v funkcijo, ki jo lahko pokličemo pozneje:
funkcija transform_geometry (element) {var current_projection = new ol.proj. Projection ({koda: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (trenutna_projekcija, nova_projekcija);); }
Korak 3. Pokličite funkcijo preoblikovanja na funkcijah
Zdaj preprosto ponovite matriko.
features.forEach (transform_geometry);
3. del 3: Nastavitev sloga vektorske plasti
Če želimo spremeniti, kako izgleda vsaka funkcija na zemljevidu, moramo ustvariti in uporabiti slog. Slogi lahko spremenijo barve, velikosti in druge atribute točk in črt, prikažejo pa lahko tudi slike za vsako točko, kar je zelo priročno za zemljevide po meri. Ta razdelek ni potreben, je pa zabaven in uporaben.
Korak 1. Ustvarite fill and stoke
Ustvarite objekt v slogu polnila in polprozorno rdečo barvo ter slog črte, ki je polna rdeča črta:
var fill = nov ol.style. Fill ({barva: [180, 0, 0, 0,3]}); var stroke = new ol.style. Stroke ({barva: [180, 0, 0, 1], širina: 1});
Korak 2. Ustvarite slog in ga uporabite za plast
Objekt v slogu OpenLayers je precej močan, vendar bomo za zdaj nastavili samo polnilo in potezo:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (slog);
