De-/activate getfeature-request через кнопку

Question

У меня есть карта Openlayers3 с более чем одним WMS-слоем. Я хочу добавить кнопку (для каждого запрашиваемого слоя), чтобы пользователь мог решить запросить wms-слой или нет.

var getfeature = function(click) { 
    map.on(click, function (evt) { 
     document.getElementById('info').innerHTML = ''; 
     var viewResolution = (view.getResolution()); 
     var url = wms_url.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, projection, 
      { 
       'INFO_FORMAT': 'text/html' 
      }); 
     if (url) { 
      document.getElementById('info').innerHTML = 
       '<iframe seamless src="' + url + '"></iframe>'; 
     } 
    }); 
} 

Эта деталь работает до сих пор.

Теперь объедините getfeature-запрос с "пользовательским интерфейсом" (здесь только флажок)

var userquery = function() { 
    var $input = $(this); 
    //checkbox true/false 
    if($input.prop("checked")) { 
     //change cursor appearance 
     map.getViewport().style.cursor = 'help'; 
     //getfeature-request on singleclick 
     getfeature('singleclick'); 
    } 
    else { 
     //change cursor appearance, when checkbox is unchecked 
     map.getViewport().style.cursor = ''; 
     //WHAT TO DO HERE??? 
     //... 
    } 
}; 

этот флажок с идентификатором = "cursor10"

var checkbox = document.getElementById('cursor10'); 

и добавить функциональность с помощью

checkbox.onchange = userquery; 

В настоящее время функция getfeature продолжает работать после ее активации.

Что мне нужно сделать, чтобы функция getfeature перестала работать, когда флажок снят? Или любые идеи для другого подхода?

Answer 1

Вы можете использовать unByKey() function для отмены регистрации слушателя событий карты с помощью ключевого

Престола: http://jsfiddle.net/d1wrkb95/2/

var mapEventKey; 

var getfeature = function(click) { 
    mapEventKey = map.on(click, function (evt) { 
     document.getElementById('info').innerHTML = ''; 
     var viewResolution = (view.getResolution()); 
     var url = wms_url.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, projection_to, 
      { 
       'INFO_FORMAT': 'text/html' 
      }); 
     if (url) { 
      document.getElementById('info').innerHTML = 
       '<iframe seamless src="' + url + '"></iframe>'; 
     } 
    }); 
}; 


var userquery = function() { 
    var $input = $(this); 
    //checkbox true/false 
    if($input.prop("checked")) { 
     //cursor ändern 
     map.getViewport().style.cursor = 'help'; 
     //getfeatureabfrage bei einzelklick 
     getfeature('singleclick'); 
    } 
    else { 
     map.unByKey(mapEventKey); 
     map.getViewport().style.cursor = ''; 
    } 
};