„OpenLayers“yra galingas „JavaScript“įrankis, leidžiantis sukurti ir rodyti visų rūšių žemėlapius svetainėje. Šis straipsnis padės jums pridėti taško ir linijos eilutės funkciją, tada pakeis jų projekcijas į koordinates, tada pridės spalvų, nustatydamas sluoksnio stilių.
Atminkite, kad norint sekti šį straipsnį tinklalapyje reikia įdiegti veikiantį „OpenLayers“žemėlapį. Jei to neturite, žr. Kaip sukurti žemėlapį naudojant „OpenLayers 3“.
Žingsniai
1 dalis iš 3: Taškų ir linijų eilučių funkcijų pridėjimas
Žingsnis 1. Sukurkite taškinę funkciją
Tiesiog nukopijuokite šią kodo eilutę į savo
elementas:
var point_feature = new ol. Feature ({});
Žingsnis 2. Nustatykite taško geometriją
Norėdami pasakyti „OpenLayers“, kur dėti tašką, turite sukurti geometriją ir suteikti jai koordinačių rinkinį, kuris yra [ilgumos (E-W), platumos (N-S)] formos masyvas. Šis kodas sukuria tai ir nustato taško geometriją:
var point_geom = naujas ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Žingsnis 3. Sukurkite eilutės eilutės funkciją
Linijų eilutės yra tiesios linijos, suskaidytos į segmentus. Mes juos kuriame kaip taškus, tačiau kiekvienai eilutės eilutės taškui pateikiame pora koordinačių:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Žingsnis 4. Pridėkite funkcijas prie vektorinio sluoksnio
Norėdami pridėti žemėlapio ypatybių, turite jas pridėti prie šaltinio, kurį pridėsite prie vektorinio sluoksnio, kurį galėsite pridėti prie žemėlapio:
var vector_layer = naujas ol.layer. Vector ({šaltinis: new ol.source. Vector ({funkcijos: [point_feature, linestring_feature]})}}) map.addLayer (vektorinis sluoksnis);
2 dalis iš 3: Funkcijų geometrijos pavertimas koordinatėmis
Kaip ir bet kuri galinga žemėlapių programinė įranga, „OpenLayers“žemėlapiai gali turėti skirtingus sluoksnius su skirtingais informacijos pateikimo būdais. Kadangi Žemė yra gaublys, o ne plokščia, kai bandome ją rodyti savo plokščiuose žemėlapiuose, programinė įranga turi pakoreguoti vietas, kad jos atitiktų plokščią žemėlapį. Šie skirtingi žemėlapio informacijos rodymo būdai vadinami projekcijos. Norėdami naudoti vektorinį sluoksnį ir plytelių sluoksnį kartu tame pačiame žemėlapyje, mes turime transformuoti sluoksnius iš vienos projekcijos į kitą.
Žingsnis 1. Įdėkite funkcijas į masyvą
Pradedame sudedant funkcijas, kurias norime paversti, į masyvą, kurį galime kartoti.
var funkcijos = [taško_funkcija, linijinės eilutės_funkcija];
Žingsnis 2. Parašykite transformavimo funkciją
„OpenLayers“kiekvienos funkcijos geometrijos objekte galime naudoti funkciją transform (). Įdėkite šį transformacijos kodą į funkciją, kurią galime paskambinti vėliau:
funkcija 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);); }
Žingsnis 3. Skambinkite funkcijų transformavimo funkcijai
Dabar tiesiog kartokite masyvą.
features.forEach (transform_geometry);
3 dalis iš 3: vektorinio sluoksnio stiliaus nustatymas
Norėdami pakeisti, kaip atrodo kiekviena žemėlapio funkcija, turime sukurti ir pritaikyti stilių. Stiliai gali pakeisti spalvas, dydžius ir kitus taškų ir linijų atributus, taip pat gali rodyti kiekvieno taško vaizdus, o tai labai patogu pritaikant žemėlapius. Šis skyrius nėra būtinas, bet įdomus ir naudingas.
Žingsnis 1. Sukurkite užpildą ir stoką
Sukurkite užpildymo stiliaus objektą ir pusiau skaidrią raudoną spalvą bei brūkšnio (linijos) stilių, kuris yra vientisa raudona linija:
var fill = new ol.style. Fill ({spalva: [180, 0, 0, 0,3]}); var insultas = naujas ol.style. Stroke ({spalva: [180, 0, 0, 1], plotis: 1});
Žingsnis 2. Sukurkite stilių ir pritaikykite jį sluoksniui
„OpenLayers“stiliaus objektas yra gana galingas, tačiau kol kas nustatysime tik užpildymą ir brūkšnį:
var stilius = naujas ol.style. Style ({vaizdas: new ol.style. Circle ({fill: fill, stroke, stroke: spindulys: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (stilius);
