OpenLayers este un puternic instrument JavaScript care ne permite să creăm și să afișăm tot felul de hărți pe un site web. Acest articol vă va ghida în adăugarea unui punct și a unei caracteristici de șir de linie, apoi transformați proiecțiile acestora pentru a utiliza coordonatele, apoi adăugați o anumită culoare prin setarea stilului stratului.
Vă rugăm să rețineți că trebuie să aveți instalată o hartă OpenLayers funcțională într-o pagină web pentru a urma acest articol. Dacă nu aveți una, consultați Cum să creați o hartă folosind OpenLayers 3.
Pași
Partea 1 din 3: Adăugarea caracteristicilor punctului și șirului de linii
Pasul 1. Creați o caracteristică punct
Pur și simplu copiați următoarea linie de cod în
element:
var point_feature = new ol. Feature ({});
Pasul 2. Setați geometria punctului
Pentru a spune OpenLayers unde trebuie plasat punctul, trebuie să creați o geometrie și să îi dați un set de coordonate, care este o matrice sub forma [longitudine (E-W), latitudine (N-S)]. Următorul cod creează acest lucru și setează geometria punctului:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Pasul 3. Creați o caracteristică de șir de linii
Șirurile de linie sunt linii drepte împărțite în segmente. Le creăm exact ca punctele, dar oferim o pereche de coordonate pentru fiecare punct al șirului de linii:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Pasul 4. Adăugați caracteristicile unui strat vector
Pentru a adăuga caracteristicile pe hartă, trebuie să le adăugați la o sursă, pe care să o adăugați la un strat vector, pe care să le puteți adăuga apoi pe hartă:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Partea 2 din 3: Transformarea geometriilor caracteristicilor pentru a utiliza coordonatele
Ca și în cazul oricărui software puternic de cartografiere, hărțile OpenLayers pot avea diferite straturi cu diferite moduri de afișare a informațiilor. Deoarece Pământul este un glob și nu plat, atunci când încercăm să-l afișăm pe hărțile noastre plate, software-ul trebuie să regleze locațiile pentru a se potrivi cu harta plată. Aceste modalități diferite de a afișa informații despre hartă sunt numite proiecții. A folosi un strat vector și un strat de țiglă împreună pe aceeași hartă înseamnă că trebuie să transformăm straturile de la o proiecție la alta.
Pasul 1. Puneți caracteristicile într-o matrice
Începem prin a pune caracteristicile pe care dorim să le transformăm împreună într-o matrice prin care putem itera.
caracteristici var = [caracteristică_punct, caracteristică_linestring];
Pasul 2. Scrieți funcția de transformare
În OpenLayers, putem folosi funcția transform () pe obiectul de geometrie al fiecărei caracteristici. Puneți acest cod de transformare într-o funcție pe care o putem numi mai târziu:
function transform_geometry (element) {var current_projection = new ol.proj. Projection ({cod: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (proiecție_ curentă, proiecție_ nouă);); }
Pasul 3. Apelați funcția de transformare pe caracteristici
Acum pur și simplu iterați prin matrice.
features.forEach (transform_geometry);
Partea 3 din 3: Setarea stilului straturilor vectoriale
Pentru a schimba cum arată fiecare caracteristică de pe hartă, trebuie să creăm și să aplicăm un stil. Stilurile pot schimba culorile, dimensiunile și alte atribute ale punctelor și liniilor și pot afișa, de asemenea, imagini pentru fiecare punct, ceea ce este foarte util pentru hărțile personalizate. Această secțiune nu este necesară, dar este distractivă și utilă.
Pasul 1. Creați umplutura și stoke
Creați un obiect de stil de umplere și o culoare roșie semi-transparentă și un stil de linie (linie) care este o linie roșie continuă:
var fill = new ol.style. Fill ({culoare: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({culoare: [180, 0, 0, 1], lățime: 1});
Pasul 2. Creați stilul și aplicați-l pe strat
Obiectul de stil OpenLayers este destul de puternic, dar vom seta doar umplerea și linia deocamdată:
var style = new ol.style. Style ({imagine: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (stil);
