OpenLayers on võimas JavaScripti tööriist, mis võimaldab meil veebisaidil luua ja kuvada igasuguseid kaarte. See artikkel juhendab teid punkti ja joone stringi lisamisel, seejärel muudab nende projektsioonid koordinaatide kasutamiseks ja lisab seejärel värvi, määrates kihi stiili.
Pange tähele, et selle artikli järgimiseks peab veebisaidile olema installitud töötav OpenLayersi kaart. Kui teil seda pole, vaadake jaotist Kuidas teha kaarti OpenLayers 3 abil.
Sammud
Osa 1 /3: Punkti ja joone stringide lisamine
Samm 1. Looge punktfunktsioon
Kopeerige lihtsalt järgmine koodirida oma
element:
var point_feature = uus ol. Feature ({});
Samm 2. Määrake punkti geomeetria
Et öelda OpenLayersile, kuhu punkt paigutada, peate looma geomeetria ja andma sellele koordinaatide komplekti, mis on massiiv kujul [pikkuskraad (E-W), laiuskraad (N-S)]. Järgmine kood loob selle ja määrab punkti geomeetria:
var point_geom = uus ol.geom. Point ([20, 20]); point_feature.setGeometry (punkt_geom);
Samm 3. Loo rea stringi funktsioon
Joonte stringid on sirgjooned, mis on jaotatud segmentideks. Loome need täpselt nagu punktid, kuid anname rea joone iga punkti jaoks koordinaatide paari:
var linestring_feature = uus ol. Feature ({geomeetria: uus ol.geom. LineString (
Samm 4. Lisage funktsioonid vektorkihile
Funktsioonide lisamiseks kaardile peate need lisama allikale, mille lisate vektorkihile, mille saate seejärel kaardile lisada:
var vector_layer = new ol.layer. Vector ({allikas: new ol.source. Vector ({features: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Osa 2/3: funktsioonide geomeetria muutmine koordinaatide kasutamiseks
Nagu iga võimas kaardistamistarkvara, võib ka OpenLayersi kaartidel olla erinevaid kihte ja erinevaid teabe kuvamise viise. Kuna Maa on maakera ja mitte tasane, peab tarkvara, kui proovime seda oma tasastel kaartidel kuvada, kohandada tarkvara asukohti tasase kaardiga. Neid erinevaid kaarditeabe kuvamise viise nimetatakse prognoosid. Vektorkihi ja plaadikihi kasutamine samal kaardil tähendab, et peame kihid ühest projektsioonist teise teisendama.
Samm 1. Pange funktsioonid massiivi
Alustuseks paneme funktsioonid, mida tahame teisendada, kokku massiiviks, mille kaudu saame iteratiivselt edasi liikuda.
var features = [punkti_funktsioon, linestringi_funktsioon];
Samm 2. Kirjutage teisendusfunktsioon
OpenLayersis saame iga funktsiooni geomeetriaobjektil kasutada funktsiooni transform (). Pange see teisenduskood funktsiooniks, mida saame hiljem helistada:
function transform_geometry (element) {var current_projection = new ol.proj. Projection ({kood: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Samm 3. Helistage funktsioonide teisendusfunktsioonile
Nüüd korrake lihtsalt massiivi.
features.forEach (transform_geometry);
Osa 3 /3: Vektorkihi stiili seadmine
Kaardi iga funktsiooni väljanägemise muutmiseks peame looma ja rakendama stiili. Stiilid võivad muuta punktide ja joonte värve, suurusi ja muid atribuute ning kuvada ka iga punkti pilte, mis on kohandatud kaartide jaoks väga mugav. See jaotis pole vajalik, kuid lõbus ja kasulik.
Samm 1. Looge täitmine ja täitmine
Looge täitmislaadne objekt ja poolläbipaistev punane värv ning kriips (joon) stiil, mis on ühtlane punane joon:
var fill = new ol.style. Fill ({värv: [180, 0, 0, 0,3]}); var insult = new ol.style. Stroke ({värv: [180, 0, 0, 1], laius: 1});
Samm 2. Looge stiil ja rakendage see kihile
OpenLayersi stiiliobjekt on üsna võimas, kuid praegu määrame ainult täitmise ja joone:
var style = new ol.style. Style ({pilt: uus ol.style. Circle ({fill: fill, stroke, insult, raadius: 8}), fill: fill, insult: insult}); vector_layer.setStyle (stiil);
