要修改OpenLayers要素样式而不覆盖交互样式，可以使用OpenLayers中的styleFunction函数来实现。styleFunction函数可以根据要素的属性和几何类型动态生成样式。

以下是一个示例代码，展示了如何修改OpenLayers要素样式而不覆盖交互样式：

// 创建一个样式函数，根据要素的属性和几何类型生成样式
var styleFunction = function(feature, resolution) {
  // 判断要素的属性，根据属性值生成不同的样式
  if (feature.get('type') === 'point') {
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
          color: 'red'
        }),
        stroke: new ol.style.Stroke({
          color: 'white',
          width: 1
        })
      })
    });
  } else if (feature.get('type') === 'line') {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2
      })
    });
  } else if (feature.get('type') === 'polygon') {
    return new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'green'
      }),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 1
      })
    });
  }
};

// 创建一个矢量图层，并设置样式函数
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: styleFunction
});

// 创建一个地图，并添加矢量图层
var map = new ol.Map({
  target: 'map',
  layers: [vectorLayer],
  view: new ol.View({
    center: [0, 0],
    zoom: 10
  })
});

// 添加一个要素到矢量图层
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
pointFeature.set('type', 'point');
vectorLayer.getSource().addFeature(pointFeature);

var lineFeature = new ol.Feature(new ol.geom.LineString([[1, 1], [2, 2]]));
lineFeature.set('type', 'line');
vectorLayer.getSource().addFeature(lineFeature);

var polygonFeature = new ol.Feature(new ol.geom.Polygon([[[3, 3], [4, 4], [5, 5]]]));
polygonFeature.set('type', 'polygon');
vectorLayer.getSource().addFeature(polygonFeature);

在上述示例中，首先创建了一个样式函数styleFunction，根据要素的属性type来生成不同的样式。然后创建了一个矢量图层vectorLayer，并将样式函数设置为图层的样式。最后，通过创建不同类型的要素并添加到矢量图层中来观察样式的变化。

这样，我们可以在不覆盖交互样式的情况下修改OpenLayers要素样式。