[英]Openlayers 5 multi-color points
我有代碼以藍色顯示 7 個點。 現在我需要用不同的顏色顯示 7 個點(例如 2 個紅色點,2 個綠色點和 3 個藍色點)。 我也需要對這些點進行點聚類工作。
我的代碼: https : //codepen.io/quas1k/pen/WgWRNE
var coordinates = ol.proj.fromLonLat([30.5238, 50.45466]);
var coordinates1 = ol.proj.fromLonLat([30.5238, 50.45166]);
var coordinates2 = ol.proj.fromLonLat([30.5538, 50.45466]);
var coordinates3 = ol.proj.fromLonLat([30.5518, 50.45466]);
var coordinates4 = ol.proj.fromLonLat([30.5558, 50.45466]);
var coordinates5 = ol.proj.fromLonLat([30.5598, 50.45466]);
var coordinates6 = ol.proj.fromLonLat([30.5510, 50.45466]);
var coordinates7 = ol.proj.fromLonLat([30.5580, 50.45466]);
var features = [];
features[0] = new ol.Feature(new ol.geom.Point(coordinates));
features[1] = new ol.Feature(new ol.geom.Point(coordinates1));
features[2] = new ol.Feature(new ol.geom.Point(coordinates2));
features[3] = new ol.Feature(new ol.geom.Point(coordinates3));
features[4] = new ol.Feature(new ol.geom.Point(coordinates4));
features[5] = new ol.Feature(new ol.geom.Point(coordinates5));
features[6] = new ol.Feature(new ol.geom.Point(coordinates6));
features[7] = new ol.Feature(new ol.geom.Point(coordinates7));
var source = new ol.source.Vector({
features: features
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 12,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
return style;
}
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster, clusters],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([30.5238, 50.45466]),
zoom: 11
})
});
我如何更改此代碼以實現所描述的行為? 我在以不同顏色顯示點並按顏色進一步聚類它們時遇到問題。
使用這樣的東西:
features[0] = new ol.Feature({geometry: new ol.geom.Point(coordinates), color: 'red'});
features[1] = new ol.Feature({geometry: new ol.geom.Point(coordinates1), color: 'red'});
features[2] = new ol.Feature({geometry: new ol.geom.Point(coordinates2), color: 'green'});
features[3] = new ol.Feature({geometry: new ol.geom.Point(coordinates3), color: 'green'});
features[4] = new ol.Feature({geometry: new ol.geom.Point(coordinates4), color: 'green'});
features[5] = new ol.Feature({geometry: new ol.geom.Point(coordinates5), color: 'blue'});
features[6] = new ol.Feature({geometry: new ol.geom.Point(coordinates6), color: 'blue'});
features[7] = new ol.Feature({geometry: new ol.geom.Point(coordinates7), color: 'blue'});
簇將采用簇中第一個點的顏色。 我已經刪除了 styleCache 因為結果會不斷變化
var size = feature.get('features').length;
var color = feature.get('features')[0].get('color');
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 12,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: color
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.