OpenLayers修改要素样式而不会覆盖交互样式 [英] OpenLayers modify feature style without overwritting interactions style

问题描述

是否有任何方法可以修改单个功能的样式，而无需在选择交互时修改默认样式?

Is there any way to modify a single feature's style without modifying default style on select interaction?

这是显示我的问题的简单代码，以及 jsfiddle

Here is a simple piece of code showing my problem and a jsfiddle

最小html:

<input type="button" id="switcher" value="Change style"></input>
<div id="map" class="map"></div>

还有一个简单的脚本:

let vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

let map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({wrapX: false})
    }),
    vectorLayer,
  ],
  view: new ol.View({
    center: ol.proj.transform([9, 44.65], 'EPSG:4326', 'EPSG:3857'),
    zoom: 8
  })
});

let source = vectorLayer.getSource();

let draw = new ol.interaction.Draw({
  source: source,
  type: 'Polygon'
});

let selectOnHover = new ol.interaction.Select({
    source: source,
    condition: ol.events.condition.pointerMove
});

map.addInteraction(draw);
map.addInteraction(selectOnHover);

let fill = new ol.style.Fill({
  color: 'rgba(255,0,255,0.4)'
});
let stroke = new ol.style.Stroke({
  color: '#00FF00',
  width: 5
});
let customStyle = new ol.style.Style({
  image: new ol.style.Circle({
    fill: fill,
    stroke: stroke,
    radius: 5
  }),
  fill: fill,
  stroke: stroke
});

document.getElementById('switcher').onclick = function(event) {
  let features = source.getFeatures();
  if(features.length>0)
    features[0].setStyle(customStyle);
}

通过在jsfiddle上进行测试可以看到，单击按钮可以正确更改第一个绘制功能的样式，但似乎会覆盖悬停时的默认样式(这里只是与条件的选择交互).

As you can see by testing on jsfiddle, clicking on the button will correctly change the style of the first drawn feature but also seems to overwritte the default style on hover (here simply a select interaction with condition).

更改特征样式时如何在悬停时保持默认样式?

How can I keep the default style on hover while changing my feature style?

推荐答案

要素上的样式会覆盖所有样式功能(以及交互的默认样式等).但是您可以为一个功能提供customStyle属性，并仅在图层样式函数中使用它，而不是默认样式，而交互将继续使用默认值进行交互.

A style on a feature overrides all style functions (and default styles for interactions, etc). But you could give a feature a customStyle property and use that only in a layer style function instead of a default style, while interactions would continue to use the defaults for interactions.

let defaultFill = new ol.style.Fill({
  color: 'rgba(255,255,255,0.4)'
});
var defaultStroke = new ol.style.Stroke({
  color: '#3399CC',
  width: 1.25
});
var defaultStyles = [
  new ol.style.Style({
    image: new ol.style.Circle({
      fill: defaultFill,
      stroke: defaultStroke,
      radius: 5
    }),
    fill: defaultFill,
    stroke: defaultStroke
  })
];

let vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false}),
  style: function(feature) { 
    var customStyle = feature.get('customStyle');
    return customStyle || defaultStyles;
  }
});


...
...

document.getElementById('switcher').onclick = function(event) {
  let features = source.getFeatures();
  if(features.length>0)
    features[0].set('customStyle', customStyle);
}

这篇关于OpenLayers修改要素样式而不会覆盖交互样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！