主页 / coding / 问题 / 79411555
Accepted
semihher
Asked: 2025-02-04 19:40:43 +0800 CST

如果要显示集群，如何显示特征数量

  • 772

如果该点是某个群集的一部分（即它具有多个特征），我想显示特征的数量。我以前是这样做的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

1 个回答

  1. Best Answer

    要获取数组的长度，您需要在创建集群时将其保存为特征属性。此外， 的值不能超过一个icon-src，您需要创建一个包含所有可能值的精灵

    const canvas = document.createElement('canvas');
const max = 200;
const size = 20;
canvas.width = max * size;
canvas.heigth = size;
const context = canvas.getContext('2d');
context.textAlign = 'center';
context.textBaseline = 'middle';
context.font = '10px sans-serif';
const match = [];
for (let i = 0; i < max; ++i) {
  context.fillStyle = '#3399CC';
  context.fillRect(i * size, 0, size, size);
  context.fillStyle = 'white';
  context.fillText(`${i + 1}`, i * size + size / 2, size / 2);
  match.push(i, [i * size, 0]);
}
const sprite = canvas.toDataURL();

const source = new VectorSource({
  features: features,
});

const clusterSource = new Cluster({
  distance: parseInt(distanceInput.value, 10),
  minDistance: parseInt(minDistanceInput.value, 10),
  source: source,
});

clusterSource.on('addfeature', (e) => {
  e.feature.set('size', e.feature.get('features').length);
});

const clusters = new WebGLVectorLayer({
  source: clusterSource,
  style: {
    'icon-src': sprite,
    'icon-offset': ['match', ['get', 'size'], ...match, [0, 0]],
    'icon-size': [20, 20],
  },
});

    工作示例https://stackblitz.com/edit/js-hfsqdrec?file=package.json,index.html,index.js

    • 0

相关问题