Mais

Openlayers 3 Selecione a função de estilo de interação


Eu tenho uma função de estilo para LineStrings que colocará um círculo em cada vértice de um recurso.

Quando eu seleciono o recurso, ele volta a usar o estilo padrão, embora eu tenha replicado minha função de estilo com uma pequena alteração (de cor). O outro pequeno bug é que a função tem dois parâmetros (início, fim), mas eu gostaria de colocar o círculo em cada vértice. Existe uma maneira de conseguir isso?

Especificamente, porém, há uma razão pela qual ele pode não ser capaz de exibir um recurso selecionado usando uma função de estilo? Estou replicando o código abaixo:

var selectedStyle = função (recurso, resolução) {var geometry = feature.getGeometry (); var styles = [// linestring new ol.style.Style ({stroke: new ol.style.Stroke ({color: '# ffcc33', width: 6})})]; geometry.forEachSegment (function (start, end) {var dx = end [0] - start [0]; var dy = end [1] - start [1]; var rotation = Math.atan2 (dy, dx); / / circles styles.push (new ol.style.Style ({geometry: new ol.geom.Point (end), image: new ol.style.Circle ({radius: 5, fill: new ol.style.Fill ({ cor: 'rgb (0, 0, 255)'}), traço: novo ol.style.Stroke ({color: 'blue', width: 2})})}));}); estilos de retorno; };

ATUALIZAR:

Quando umfunçãoé usado em ol.Feature # setStyle seu recurso é referenciado com o estapalavra-chave. Como:

var selectedStyle = function () {console.info (this); var feature = this; var geometry = feature.getGeometry (); };

A razão pela qual seus recursos não mantêm o estilo é porque eles são (quando selecionados) em um temporáriool.layer.Vector. Então, para conseguir o que deseja, você pode fazer:

select.on ('select', function (evt) {var selected = evt.selected; var deselected = evt.deselected; if (selected.length) {selected.forEach (function (feature) {console.info (feature); feature.setStyle (style_modify);});} else {deselected.forEach (function (feature) {console.info (feature); feature.setStyle (null);});}});

http://jsfiddle.net/jonataswalker/eogk4r4b/


Vou dar um exemplo que uso para uma camada de uso para desenhar polígonos e linhas. Assim, você pode ter a ideia e ajustar para atender às suas necessidades. A função geometry está coletando todos os vértices existentes no recurso passado e, em seguida, retorna um multiponto fora dessas coordenadas.

pseudoEditstyles = [/ * Estamos usando dois estilos diferentes para os polígonos / linhas: * - O primeiro estilo é para os próprios polígonos / linhas. * - O segundo estilo é desenhar os vértices dos polígonos. * Em uma função 'geometria' personalizada, os vértices de um polígono são * retornados como geometria 'MultiPonto', que será usada para renderizar * o estilo. * / new ol.style.Style ({stroke: new ol.style.Stroke ({color: 'blue', width: 3}), fill: new ol.style.Fill ({color: 'rgba (0, 0 , 255, 0.1) '})}), new ol.style.Style ({image: new ol.style.RegularShape ({fill: new ol.style.Fill ({color:' rgba (255, 0, 0, 0,5) '}), traço: novo ol.style.Stroke ({color:' preto ', largura: 1}), pontos: 4, raio: 6, ângulo: Math.PI / 4}), geometria: função ( feature) {var geometry = feature.getGeometry (); var geomType = geometry.getType (); if (geomType === 'Polygon') {var linerings = geometry.getLinearRings (); var coordinates = linerings [0] .getCoordinates (); para (var i = 1; i


Assista o vídeo: Openlayers 6 Tutorial #9 - Interaction With Vector Features (Outubro 2021).