主页 / user-29485186

semihher's questions

Martin Hope
semihher
Asked: 2025-02-04 19:40:43 +0800 CST
  • 5

如果该点是某个群集的一部分（即它具有多个特征），我想显示特征的数量。我以前是这样做的VectorLayer：

const clusterSource = new Cluster({
  distance: 50,
  minDistance: 10,
  source: source,
});

const noClusterStyle = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: '#ffcc33',
    }),
  }),
});

const clusterStyle = new Style({
  text: new Text({
    fill: new Fill({
      color: '#fff',
    }),
  }),
})

const vectorLayer = new VectorLayer({
  source: clusterSource,
  style: function (feature) {
    const size = feature.get('features').length;
    if (size > 1) {
      clusterStyle.getText().setText(size.toString());
      return clusterStyle;
    }
    return noClusterStyle;
  },
});

现在我想使用 aWebGLVectorLayer代替VectorLayer，但是它的样式必须是FlatStyleLike。

我尝试了以下操作：

import WebGLVectorLayer from 'ol/layer/WebGLVector';

const generateTextLabel = (featuresAmount) => {
  return (
    `<svg width="10" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <text x="0" y="18" fill="white" font-size="16">${featuresAmount}</text>
    </svg>`
  )
}

const flatLikeStyle = [
  {
    style: {
      'shape-fill-color': 'black',
      'shape-points': 4,
      'shape-radius': 10,
    }
  },
  {
    filter: ['>', ['get', 'features'], 1],
    style: {
      'icon-src': 'data:image/svg+xml;utf8,' + generateTextLabel(0),
    },
  },
]

const webglVectorLayer = new WebGLVectorLayer({
  source: clusterSource,
  style: flatLikeStyle
})

但我不知道如何让过滤器根据特征的大小工作。我也不知道如何将特征的数量传递给函数generateTextLabel()。

openlayers