Javascript 在聚集向量和未聚集向量上使用样式
目前,我正在用openlayers、js、css和html制作一个查看器。 在我的地图中,我有一个由geoserver提供服务的GeoJSON,其中有几个点彼此靠近。对于这些点,我制作了自己的SVG,并将它们转换为图标/png,以便在地图上显示。 由于符号连接到变量:“类别”从1到3不等。为此,我在GEOJSON的“style”参数中调用了一个函数。 由于这些点彼此接近,我决定根据zoomlevel制作它们的簇。这一切正常运行,但我不能得到相同的风格的功能,以回应我的新集群层。在尝试了几件事情(主要是更改样式的函数(见下文))之后,我最终确定集群现在显示为图标/png,但问题是它不再响应函数中的“else-if”语句,因此“Category”变量上的不同图标不再可见 下面是我的代码:Javascript 在聚集向量和未聚集向量上使用样式,javascript,vector,cluster-computing,openlayers,Javascript,Vector,Cluster Computing,Openlayers,目前,我正在用openlayers、js、css和html制作一个查看器。 在我的地图中,我有一个由geoserver提供服务的GeoJSON,其中有几个点彼此靠近。对于这些点,我制作了自己的SVG,并将它们转换为图标/png,以便在地图上显示。 由于符号连接到变量:“类别”从1到3不等。为此,我在GEOJSON的“style”参数中调用了一个函数。 由于这些点彼此接近,我决定根据zoomlevel制作它们的簇。这一切正常运行,但我不能得到相同的风格的功能,以回应我的新集群层。在尝试了几件事情(
/* 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',
anchorOrigin: 'bottom-Left',
anchorXUnits: 'fraction',
anchor: [0.1, 0],
imgsize: [2, 2]
});
var otteroranje = new ol.style.Icon({
src: 'img/bottlenecks_icons/otter_oranje.png',
anchorOrigin: 'bottom-Left',
anchorXUnits: 'fraction',
anchor: [0.1, 0],
});
var otterrood = new ol.style.Icon({
src: 'img/bottlenecks_icons/otter_rood.png',
anchorOrigin: 'bottom-Left',
anchorXUnits: 'fraction',
anchor: [0.1, 0],
});
/*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”):
在非聚集向量的图像下方:
提前感谢您必须在集群内获得该功能。如果只有一个,那么它是一个特性,否则它是一个集群
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;
}
请参阅示例:如果(数组),您的意思是什么??集群源中的功能是由OpenLayers创建的集群。您可以使用
feature.get('features')
访问群集中的功能-因此群集中第一个功能的类别是feature.get('features')[0]。get('category')