早上好:
我正在使用Open Layer 3来显示地图。我正在通过Cluster添加标记。这个想法是根据大小加入标记。
因此。我想添加不同颜色的标记。
在我的功能中,当我打印标记时,我可以获得图标,它们是不同的。让我来表明一下。
var featured = feature.get('features');
var icon = featured [0] [“R”] ['icon'];
icon =“http://localhost:8000/img/icons/user_yellow.png”
但是,群集只显示“http://localhost:8000/img/icons/user_blue.png”
他们是我的职责:
// this function computes a text style
// based on the size of a cluster
// the style is cached
function getTextStyle(text) {
var key = 'text' + text;
if (!cache[key]) {
if(text == 1){
cache[key] = new ol.style.Style({
text: new ol.style.Text({
font: '22px sans-serif',
text: text,
textBaseline: 'alphabetic',
offsetY: 15,
fill: new ol.style.Fill({
color: 'transparent'
})
})
});
}else{
cache[key] = new ol.style.Style({
text: new ol.style.Text({
font: '22px sans-serif',
text: text,
textBaseline: 'alphabetic',
offsetY: 15,
fill: new ol.style.Fill({
color: 'black'
})
})
});
}
}
return cache[key];
}
// this function computes a circle style
// based on the size of a cluster
// the style is cached.
function getCircleStyle(size,icon) {
var key = 'circle' + size;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: icon,
}))
});
}
return cache[key];
}
// the style function for the cluster layer combines
// a circle and a text style based on the size of the cluster
function clusterStyle(feature, resolution) {
var size = feature.get('features').length;
var featured = feature.get('features');
var icon = featured[0]["R"]['icon'];
var pointStyle = getCircleStyle(size,icon);
var textStyle = getTextStyle(size.toString());
return [pointStyle, textStyle];
}
我不知道为什么这个功能会向我显示只有一种颜色的图标。
这是我的VectorLayer
var vectorLayer = new ol.layer.Vector({ source:clusterSource, style:clusterStyle });