Daha çox

OpenLayers 3 xüsusiyyətləri seçmək üçün çoxbucaqlı çəkir


Yeniləyin

İndi bu işi aldım və bu plunk işləyən bir nümunə göstərir.


Bir vektor qatında bir sıra nöqtələrim var və istifadəçiyə xəritənin başqa bir qatına çoxbucaq çəkməyə icazə verirəm. Çoxbucağın içindəki bütün nöqtələri seçmək istəyirəm.

Bunu işləmək üçün var, ancaq müvəqqəti. İstifadəçi çoxbucağı bitirdikdə, bal seçilir, lakin dərhal yenidən seçilmir. Səbəbini anlaya bilmirəm.

Bir nümunəyə istinad edərək funksiyanı etdim: DragBox

Çoxbucağımı sürükləmə qutusu ilə əvəzlədiyim zaman seçimlər davam edir. Ancaq bir çoxbucaqlı etmək üçün qarşılıqlı əlaqə istifadə etdikdə seçim davam etmir.

Javascript kodu aşağıdadır və burada xüsusiyyətin bir hissəsi var.

var xəritəsi; // Xəritə qat əlavə et var baseLayer = new ol.layer.Tile ({mənbə: new ol.source.OSM ()}); // Görünüş əlavə et var view = new ol.View ({// proyeksiya qlobal bir şeyi düz bir şeydə necə təmsil etdiyimizlə əlaqədardır. Proyeksiya: 'EPSG: 900913', center: ol.proj.fromLonLat ([- 2.5,51.1 ]), zoom: 4,}); // Nöqtə xüsusiyyətləri qatını əlavə edin var pointsLayer = yeni ol.layer.Vector ({başlıq: 'təsadüfi nöqtələr', mənbə: yeni ol.source.Vector ({url: './assets/Points.json', format: yeni ol.format.GeoJSON ()})}); // başlanğıc xəritəsi (sonunda çağırılır) funksiyası init () {map = new ol.Map ({target: 'map', // istifadə etmək istədiyimiz göstərilən növ. renderer: 'canvas', view: view} ); map.addLayer (baseLayer); map.addLayer (pointsLayer); } içində(); ///////////// SEÇİM ƏLAVƏ EDİN // seçilmiş bütün xüsusiyyətləri saxlamaq üçün ol.collection əlavə edin var select = new ol.interaction.Select (); map.addInteraction (seçin); var selectedFeatures = select.getFeatures (); ///////////// Əlavə ÇİZİM // Çizim vektor mənbəyi əlavə et var drawingSource = new ol.source.Vector (); // Rəsm qatını əlavə et var drawingLayer = new ol.layer.Vector ({mənbə: drawingSource}); map.addLayer (drawingLayer); // qarşılıqlı əlaqələri qlobal olaraq elan edin, daha sonra dinləyiciləri onlara bağlaya bilək. var draw; var dəyişdirmək; // Rəsm qarşılıqlı əlaqəsi Draw = new ol.interaction.Draw ({mənbə: drawingSource, yazın: 'Çoxbucaqlı', // yalnız Ctrl basıldıqda çəkin. Şərt: ol.events.condition.platformModifierKeyOnly}); map.addInteraction (çəkmək); draw.on ('drawend', function (e) {// qutu ilə kəsişən xüsusiyyətlər // seçilmiş xüsusiyyətlər kolleksiyasına əlavə olunur və adları "info" // div var ölçüdə = e.feature-də göstərilir .getGeometry (). getExtent (); pointsLayer.getSource (). forEachFeatureIntersectingExtent (ölçü, funksiya (xüsusiyyət) {selectedFeatures.push (xüsusiyyət);});}); ///////////// DƏSTƏKLƏYƏN FUNKSİYALAR // bir görüntü üzərində imleci göstəriciyə çevirin. map.on ('pointermove', function (evt) {if (evt.dragging) {return;} var pixel = map.getEventPixel (evt.originalEvent); // pixel, callback. çağrıldı. Rəng dəyəri olan qatları aşkarlayır // pikseldə. var hit = map.forEachFeatureAtPixel (pixel, function (feature) {return true;}); map.getTargetElement (). style.cursor = hit? 'pointer': ";});

Bu, çoxbucağı bağlamaq üçün çoxbucağınızın son zirvəsini vurduğunuz zaman baş verir. Bağlamaq üçün cüt vurursanız, belə bir səhv olmaz. Problem eyni zamanda seçdiyiniz və qarşılıqlı təsir bağladığınız üçün gəlir. Beləliklə, çoxbucağı bağlamaq üçün bir klik seçilmiş qarşılıqlı əlaqənin seçilməmiş hərəkətinə səbəb olur. Problemin öhdəsindən gəlmək üçün aşağıdakıları edin

  1. bir başlanğıc hadisəsi yaradın və seçilmiş qarşılıqlı əlaqəni deaktiv edin

    draw.on ('drawstart', function (e) {select.setActive (false);})
  2. indidən mövcud olan holdend hadisəsi daxilində 300 ms gecikmə ilə seçilmiş qarşılıqlı əlaqəni yenidən aktivləşdirin. (251ms, bir kliklə cüt klikdən ayırmaq üçün lazım olan vaxtdır)

    draw.on ('drawend', function (e) {e.preventDefault (); setTimeout (function () {select.setActive (true);}, 300);

Əslində yaxşı olarsa, sizin işinizə yarayacağını düşünürəmvəziyyətseçdiyiniz seçim:ol.events. şərt. heç vaxt. Sonra klik hadisəsi yanmaz (seçim api-də gördüyünüz kimi singleClick-də standart şərt). Kod:

var select = new ol.interaction.Select ({şərt: ol.events.condition.never});


Videoya baxın: Openlayers 6 Tutorial #6 - Layer Switcher (Oktyabr 2021).