OpenLayers 4中点击KML地标切换颜色，求redraw等效实现方案

我来帮你搞定这个OpenLayers 4的样式更新问题！在OL4及后续版本里，旧的redraw()方法确实被移除了，但我们有更符合新版本设计的方式来实现你的需求——点击网格切换红/绿样式，同时触发视图重绘。

先修正你现有代码的语法问题 #

首先你的代码里有几处语法错误，比如mesh=att.description.split = ( "~");应该是mesh = att.description.split("~");，还有eval(mesh[3]) redraw(). this.unselect(feature);这种错误调用，先把这些基础问题解决，再替换redraw()的逻辑。

替代redraw()的核心逻辑：触发要素/图层重绘 #

在OpenLayers 4中，当你修改了要素的样式或属性后，只需要调用要素的changed()方法，它会通知地图该要素已更新，自动触发视图重绘，这就是替代OL2中redraw()的关键。

调整后的完整点击事件代码 #

基于你原来的逻辑，修改后的代码如下：

var displayFeatureInfo = function(pixel) { 
  var currentZoom = map.getView().getZoom(); 
  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; }); 
  
  if (feature) { 
    var att = feature.getProperties(); 
    var styleUrlParts = att.styleUrl.split("#"); 
    var mesh = att.description.split("~"); // 修正语法错误
    
    if (styleUrlParts[1] === "Red_red") { 
      att.styleUrl = "#Jaune_Vert"; 
      feature.setStyle(eval(mesh[3]).getStyle("#Yellow_Green", {})); 
    } else { 
      att.styleUrl = "#Rouge_Rouge"; 
      feature.setStyle(eval(mesh[3]).getStyleFunction("#Red_Red", {})); 
    } 

    // 保存修改后的属性（如果需要持久化styleUrl的变更）
    feature.setProperties(att);
    // 触发要素重绘，替代旧的redraw()
    feature.changed();

    // 取消选择（如果你使用了Select交互，假设你有一个select实例）
    // select.getFeatures().remove(feature);
    
    return 1; 
  } else { 
    return 0; 
  } 
}; 

更优雅的优化建议：避免eval()，使用样式函数 #

你原来的代码依赖eval()来获取样式对象，这既不安全也不利于维护。推荐你改用OL4的样式函数来管理样式，代码会更清晰：

// 提前定义红/绿两种样式
const redStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({ color: 'red', width: 2 }),
  fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.2)' })
});

const greenStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({ color: 'green', width: 2 }),
  fill: new ol.style.Fill({ color: 'rgba(0,255,0,0.2)' })
});

// 给KML图层绑定样式函数
KML3.setStyle(function(feature) {
  // 用要素的自定义属性判断样式
  return feature.get('isGreen') ? greenStyle : redStyle;
});

// 简化后的点击事件
var displayFeatureInfo = function(pixel) { 
  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; }); 
  
  if (feature) { 
    // 切换自定义属性
    const currentState = feature.get('isGreen') || false;
    feature.set('isGreen', !currentState);
    // 触发重绘
    feature.changed();
    
    // 取消选择（如果需要）
    // select.getFeatures().remove(feature);
    
    return 1; 
  } else { 
    return 0; 
  } 
}; 

这种方式完全脱离了KML里的styleUrl依赖，更符合OpenLayers 4的最佳实践，后续维护也更方便。

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