扩展默认的OpenLayers编辑样式

Extending the default OpenLayers edit style?

本文关键字：编辑 样式 OpenLayers 默认 扩展      更新时间：2023-09-26

我有一个矢量样式，具有较大的image: radius。我想让选择交互的样式匹配矢量样式的image: radius。

我怎么能做到这一点，而不手动重新定义整个编辑样式基于这个页面的文档?

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

小提琴。

在ol.layer.Vector和ol.interaction.Select之间共享样式函数，在选择时，更改将在函数中读取的变量:

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;
});

我建议在这种情况下使用ol.style.Circle#setRadius

相关文章：