扩展默认的 OpenLayers 编辑样式？

Question

我有一个矢量风格，有一个更大的image: radius。我想让 select 交互的样式与矢量样式的 image: radius.

相匹配

如何在不根据this page in the documentation手动重新定义整个编辑风格的情况下做到这一点？

是否可以采用默认样式只覆盖一部分？像图像的半径？或者至少只重新定义整个图像？

Answer 1

在 ol.layer.Vector 和 ol.interaction.Select 之间共享一个 style function 并在选择时更改将在您的函数中读取的变量：

var radius = 10;
var styleFunction = function() {
  return [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'green'
        })
      })
    })
  ];
};

var select_interaction = new ol.interaction.Select({
  style: styleFunction
});

select_interaction.on('select', function(evt) {
  radius = evt.selected.length > 0 ? 20 : 10;
});

I'm proposing 可以在这种情况下使用的 ol.style.Circle#setRadius。

扩展默认的 OpenLayers 编辑样式？

Extending the default OpenLayers edit style?

javascript

openlayers-3