OpenLayers- ը հզոր JavaScript գործիք է, որը մեզ հնարավորություն է տալիս ստեղծել և ցուցադրել վեբ կայքում բոլոր տեսակի քարտեզներ: Այս հոդվածը կառաջնորդի ձեզ ավելացնել կետ և գծի տող հատկություն, այնուհետև փոխեք դրանց կանխատեսումները `կոորդինատներ օգտագործելու համար, այնուհետև որոշ գույն ավելացրեք` սահմանելով շերտի ոճը:
Խնդրում ենք նկատի ունենալ, որ այս հոդվածին հետևելու համար ձեզ հարկավոր է տեղադրել OpenLayers քարտեզ վեբ էջում: Եթե չունեք, տե՛ս Ինչպես կազմել քարտեզ OpenLayers- ի միջոցով 3:
Քայլեր
Մաս 1 -ը 3 -ից. Կետի և գծի տողի առանձնահատկությունների ավելացում
Քայլ 1. Ստեղծեք կետային հատկություն:
Պարզապես պատճենեք հետևյալ տողի ծածկագիրը ձեր մեջ
տարր:
var point_feature = new ol. Առանձնահատկություն ({});
Քայլ 2. Սահմանեք կետի երկրաչափությունը:
OpenLayers- ին ասելու համար, թե որտեղ պետք է տեղադրել կետը, պետք է ստեղծել երկրաչափություն և տալ կոորդինատների մի շարք, որը զանգված է ՝ [երկայնություն (E-W), լայնություն (N-S)] տեսքով: Հետևյալ ծածկագիրը ստեղծում է սա և սահմանում կետի երկրաչափությունը.
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Քայլ 3. Ստեղծեք տողի տողի գործառույթ:
Տողերի տողերը ուղիղ գծեր են, որոնք բաժանված են հատվածների: Մենք դրանք ստեղծում ենք կետերի պես, բայց տողերի տողի յուրաքանչյուր կետի համար տալիս ենք զույգ կոորդինատներ.
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Քայլ 4. Ավելացրեք հատկությունները վեկտորային շերտի վրա:
Քարտեզին հատկանիշներ ավելացնելու համար անհրաժեշտ է դրանք ավելացնել աղբյուրին, որը դուք ավելացնում եք վեկտորային շերտին, որը կարող եք ավելացնել քարտեզի վրա.
var vector_layer = new ol.layer. Vector ({աղբյուրը ՝ նոր ol.source. Vector ({առանձնահատկությունները. [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Մաս 2 -ից 3 -ը. Առանձնահատկությունների երկրաչափության փոխակերպում կոորդինատների օգտագործման համար
Ինչպես ցանկացած հզոր քարտեզագրման ծրագրակազմի դեպքում, OpenLayers քարտեզները կարող են ունենալ տարբեր շերտեր ՝ տեղեկատվության ցուցադրման տարբեր եղանակներով: Քանի որ Երկիրը մոլորակ է և ոչ հարթ, երբ մենք փորձում ենք այն ցուցադրել մեր հարթ քարտեզների վրա, ծրագրակազմը պետք է հարմարեցնի տեղերը ՝ համընկնելով հարթ քարտեզի հետ: Քարտեզի տեղեկատվությունը ցուցադրելու այս տարբեր եղանակները կոչվում են կանխատեսումներ. Վեկտորային շերտը և սալիկի շերտը նույն քարտեզի վրա միասին օգտագործելու համար նշանակում է, որ մենք պետք է շերտերը փոխակերպենք մեկ պրոյեկցիայից մյուսը:
Քայլ 1. Տեղադրեք հատկությունները զանգվածի մեջ:
Մենք սկսում ենք այն հատկությունները, որոնք մենք ցանկանում ենք փոխակերպել միասին, դնելով զանգվածի, որի միջոցով մենք կարող ենք կրկնվել:
var հատկություններ = [point_feature, linestring_feature];
Քայլ 2. Գրիր փոխակերպման գործառույթը:
OpenLayers- ում մենք կարող ենք օգտագործել transform () գործառույթը յուրաքանչյուր հատկության երկրաչափական օբյեկտի վրա: Տեղադրեք այս փոխակերպման կոդը այնպիսի գործառույթի մեջ, որը մենք կարող ենք հետագայում կանչել.
գործառույթ transform_geometry (տարր) {var current_projection = new ol.proj. Projection ({կոդը ՝ "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (ընթացիկ_նախագիծ, նոր_նախագիծ);); }
Քայլ 3. Callանգահարեք գործառույթների վերափոխման գործառույթը:
Այժմ պարզապես կրկնել զանգվածի միջոցով:
features.forEach (transform_geometry);
3 -րդ մաս 3 -ից. Վեկտորի շերտի ոճը սահմանելը
Քարտեզի յուրաքանչյուր հատկանիշի տեսքը փոխելու համար մենք պետք է ստեղծենք և կիրառենք ոճ: Ոճերը կարող են փոխել գույները, չափերը և կետերի և գծերի այլ հատկանիշները, ինչպես նաև կարող են պատկերներ ցուցադրել յուրաքանչյուր կետի համար, ինչը շատ հարմար է հարմարեցված քարտեզների համար: Այս բաժինը պարտադիր չէ, բայց զվարճալի և օգտակար է:
Քայլ 1. Ստեղծեք լցոնն ու ստոկը:
Ստեղծեք լրացման ոճի առարկա և կիսաթափանցիկ կարմիր գույն, և հարվածի (գծի) ոճ, որը կոշտ կարմիր գիծ է.
var fill = new ol.style. Fill ({գույնը ՝ [180, 0, 0, 0.3]}); var հարված = new ol.style. Stroke ({գույնը ՝ [180, 0, 0, 1], լայնությունը ՝ 1});
Քայլ 2. Ստեղծեք ոճը և կիրառեք այն շերտին:
OpenLayers ոճի օբյեկտը բավականին հզոր է, բայց մենք այժմ միայն սահմանում ենք լրացումն ու հարվածը.
var style = new ol.style. Style ({պատկերը ՝ new ol.style. Circle ({լրացնել. լրացնել, հարվածել, հարվածել, շառավիղը ՝ 8}), լրացնել ՝ լցնել, հարվածել ՝ հարվածել}); vector_layer.setStyle (ոճ);
