OpenLayers 3-將選擇功能綁定到復選框

Question

有沒有辦法將復選框更改事件綁定到功能選擇事件？ 例如，以下操作可實現圖層可見性。

<input type="checkbox" id="visible" checked>
var visible = new ol.dom.Input(document.getElementById('visible'));
visible.bindTo('checked', layer, 'visible');

我想允許用戶從表中選擇功能。

Answer 1

小提琴

---

function getLayerByName(value) {
  var layer;
  var found = map.getLayers().getArray().some(function(each){
    //discard layers other than ol.layer.Vector
    if(each instanceof ol.layer.Vector) {
        layer = each.get('name') === value ? each: undefined;
    }
    if(layer) return true;
    return false;
  });
  return layer ? layer : false;
}

function toggleVisibility(element) {
  var layer = getLayerByName(element.value);
  if (element.checked) {
    layer.setVisible(true);
  } else {
    layer.setVisible(false);
  }
}