javascript - 在聚类向量和非聚类向量上使用样式
问题描述
目前我正在用 openlayers、js、css 和 html 制作一个查看器。在我的地图中,我有一个由 geoserver 提供的 GeoJSON,其中有几个点彼此靠近。对于这些点,我制作了自己的 SVG,并将它们转换为图标/png,以便在地图上提供。由于符号系统连接到一个变量:“类别”从 1 到 3 不等。为此,我创建了一个函数,我在 GEOJSON 的“样式”参数中调用该函数。由于这些点彼此靠近,我决定根据缩放级别制作它们的集群。这一切都正常运行,但是我无法获得相同的样式函数来响应我的新集群层。在尝试了几件事(主要是更改样式的功能(见下文))之后,我终于使集群现在显示为图标/png,
在我的代码下面:
/* 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”),如下图所示的每个缩放级别:
提前感谢<3!
解决方案
您必须在集群内获取该功能。如果你只有一个,它就是一个特性,否则它就是一个集群。
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;
}
参见示例:https ://viglino.github.io/ol-ext/examples/map/map.clustering.html
推荐阅读
- c# - 日期时间选择器和月历改变外观
- c++ - 程序在我的 C++ 工作区中找不到头文件
- amazon-web-services - 是否有计算红移年、月和日日期差异的函数?
- macos - 从 Perl 脚本打开新终端窗口并执行 SSH 命令
- javascript - 如何在一次运行后停止 setTimeout?
- android - CallRedirectionService 实现不起作用
- java - 片段android中的调用意图
- android - 在 Andorid 的 init.rc 文件中看不到运行服务/脚本
- workflow-foundation - 如何在 Workflow Foundation 的自定义活动设计器上设置自定义图标?
- json - 从 Go 中的 json 文件中读取多个 json 对象