[GIS] OpenLayers 3 toggle feature visibility

jqueryopenlayers

This seemed simple on the face of it, but I am unable to figure out how to toggle the visibility of a marker feature using the Version 3 API of OpenLayers.

In my situation, I am adding features to a vector layer. Each feature is a marker icon denoting a place of interest. When I click on a checkbox somewhere else on the page, I'd like for the feature to appear of disappear (as the case may be). I am using JQuery in conjunction with OL3, but I don't care whether the solution is jquery or vanilla javascript.

Code snippets:

var vectorSource = new ol.source.Vector({
    projection: "EPSG:4326"
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: fieldIconStyle
});



var map = new ol.Map({
    layers: [osm, digitalglobe, vectorLayer],//osm and digitalglobe exist in unquoted code
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }).extend([mousePositionControl]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

function checkedchanged(item)//item is the checkbox that was clicked
{
    //this function does get called successfully.
    //alert($(item).prop('checked'));
    var selected = $(item).prop('checked');
    var id = $(item).val();

    vectorSource.forEachFeature(function (item) {

        var props = item.getProperties();
        if (props.FieldId = id) {
            item.setStyle({visible: selected});//I have tried many different things here, all to no avail
        }
    });
}

Best Answer

I have been struggling with the same issue, but I seem to have come across a solution that works pretty well.

In the Docs there is no visibility style option for vector features. But you can set the opacity of an ol.style.Icon or the alpha of the fill and stroke for an ol.style.Circle and ol.style.RegularShape

How I got it to work was to set a style functions for my visible and invisible states. Here are a few options for points

//visible style
var visibleStyleIcon = {
     'Point': [new ol.style.Style({
         image: new ol.style.Icon({
             src : 'your_icon.png',
             opacity : 1
         })
     })]
 };

// invisible Style Icon Opacity
var invisibleStyleIcon = {
    'Point': [new ol.style.Style({
        image: new ol.style.Icon({
            src : 'your_icon.png', //still need something even if it's invisible
            opacity : 0
        })
    })]
};

// invisible Style Vector Alpha
var hiddenStyle = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(0,0,0,0)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0,0,0,0)',
            })
        })
    })]
};

// invisible Style Shape No Points
var hiddenStyleRegularShape = {
    'Point': [new ol.style.Style({
        image: new ol.style.RegularShape({}) //a shape with no points is invisible
    })]
}

Then for the feature you want to hide/unhide just set the style for that feature

if (feature_should_be_visible){
    feature.setStyle(visibleStyleIcon[feature.getGeometry().getType()]);
} else {
    feature.setStyle(invisibleStyleIcon[feature.getGeometry().getType()]);
}
Related Question