Openlayers 6:在点聚类之前按属性过滤点向量层
Openlayers 6: Filter point vector layer by properties before point clustering
按照 Openlayers.org 上的示例,我创建了一个点矢量图层(带有叠加层等)。这些点显示为聚类点,如此处示例所示:
现在,我需要根据点的属性过滤点,例如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') )
非常感谢您的帮助!
您可以使用几何函数进行过滤,例如:
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;
}
}
});
按照 Openlayers.org 上的示例,我创建了一个点矢量图层(带有叠加层等)。这些点显示为聚类点,如此处示例所示:
现在,我需要根据点的属性过滤点,例如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') )
非常感谢您的帮助!
您可以使用几何函数进行过滤,例如:
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;
}
}
});