2

I have a vector layer which is geoJSON file containing school points and their attributes,to visualize this i defined cluster and show circle which size is based on the number of features it contains. Whenever the zoom level reaches individual schools, i need to display symbol of school.

In style, i can define the size of cluster using the pointRadius property, and show icon using the externalGraphic property. i need to use both at once i.e use rendering as circle if cluster is more than one and render as icon in individual feautures.

How can i do this?

2

You can used cluster icon in cluster and other icon in single feature.

var styles = new OpenLayers.Style({
    externalGraphic: "${symbol}"
},
{
    context:{
        symbol: function(feature){
            if (feature.cluster){
                return 'icon/Cluster_icon.png';
            }
            else{
                return 'icon/Single_icon.png';
            }
        }
    }
});
2

For me it works if

var styles = new OpenLayers.Style({
externalGraphic: "${symbol}" }, {
context:{
    symbol: function(feature){
        if (feature.cluster.length != 1){
            return 'icon/Cluster_icon.png';
        }
        else{
            return 'icon/Single_icon.png';
        }
    }
}});
  • I have completed the project with the solution from neogeomat.I will try this one later in other projects. Thank you for the new way. – poshan Dec 24 '13 at 3:24
  • It will through error if the feature is not clustered. Correct answer is : var styles = new OpenLayers.Style({ externalGraphic: "${symbol}" }, { context:{ symbol: function(feature){ if (feature.cluster){ return 'icon/Cluster_icon.png'; } else{ return 'icon/Single_icon.png'; } } }}); – Mohammed shafeek Feb 18 '14 at 4:45
0

here is how i went about it in openlayers 5 (ol5) if this helps anyone in the future.

        let icon = new Style({
        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
            crossOrigin: 'anonymous',
            src: 'images/a.png'
        }))
    });

    let clusterIcon = new Style({
        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
            crossOrigin: 'anonymous',
            src: 'images/c.png'
        }))
    });

    let getIconStyle = function(feature) {
        if(feature.getProperties().features.length > 1) {
            return clusterIcon;
        }
        return icon;
    };

    let me = this;
    let vs = new VectorSource({
        loader: customeLoaderFunc
    });

    let clusterSource = new Cluster({
        distance: 15,
        threshold: 3,
        source: vs
    });

    let layer = new VectorLayer({
        source: clusterSource,
        visible: false,
        style:getIconStyle

    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.