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);
მე –3 ნაწილი 3: მახასიათებლების გეომეტრიის გარდაქმნა კოორდინატების გამოსაყენებლად
როგორც ნებისმიერი მძლავრი რუქების პროგრამული უზრუნველყოფა, OpenLayers რუქებს შეიძლება ჰქონდეთ განსხვავებული ფენები ინფორმაციის ჩვენების სხვადასხვა ხერხებით. იმის გამო, რომ დედამიწა გლობუსია და არა ბრტყელი, როდესაც ჩვენ ვცდილობთ გამოვავლინოთ იგი ჩვენს ბრტყელ რუქებზე, პროგრამულ უზრუნველყოფას უწევს ადგილების მორგება ბრტყელ რუკასთან შესატყვისი. რუქის ინფორმაციის ჩვენების ამ სხვადასხვა გზას ეწოდება პროგნოზები რა ვექტორული ფენისა და კრამიტის ფენის გამოყენება ერთსა და იმავე რუქაზე ნიშნავს, რომ ჩვენ უნდა გადავიყვანოთ ფენები ერთი პროექციიდან მეორეზე.
ნაბიჯი 1. ჩადეთ მახასიათებლები მასივში
ჩვენ ვიწყებთ იმ მახასიათებლების დაყენებით, რომელთა გადაკეთებაც ჩვენ გვსურს მასივად, რომლის გამეორებაც ჩვენ შეგვიძლია.
var მახასიათებლები = [წერტილი_ფუნქცია, ხაზის_ფუნქცია];
ნაბიჯი 2. დაწერეთ გარდაქმნის ფუნქცია
OpenLayers– ში ჩვენ შეგვიძლია გამოვიყენოთ transform () ფუნქცია თითოეული მახასიათებლის გეომეტრიის ობიექტზე. განათავსეთ ეს გარდაქმნის კოდი იმ ფუნქციაში, რომელსაც მოგვიანებით შეგვიძლია დავუძახოთ:
ფუნქცია transform_geometry (ელემენტი) {var current_projection = new ol.proj. Projection ({კოდი: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). გარდაქმნა (მიმდინარე_პროექცია, ახალი_პროექცია);); }
ნაბიჯი 3. დარეკეთ ტრანსფორმაციის ფუნქცია მახასიათებლებზე
ახლა უბრალოდ გაიმეორეთ მასივის საშუალებით.
მახასიათებლები. თითოეული (transform_geometry);
ნაწილი 3 3 -დან: ვექტორული ფენის სტილის დაყენება
იმის შესაცვლელად, თუ როგორ გამოიყურება თითოეული მახასიათებელი რუკაზე, ჩვენ უნდა შევქმნათ და გამოვიყენოთ სტილი. სტილებს შეუძლიათ შეცვალონ ფერები, ზომები და წერტილებისა და ხაზების სხვა ატრიბუტები და მათ ასევე შეუძლიათ გამოსახონ გამოსახულებები თითოეული წერტილისთვის, რაც ძალიან მოსახერხებელია მორგებული რუქებისთვის. ეს განყოფილება არ არის აუცილებელი, მაგრამ სახალისო და სასარგებლოა.
ნაბიჯი 1. შექმენით შევსება და სტოკი
შექმენით შევსების სტილის ობიექტი და ნახევრად გამჭვირვალე წითელი ფერი და ინსულტის (ხაზის) სტილი, რომელიც არის მყარი წითელი ხაზი:
var fill = new ol.style. Fill ({ფერი: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({ფერი: [180, 0, 0, 1], სიგანე: 1});
ნაბიჯი 2. შექმენით სტილი და გამოიყენეთ იგი ფენაზე
OpenLayers სტილის ობიექტი საკმაოდ მძლავრია, მაგრამ ჩვენ ახლა მხოლოდ შევსების და ინსულტის დაყენებას ვაპირებთ:
var style = new ol.style. Style ({სურათი: ახალი ol.style. Circle ({შევსება: შევსება, ინსულტი: ინსულტი, რადიუსი: 8}), შევსება: შევსება, ინსულტი: ინსულტი}); vector_layer.setStyle (სტილი);
