OpenLayers është një mjet i fuqishëm JavaScript që na mundëson të krijojmë dhe shfaqim të gjitha llojet e hartave në një faqe në internet. Ky artikull do t'ju udhëzojë në shtimin e një pike dhe një veçori të vargut të vijës, pastaj transformoni parashikimet e tyre për të përdorur koordinatat, pastaj shtoni pak ngjyrë duke vendosur stilin e shtresës.
Ju lutemi vini re se ju duhet të keni një hartë të hapur të OpenLayers të instaluar në një faqe në internet për të ndjekur këtë artikull. Nëse nuk keni një, shihni Si të bëni një hartë duke përdorur OpenLayers 3.
Hapa
Pjesa 1 nga 3: Shtimi i Veçorive të Vargut të Pikës dhe Linjës
Hapi 1. Krijoni një veçori pikë
Thjesht kopjoni rreshtin e mëposhtëm të kodit në tuaj
element:
var pika_feature = ol e re. Karakteristikë ({});
Hapi 2. Vendosni gjeometrinë e pikës
Për t'i treguar OpenLayers se ku ta vendosni pikën, duhet të krijoni një gjeometri dhe t'i jepni asaj një sërë koordinatash, e cila është një grup në formën e [gjatësisë gjeografike (E-W), gjerësisë gjeografike (N-S)]. Kodi i mëposhtëm krijon këtë dhe vendos gjeometrinë e pikës:
var point_geom = ol.geom i ri. Pika ([20, 20]); karakteristika_pika.setGeometria (pika_geom);
Hapi 3. Krijoni një veçori të vargut të linjës
Vargjet e vijave janë linja të drejta të ndara në segmente. Ne i krijojmë ato njësoj si pikat, por sigurojmë një palë koordinata për secilën pikë të vargut të vijës:
var linestring_feature = ol. Feature i ri ({gjeometria: new ol.geom. LineString (
Hapi 4. Shtoni veçoritë në një shtresë vektoriale
Për të shtuar veçoritë në hartë, duhet t'i shtoni në një burim, të cilin e shtoni në një shtresë vektoriale, të cilën më pas mund ta shtoni në hartë:
var vector_layer = ol.layer. Vector i ri ({burimi: ol.source. Vector i ri ({veçoritë: [pika_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Pjesa 2 nga 3: Transformimi i gjeometrive të veçorive për të përdorur koordinatat
Ashtu si me çdo softuer të fuqishëm të hartës, hartat OpenLayers mund të kenë shtresa të ndryshme me mënyra të ndryshme të shfaqjes së informacionit. Për shkak se Toka është një glob dhe jo e sheshtë, kur përpiqemi ta shfaqim atë në hartat tona të sheshta, softueri duhet të rregullojë vendndodhjet që të përputhen me hartën e sheshtë. Këto mënyra të ndryshme për të shfaqur informacionin e hartës quhen projeksionet Me Për të përdorur një shtresë vektoriale dhe një shtresë tjegull së bashku në të njëjtën hartë do të thotë që ne duhet të transformojmë shtresat nga një projeksion në tjetrin.
Hapi 1. Vendosni veçoritë në një grup
Ne fillojmë duke vënë veçoritë që duam të transformojmë së bashku në një grup që ne mund t'i përsërisim.
var veçoritë = [tipar_pikës, tipar_i linjës];
Hapi 2. Shkruani funksionin e transformimit
Në OpenLayers, ne mund të përdorim funksionin transform () në objektin gjeometrik të secilës veçori. Vendoseni këtë kod transformimi në një funksion që mund ta thërrasim më vonë:
funksioni transform_geometri (element) {var current_projection = new ol.proj. Project ({kodi: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transformo (projeksioni aktual, projekti i ri);); }
Hapi 3. Thirrni funksionin transformues në veçoritë
Tani thjesht përsërisni përmes grupit.
veçoritë.përÇdo (transformim_ gjeometri);
Pjesa 3 nga 3: Vendosja e stilit të shtresës vektoriale
Për të ndryshuar se si duket secila veçori në hartë, duhet të krijojmë dhe zbatojmë një stil. Stilet mund të ndryshojnë ngjyrat, madhësitë dhe atributet e tjera të pikave dhe linjave, dhe gjithashtu mund të shfaqin imazhe për secilën pikë, e cila është shumë e përshtatshme për hartat e personalizuara. Ky seksion nuk është i nevojshëm, por është argëtues dhe i dobishëm.
Hapi 1. Krijoni mbushjen dhe stokun
Krijoni një objekt të stilit të mbushjes dhe një ngjyrë të kuqe gjysmë transparente, dhe një stil goditjeje (vijë) që është një vijë e kuqe e fortë:
var mbush = ol.style. Fill i ri ({ngjyra: [180, 0, 0, 0.3]}); var goditje = ol.style. Stroke e re ({ngjyra: [180, 0, 0, 1], gjerësia: 1});
Hapi 2. Krijoni stilin dhe aplikojeni atë në shtresë
Objekti i stilit OpenLayers është mjaft i fuqishëm, por ne do të vendosim vetëm mbushjen dhe goditjen tani për tani:
var style = new ol.style. Style ({image: new ol.style. Circle ({mbush: mbush, goditje: goditje, rreze: 8}), mbush: mbush, goditje: goditje}); vector_layer.setStyle (stil);
