json - 改变 OpenLayers 集群特征的风格
问题描述
我正在使用带有 Javascript 的 OpenLayers 并在地图上显示集群特征。我想根据其属性值之一更改群集内功能的图标。
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”值设置其图标。但是,我无法获得功能属性。
这是一个代码笔。我会很感激任何人的帮助。
解决方案
如果您只检查每个集群中的第一个特征:
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 }) });
}
};
推荐阅读
- android - API 'BaseVariant.getApplicationIdTextResource' 已过时,已替换为 'VariantProperties.applicationId'
- python - 在字符串上设置 SQL 方言注入
- git - 如何从裸仓库中检索/恢复 GIT 存储库
- python - 使用 igraph 最短距离时缺少距离
- javascript - beforeunload事件之前的Angular8 IFrame
- windows - 复杂和双重复杂方法在visual studio c项目中不起作用
- java - 使用进度条和 MVVM 的最佳方法是什么
- javascript - 访问 Firebase 对象并将其映射到基于 Angular 的应用程序中的 UI
- javascript - 在响应中获取 JSON 值并将它们映射到带有键的状态对象?
- javascript - 无需调用 setState 即可自动响应状态变量更新