openlayers bindTo事件不起作用

Question

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>

Run Code Online (Sandbox Code Playgroud)

将显示地图,但复选框不响应,控制台日志显示:

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

Run Code Online (Sandbox Code Playgroud)

我经历了这个,但我仍然没有得到OpenLayers - Uncaught TypeError:无法读取未定义的属性'div'

Answer 1

mis*_*ink 6

如果要使用此功能,请确保您的库的版本低于3.5.0,因为ol.dom.Input已在3.5.0版中删除: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;
  }
});
Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	2044 次
最近记录：	10 年，1 月前