OpenLayers选择要素时同图层其他要素边缘出现图形伪影的解决方法

方法1：自定义未选中要素样式 #

默认Select交互会对未选中要素做细微样式调整，这是伪影的常见诱因。显式将未选中样式设置为图层原始样式，就能避免默认修改带来的视觉异常：

// 先定义图层的原始样式
var originalStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#你的原始边框色',
    width: 你的原始边框宽度
  }),
  fill: new ol.style.Fill({
    color: '#你的原始填充色'
  })
});

// 创建Select交互时指定未选中样式
var select = new ol.interaction.Select({
  // 自定义选中时的样式
  style: function(feature) {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#选中边框色',
        width: 选中边框宽度
      }),
      fill: new ol.style.Fill({
        color: '#选中填充色'
      })
    });
  },
  unselectStyle: originalStyle // 未选中时复用原始样式
});
map.addInteraction(select);

方法2：禁用不必要的交互默认行为 #

如果是鼠标悬浮、多选触发的样式冲突，可直接关闭相关默认设置：

var select = new ol.interaction.Select({
  multi: false, // 禁用多选，避免样式叠加
  hover: false, // 禁用悬浮样式变化
  style: function(feature) {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ff0000',
        width: 2
      })
    });
  }
});
map.addInteraction(select);

方法3：优化图层渲染参数 #

GeoJSON矢量图层的像素对齐问题也可能导致伪影，可调整渲染参数优化：

var geojsonLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '你的GeoJSON路径',
    format: new ol.format.GeoJSON()
  }),
  style: originalStyle,
  renderBuffer: 10, // 增大渲染缓冲区，避免边缘裁剪
  interpolate: false // 禁用插值，减少模糊伪影
});

方法4：限制Select触发条件 #

确保交互仅在点击时触发，避免误操作导致的样式异常：

var select = new ol.interaction.Select({
  condition: ol.events.condition.click, // 仅点击触发选择
  style: function(feature) {
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ff0000',
        width: 2
      })
    });
  }
});
map.addInteraction(select);

内容的提问来源于stack exchange，提问作者andreaordonselli