更改OpenLayers聚类要素中的样式
更改OpenLayers聚类要素中的样式
提问于 2019-03-23 03:30:43
我正在使用OpenLayers和Javascript，并在地图上显示集群特征。我想根据其属性值之一来更改集群中的特征的图标。
var style1 = new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 66],anchorXUnits: 'fraction',anchorYUnits: 'pixels',
opacity: 0.85,src: 'https://img.icons8.com/flat_round/64/000000/home.png',scale: 0.3
}));
var style2 = new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 66],anchorXUnits: 'fraction',anchorYUnits: 'pixels',
opacity: 0.85,src: 'https://img.icons8.com/color/48/000000/summer.png',scale: 0.3
}));
function myStyleFunction(feature) {
let props = feature.getProperties();
if (props.id>50) {
console.log(props.id);
return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
} else {
console.log(props.id);
return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
}
};在上面的代码中，我想访问集群中一个特性的属性"id“，并根据"id”值设置它的图标。但是，我无法获取feature属性。
这是一个codepen。我会感谢任何人的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-23 04:49:11
如果只检查每个集群中的第一个功能：
function myStyleFunction(feature) {
let props = feature.get('features')[0].getProperties();
if (props.id>50) {
console.log(props.id);
return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
} else {
console.log(props.id);
return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
}
};如果要在集群中的任何要素中查找该值
function myStyleFunction(feature) {
let maxId = 0;
feature.get('features').forEach(function(feature){
maxId = Math.max(maxId, feature.getProperties().id);
});
if (maxId>50) {
console.log(maxId);
return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
} else {
console.log(maxId);
return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
}
};对于ol-ext集群
function myStyleFunction(feature) {
let id = 0;
let features = feature.get('features');
if (features) {
id = features[0].get('id');
}
if (id > 50) {
return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
} else {
return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55306622
复制相关文章
相似问题
腾讯云开发者
