openlayers bindTo事件不起作用

我遇到問題，切換複選框將不起作用，控制檯顯示如下。代碼：openlayers bindTo事件不起作用

<!doctype html> 
<head> 
    <title> Me OpenStreetMap </title> 
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" /> 
    <link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" /> 
</head> 
<body> 

    <div id="map"></div> 
    <input type="checkbox" id="visible" checked />Toggle layer Visibility 

<script src="../assets/ol3/js/ol.js"></script> 
<script> 
    var center = new ol.proj.transform([11.57,3.86], 'EPSG:4326','EPSG:3857'); 
    var view = new ol.View({ 
    zoom: 6, 
    center: center 
    }); 
    var layer = new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }); 

    var map = new ol.Map({ 
     target: 'map', 
     layers: [layer], 
     view: view 
    }); 

    // bind a checkbox with id 'visible' to a layer's visibility 
    var visible = new ol.dom.Input(document.getElementById('visible')); /* line 30 */ 
    visible.bindTo('checked', layer, 'visible'); 

</script> 

</body> 
</html>

的地圖顯示，但複選框沒有反應，和控制檯日誌說：

Uncaught TypeError: Cannot read property 'Input' of undefined 
(anonymous function) @ events.html:30

我通過這個去了，但我仍然不明白這一點OpenLayers - Uncaught TypeError: Cannot read property 'div' of undefined

來源

2015-07-19 vncho

沒有'ol.dom'。你從哪裏得到這個？你看過這些例子：http：//openlayers.org/en/v3.7.0/examples/custom-controls.html？ – mistapink

它確實存在，結帳 – vncho

它確實存在，結帳http://openlayers.org/en/v3.2.1/apidoc/ol.dom.Input.html – vncho

如果要使用此功能，請確保您的磁帶庫的版本低於3.5.0，因爲在版本3.5.0中已刪除ol.dom.Input：https://github.com/openlayers/ol3/releases/tag/v3.5.0

實驗ol.dom.Input組件已被刪除。如果需要將dom Input元素的狀態與ol.Object同步，則可以使用偵聽器來完成更改事件。對於例如，您可能複選框類型的輸入狀態綁定在圖層的可見性是這樣的：
var layer = new ol.layer.Tile(); 
var checkbox = document.querySelector('#checkbox'); 

checkbox.addEventListener('change', function() { 
    var checked = this.checked; 
    if (checked !== layer.getVisible()) { 
    layer.setVisible(checked); 
    } 
}); 

layer.on('change:visible', function() { 
    var visible = this.getVisible(); 
    if (visible !== checkbox.checked) { 
    checkbox.checked = visible; 
    } 
}); 

來源

2015-07-19 23:41:23 mistapink

那麼我該如何獲得我的targetKey？我正在使用3.6 – vncho

有一個例子，我已經將它包含在我的回答中 – mistapink

通過複選框切換圖層的可見性也可以在不使用'layer.on（'change：visible'，function（）{..... ''''''''''''''''''''''''''''''''我猜這模擬了一個完整的'bindTo'功能：如果還有其他影響圖層可見性的東西，請更新複選框 – slevin

openlayers bindTo事件不起作用

回答

相關問題