Mais

OpenLayers 3 - Camada vetorial de múltiplos recursos - como selecionar todos os recursos


Eu tenho várias camadas vetoriais que são compostas por 3 partes: ponto inicial, linha e ponto final. Cada um desses recursos tem seu próprio estilo. o ponto inicial é um círculo verde, a linha é cinza e o ponto final é um círculo vermelho.

Eu também habilitei a seleção e está funcionando, mas como faço para selecionar programaticamente os outros 2 recursos ao selecionar uma das peças?

Meu código está abaixo:

var featureLine = new ol.Feature ({geometry: new ol.geom.LineString (points), type: "line", id: id1, startdate: startdate1, starttime: starttime1, enddate: enddate1, endtime: endtime1, soaktime: soaktime1 , haulnumber: haulnumber1, area: area1, startlat: startlat1, startlon: startlon1, endlat: endlat1, endlon: endlon1}); var featureStart = new ol.Feature ({geometry: new ol.geom.Point (ol.proj.transform ([startlon1, startlat1], 'EPSG: 4326', 'EPSG: 3857')), digite: "start", id: id1, data de início: data de início1, hora de início: hora de início1, data de término: hora de término1, hora de término: tempo de soak1, número de haul: número de haul1, área: área1, l de início: l de início1, l de início: l de início1, l de início: l de fim1, l de fim: l de fim1, l de fim: l de fim1); var featureEnd = new ol.Feature ({geometry: new ol.geom.Point (ol.proj.transform ([endlon1, endlat1], 'EPSG: 4326', 'EPSG: 3857')), digite: "end", id: id1, data de início: data de início1, hora de início: hora de início1, data de término: hora de término1, hora de término: tempo de soak1, número de haul: número de haul1, área: área1, l de início: l de início1, l de início: l de início1, l de início: l de fim1, l de fim: l de fim1, l de fim: l de fim1); var vectorSource = new ol.source.Vector ({projeção: 'EPSG: 4326', recursos: [featureStart, featureEnd, featureLine]}); var styleStart = [new ol.style.Style ({image: new ol.style.Circle ({radius: 7, fill: new ol.style.Fill ({color: '# 32CD32'})})})]; var styleLine = [new ol.style.Style ({fill: new ol.style.Fill ({color: 'rgba (255, 255, 255, 0.2)', peso: 4}), traço: novo ol.style. Stroke ({color: '# 808080', width: 4})})]; var styleEnd = [new ol.style.Style ({image: new ol.style.Circle ({radius: 7, fill: new ol.style.Fill ({color: '# FF4500', opacity: 0.8})}) })]; var styles = [styleStart, styleLine, styleEnd]; var vectorLayer = new ol.layer.Vector ({fonte: vectorSource, style: function (feature, resolution) {if (feature.get ('type') === "line") {return styleLine;} if (feature. get ('type') === "start") {return styleStart;} if (feature.get ('type') === "end") {return styleEnd;} retornar estilos;}}); map.addLayer (vectorLayer);

E meu evento de seleção na inicialização é o seguinte:

var selectClick = new ol.interaction.Select ({condição: ol.events.condition.click}); map.addInteraction (selectClick);

Use uma modificação deste:

var collection = selectClick.getFeatures (); selectClick.on ('select', function (evt) {var selected = evt.selected; if (evt.selected [0] === feature1) {collection.push (feature2);} else if (evt.selected [0 ] === feature2) {collection.push (feature1);}});

http://jsfiddle.net/jonataswalker/fm0ysb21/


Assista o vídeo: OpenLayers 5 for Windows 10 - Quick Start usando npm (Outubro 2021).