OpenLayers, bir veb saytında hər cür xəritələr yaratmağımıza və göstərməyimizə imkan verən güclü bir JavaScript vasitəsidir. Bu məqalə bir nöqtə və bir xətt simli xüsusiyyəti əlavə etməkdə sizə kömək edəcək, sonra proqnozlarını koordinatları istifadə edərək dəyişdirəcək, sonra qatın üslubunu təyin edərək bir az rəng əlavə edəcək.
Nəzərə alın ki, bu məqaləni izləmək üçün veb səhifədə işləyən OpenLayers xəritəsinin olması lazımdır. Əgər sizdə yoxdursa, OpenLayers 3 -dən istifadə edərək Xəritəni necə düzəltməyinizə baxın.
Addımlar
3 -dən 1 -ci hissə: Nöqtə və Xətt String Xüsusiyyətləri əlavə etmək
Addım 1. Bir nöqtə xüsusiyyəti yaradın
Aşağıdakı kod satırını özünüzə kopyalayın
element:
var point_feature = yeni ol. Feature ({});
Addım 2. Nöqtənin həndəsəsini təyin edin
OpenLayers-ə nöqtənin harada yerləşdiriləcəyini söyləmək üçün bir həndəsə yaratmalı və ona [boylam (E-W), enlem (N-S)] şəklində bir sıra olan bir sıra koordinatlar verməlisiniz. Aşağıdakı kod bunu yaradır və nöqtənin həndəsəsini təyin edir:
var point_geom = yeni ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Addım 3. Bir xətt simli xüsusiyyəti yaradın
Xətti sətirlər seqmentlərə bölünmüş düz xətlərdir. Onları nöqtələr kimi yaradırıq, ancaq xətt sətirinin hər nöqtəsi üçün bir cüt koordinat təqdim edirik:
var linestring_feature = yeni ol. Feature ({həndəsə: yeni ol.geom. LineString (
Addım 4. Xüsusiyyətləri vektor qatına əlavə edin
Xüsusiyyətləri xəritəyə əlavə etmək üçün onları vektor qatına əlavə etdiyiniz və sonra xəritəyə əlavə edə biləcəyiniz mənbəyə əlavə etməlisiniz:
var vector_layer = yeni ol.layer. Vector ({mənbə: yeni ol.source. Vector ({xüsusiyyətlər: [point_feature, linestring_feature]})})) map.addLayer (vektor_layer);
3 -dən 2 -ci hissə: Xüsusiyyətlərin həndəsələrini koordinatları istifadə etmək üçün dəyişdirmək
Hər hansı bir güclü Xəritəçəkmə proqramında olduğu kimi, OpenLayers xəritələri də məlumatları fərqli şəkildə göstərmək üçün fərqli qatlara malik ola bilər. Yer kürəsi düz olduğundan, onu düz xəritələrimizdə göstərməyə çalışdığımız zaman, proqram yerləri düz xəritəyə uyğunlaşdırmalıdır. Xəritə məlumatlarını göstərməyin bu fərqli yolları adlanır proqnozlar. Eyni xəritədə bir vektor təbəqəsi və bir kafel qatını istifadə etmək, təbəqələri bir proyeksiyadan digərinə çevirmək məcburiyyətindəyik.
Addım 1. Xüsusiyyətləri bir sıra qoyun
Birlikdə çevirmək istədiyimiz xüsusiyyətləri təkrar edə biləcəyimiz bir sıra halına gətirərək başlayırıq.
var xüsusiyyətləri = [point_feature, linestring_feature];
Addım 2. Çevrilmə funksiyasını yazın
OpenLayers -də, hər bir xüsusiyyətin həndəsə obyektində transform () funksiyasından istifadə edə bilərik. Bu çevrilmə kodunu daha sonra çağıra biləcəyimiz bir funksiyaya qoyun:
transform_geometry funksiyası (element) {var current_projection = yeni ol.proj. Projection ({kod: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (cari_projeksiyon, yeni_projeksiyon);); }
Addım 3. Xüsusiyyətləri dəyişdirmək funksiyasını çağırın
İndi sadəcə serialı təkrarlayın.
xüsusiyyətləri.forEach (transform_geometry);
3 -dən 3 -cü hissə: Vektor Layer Stilinin Qurulması
Xəritədəki hər bir xüsusiyyətin necə göründüyünü dəyişdirmək üçün bir üslub yaratmalı və tətbiq etməliyik. Üslublar rəngləri, ölçüləri və nöqtələrin və xətlərin digər xüsusiyyətlərini dəyişə bilər və ayrıca hər bir nöqtə üçün şəkilləri göstərə bilər ki, bu da xüsusi xəritələr üçün çox əlverişlidir. Bu bölmə lazım deyil, amma əyləncəli və faydalıdır.
Addım 1. Doldurma və stoke yaradın
Doldurma tərzi obyekti və yarı şəffaf qırmızı rəng və düz qırmızı xətt olan vuruş (xətt) tərzi yaradın:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var vuruş = yeni ol.style. Suruş ({rəng: [180, 0, 0, 1], en: 1});
Addım 2. Stili yaradın və təbəqəyə tətbiq edin
OpenLayers üslubundakı obyekt olduqca güclüdür, ancaq hələlik doldurulma və vuruşu təyin edəcəyik:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: strok, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (üslub);
