在聚类向量和非聚类向量上使用样式

如何解决在聚类向量和非聚类向量上使用样式

目前我正在使用 openlayers、js、css 和 html 制作一个查看器。在我的地图中，我有一个由 geoserver 提供的 GeoJSON，其中有几个点彼此靠近。对于这些点，我制作了自己的 SVG 并将它们转换为要在地图上提供的图标/png。由于符号系统连接到一个变量：“类别”从 1 到 3 不等。为此，我创建了一个函数，我在 GEOJSON 的“样式”参数中调用该函数。由于点彼此靠近，我决定根据缩放级别制作它们的集群。这一切都运行正常，但是我无法获得相同的样式功能来响应我的新集群层。在尝试了几件事（主要是更改样式的功能（见下文））之后，我终于让集群现在显示为图标/png，但问题是它没有响应我的函数中的“else if”语句不再可见，因此“类别”变量上的不同图标不再可见。

在我的代码下面：

/* style icons */
var ottergroen = new ol.style.Icon({
    src: 'img/bottlenecks_icons/otter_groen.png',anchorOrigin: 'bottom-Left',anchorXUnits: 'fraction',anchor: [0.1,0],imgsize: [2,2]
});


var ottergeel = new ol.style.Icon({
    src: 'img/bottlenecks_icons/otter_geel.png',2]
});


var otteroranje = new ol.style.Icon({
    src: 'img/bottlenecks_icons/otter_oranje.png',});


var otterrood = new ol.style.Icon({
    src: 'img/bottlenecks_icons/otter_rood.png',});

/*function to call upon the variables and return the right icon */
function getpriority(Category) {
    if (Array)
    return ottergroen;
    else  if(Category == "1") {
        return otterrood;
    } else if (Category == "2"){
        return ottergeel;
    } else if (Category == "3") {
        return ottergroen;
    }
};




/* making the clustered layer  */
var bottlenecksjsonsource = new ol.source.Vector({
  url: 'http://localhost:8080/geoserver/Gbra/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Gbra%3ABottlenecks_gbra_filtered&outputFormat=application%2Fjson',format: new ol.format.GeoJSON()

});

var bottlenecksjsonlayer = new ol.layer.Vector({
  source: bottlenecksjsonsource
});
// a clustered source is configured with another vector source that it
      // operates on
      var jsoncluster = new ol.source.Cluster({
        source: bottlenecksjsonsource
      });

      // it needs a layer too
      var clusteredbottlenecks = new ol.layer.Vector({
        source: jsoncluster,title: 'bottlenecksclustered',style: function(feature){
          return new ol.style.Style({
            image: getpriority(feature.get('Category'))
          })
        }
        
      });
      clusteredbottlenecks.setVisible(false);
      map.addLayer(clusteredbottlenecks);
      console.log(clusteredbottlenecks);

如果有人能告诉我我在这里做错了什么，那就太棒了。目前，它仅在每个缩放级别上可视化此符号（“ottergroen”），如下图所示： jmespath specification

以及非聚类向量应该是什么样子的图像：

提前致谢

解决方法

您必须在集群内部获取该功能。如果你只有一个，那就是一个特性，否则就是一个集群。

  function getStyle (feature,resolution) {
    var features = feature.get('features');
    var size = features.length;
    // Feature style
    if (size===1) {
       var cat = features[0].get('category');
       // get style
       var style = ...
       return style;
    } else {
      // ClusterStyle
      return clusterStyle;
    }

参见示例：https://viglino.github.io/ol-ext/examples/map/map.clustering.html