如何通过点击它来重绘（更改背景颜色）kml地标？

Question

我有一个页面显示来自KML的方形网格。

enter image description here

https://saxrub.net/GeoPortail/500x500m.kml

用户可以选择/取消选择网格，选择由网格的颜色实现。如果他点击红色网格，它会变为绿色，反之亦然。

添加KML

var KML3 = new ol.layer.Vector ({ 
  source: new ol.source.Vector ({ 
      url: kml_1x1km, 
         format: new ol.format.KML ({ 
             extractStyles: true, 
             showPointNames: showPointNames 
        }) 
    }) 
 }); 
 allLayers.push (KML3); 
 allLayerSwitcher.push ({ 
    layer: KML3, 
    config: { 
       title: kml_1x1km_title, 
       description: kml_1x1km_title, 
    } 
 })

点击地标是通过以下方式捕获的：

 var displayFeatureInfo = function (pixel) { 
     var currentZoom = map.getView (). getZoom (); 
     var feature = map.forEachFeatureAtPixel (pixel, function (feature, layer) { 
        return feature;
   }); 

 if (feature) { 
    var f = feature; 
    var att = feature.getProperties (); 
    styleUrl = att.styleUrl.split ("#"); 
    mesh=att.description.split = ( "~"); 
    if (styleUrl [1] == "Red_red") 
        { 
             att.styleUrl = "# Jaune_Vert"; 
             feature.style = eval (mesh [3]). getStyle ("#Yellow_Green",   {}) 
         } 
    else 
         { 
               att.styleUrl = "# Rouge_Rouge"; 
               feature.style = eval (mesh [3]). getStyleFunction ("# Red_Red", {}) 
      `   } 
 eval (mesh [3]) redraw (). 
 this.unselect (feature); 
 return 1; 
 } else { 
 return 0; 
 } 
}; 

使用我正在做的API的OpenLayer 2

  if (f) { 

  mesh=f.attributes.description.split = ( "~"); 

  if (f.attributes.styleUrl == "# Red_Red") 
     { 
         f.attributes.styleUrl = "# Jaune_Vert"; 
         f.style = eval (mesh [3]). protocol.format.getStyle ("#Yellow_Yellow", {}) 
     } 
   else 
     { 
         f.attributes.styleUrl = "# Rouge_Rouge"; 
         f.style = eval (mesh [3]). protocol.format.getStyle ("# Red_red", {}) 
     } 
eval (mesh [3]) redraw (). 
 this.unselect (f); 
 } 

但我找不到相当于V4中的重绘功能。

一个主意 ？

Answer 1

您当前在所选要素上设置样式的方式无效，因为ol/Feature没有style属性。你必须使用setStyle() setter函数：

feature.setStyle(yourStyle);

渲染器将​​收到有关此更改的通知，因此您无需在功能上调用setStyle()后手动重绘任何内容。