OpenLayers on tehokas JavaScript -työkalu, jonka avulla voimme luoda ja näyttää kaikenlaisia karttoja verkkosivustolla. Tämä artikkeli opastaa piste- ja viivaominaisuusominaisuuden lisäämisessä, muuttaa niiden projektiot koordinaateiksi ja lisää sitten väriä asettamalla tason tyylin.
Huomaa, että sinun on asennettava toimiva OpenLayers -kartta verkkosivulle, jotta voit seurata tätä artikkelia. Jos sinulla ei ole sitä, katso Kartan luominen OpenLayers 3: lla.
Askeleet
Osa 1/3: Piste- ja viivaominaisuuksien lisääminen
Vaihe 1. Luo pisteominaisuus
Kopioi vain seuraava koodirivi omaan
elementti:
var point_feature = new ol. Feature ({});
Vaihe 2. Aseta pisteen geometria
Jos haluat kertoa OpenLayersille, mihin piste sijoitetaan, sinun on luotava geometria ja annettava sille joukko koordinaatteja, joka on matriisi muodossa [pituusaste (E-W), leveysaste (N-S)]. Seuraava koodi luo tämän ja asettaa pisteen geometrian:
var point_geom = uusi ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Vaihe 3. Luo rivijono -ominaisuus
Viivajonot ovat suoria viivoja, jotka on jaettu osiin. Luomme ne aivan kuten pisteitä, mutta tarjoamme koordinaattiparin kullekin viivajonon pisteelle:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Vaihe 4. Lisää ominaisuudet vektorikerrokseen
Jos haluat lisätä ominaisuuksia kartalle, sinun on lisättävä ne lähteeseen, jonka lisäät vektorikerrokseen, jonka voit sitten lisätä karttaan:
var vector_layer = new ol.layer. Vector ({lähde: new ol.source. Vector ({ominaisuudet: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Osa 2/3: Ominaisuuksien geometrian muuttaminen koordinaattien käyttämiseksi
Kuten kaikilla tehokkailla kartoitusohjelmistoilla, OpenLayers -kartoissa voi olla erilaisia kerroksia ja eri tapoja näyttää tietoja. Koska Maa on maapallo eikä litteä, ohjelmiston on säädettävä sijainteja tasaiselle kartalle, kun yritämme näyttää sen tasaisilla kartoillamme. Näitä eri tapoja näyttää karttatietoja kutsutaan ennusteet. Vektorikerroksen ja laattakerroksen käyttäminen yhdessä samalla kartalla tarkoittaa, että meidän on muutettava kerrokset projektioista toiseen.
Vaihe 1. Laita ominaisuudet taulukkoon
Aloitamme asettamalla muunnettavat ominaisuudet yhteen taulukkoksi, jonka kautta voimme iteroida.
var piirteet = [piste_ominaisuus, linringring_feature];
Vaihe 2. Kirjoita muunnosfunktio
OpenLayersissa voimme käyttää transform () -funktiota kunkin ominaisuuden geometriaobjektissa. Laita tämä muunnoskoodi funktioksi, jonka voimme kutsua myöhemmin:
function transform_geometry (element) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Vaihe 3. Kutsu toimintojen muuntotoiminto
Toista nyt yksinkertaisesti taulukon läpi.
features.forEach (transform_geometry);
Osa 3/3: Vektorikerroksen tyylin asettaminen
Jotta voimme muuttaa miltä jokainen kartan ominaisuus näyttää, meidän on luotava tyyli ja otettava se käyttöön. Tyylit voivat muuttaa pisteiden ja viivojen värejä, kokoja ja muita määritteitä, ja ne voivat myös näyttää kuvia jokaisesta pisteestä, mikä on erittäin kätevää mukautetuissa kartoissa. Tämä osio ei ole välttämätön, mutta se on hauska ja hyödyllinen.
Vaihe 1. Luo täyttö ja stoke
Luo täyttötyylinen objekti ja puoliksi läpinäkyvä punainen väri sekä viiva (viiva) -tyyli, joka on kiinteä punainen viiva:
var fill = new ol.style. Fill ({väri: [180, 0, 0, 0,3]}); var stroke = new ol.style. Stroke ({väri: [180, 0, 0, 1], leveys: 1});
Vaihe 2. Luo tyyli ja käytä sitä tasossa
OpenLayers -tyyliobjekti on melko voimakas, mutta asetamme täydennyksen ja viivan vain toistaiseksi:
var style = new ol.style. Style ({kuva: new ol.style. Circle ({fill: fill, stroke, stroke: säde: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (tyyli);
