【问题标题】:Openlayers 6: Filter point vector layer by properties before point clusteringOpenlayers 6:在点聚类之前按属性过滤点向量层
【发布时间】:2021-09-23 02:16:22
【问题描述】:

按照 Openlayers.org 上的示例,我创建了一个点矢量图层(带有叠加层等)。这些点显示为聚类点,如下例所示:

Openlayers Cluster Example

现在,我需要根据它们的属性过滤点,例如lab_data = 'yes', sampling_year > 1990. 过滤会影响簇内的点数。

到目前为止,我还没有找到从源对象或图层对象中排除特征的方法。我什至无法成功访问这些功能及其属性。从那里我可以建立循环和条件。

有没有人知道它是怎么做的?


// Read GeoJson point locations
var pointLocations = new ol.source.Vector({
  url: 'data/samplingLocations.json',
  format: new ol.format.GeoJSON()
});

// create point cluster
var pointCluster = new ol.source.Cluster({
    distance: 50,
    source: pointLocations
  });

// create simple style for single points and clusters
var getStyle = function(feature) {
  var length = feature.get('features').length;
  if (length > 1) {
    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 20,
        fill: new ol.style.Fill({ color: "red" }),
      }),
    })
  } else {
    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({ color: "black" }),
      }),
    })
  }
  return style;
};

// create a vector layer
var vectorLayer = new ol.layer.Vector({
  id: "points",
  source: pointCluster,
  style:   getStyle
});

// create the map
var map = new ol.Map({
  layers: [vectorLayer],
  target: 'map',
  view: new ol.View({
    center: [895571,5911157],
    zoom: 8,
  })
});

到目前为止,我访问属性的一些不成功尝试:

console.log( pointLocations.getSource().getFeatures()[0].getProperties().values)
console.log( vectorLayer.getSource().getFeatures()[0].get('values') )

感谢您的每一个帮助!

【问题讨论】:

    标签: javascript vector properties filtering openlayers-6


    【解决方案1】:

    您可以使用几何函数进行过滤,例如:

    var pointCluster = new ol.source.Cluster({
        distance: 50,
        source: pointLocations,
        geometryFunction: function(feature) {
          if (feature.get('lab_data') == 'yes' && feature.get('sampling_year') > 1990) {
            return feature.getGeometry();
          } else {
            return null;
          }
        }
      });
    

    【讨论】:

    • 非常感谢!!这很棒!我不知道这个选项。与此处的 setSource() 一起能够包含新功能。 link
    猜你喜欢
    • 2018-04-17
    • 2011-06-02
    • 2019-05-10
    • 2016-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多