Question

这看起来很简单，但我无法弄清楚如何使用OpenLayers的第3版API来切换标记功能的可见性。

在我的情况下，我正在向矢量图层添加功能。每个要素都是一个标记图标，表示感兴趣的地方。当我点击页面上其他位置的复选框时，我希望该功能显示为消失（视情况而定）。我将JQuery与OL3结合使用，但我不关心解决方案是jquery还是vanilla javascript。

代码段：

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
        }
    });
}

Answer 1

您可以将Point节点设置为一个数组，该数组将对地图的整个运行时有效。单击一个点首先删除图层的所有要素，然后再次遍历此数组并仅添加未单击的项目。然后只需重新绘制地图上的图层 - 这应该可以解决问题。因此，每个Point都必须具有唯一的ID。

如果图标功能，OpenLayers 3切换可见性

1 个答案: