在 dblclick Open Layer 上恢复地图的默认行为

Question

单击按钮后，我会覆盖 map.on('dblclick') 的默认行为，即放大。

我想在代码的其他部分检索此行为。

我该怎么做？

编辑：为了更好的解释。我有一个按钮，当我点击它时，我覆盖了地图 dblclick

上的行为

$('#RemoveArea').on('click', function(){
    map.getInteractions().pop()
    map.on('dblclick', function(evt) {
        evt.preventDefault();
        evt.map.forEachFeatureAtPixel(evt.pixel, function(feature,layer){ 
            featureId = feature.getId()
            areaFeature = feature.getGeometry().getArea()/ 10000;
            totalSelectedArea -= parseFloat(areaFeature.toFixed(2));
        })
    }); 
})

如何再次点击其他按钮使地图的行为与以前一样，是放大地图

  $('#OtherBtn').on('click', function(){
     //...     
  })

可能吗？

Answer 1

您可以在创建地图时禁用交互

var map = new ol.Map({
  layers [myLayer],
  target: 'map',
  interactions: ol.interaction.defaults({doubleClickZoom: false}),
  view: new ol.View({
    center: [x, y],
    zoom: z
  })
});

为了能够切换交互 on/off，您需要将其分配给一个变量，而不是使用默认值创建它：

var dcz = new ol.interaction.DoubleClickZoom();

var map = new ol.Map({
  layers [myLayer],
  target: 'map',
  interactions: ol.interaction.defaults({doubleClickZoom: false}).extend([dcz]),
  view: new ol.View({
    center: [x, y],
    zoom: z
  })
});

关闭和打开:

dcz.setActive(false);

dcz.setActive(true);

  var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var dcz = new ol.interaction.DoubleClickZoom();

  var map1 = new ol.Map({
    target: 'map',
    layers: [layer],
    interactions: ol.interaction.defaults({doubleClickZoom: false}).extend([dcz]),
    view: new ol.View({
      center: [0, 0],
      zoom: 1
    })
  });

  function dczOnOff() {
      dcz.setActive(document.getElementsByName('dcz')[1].checked);
  }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    width: 100%;
    height: 80%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<div style="padding-left: 50px;">
<input type="radio" name="dcz" value="0" size="16" onchange="dczOnOff()"> DCZ OFF</br>
<input type="radio" name="dcz" value="1" size="16" onchange="dczOnOff()" checked> DCZ ON</br>

要么让你的双击侦听器永久处于活动状态，让它测试你的按钮是否打开或关闭了双击缩放：

map.on('dblclick', function(evt) {
    if (!dcz.getActive()) {
        evt.map.forEachFeatureAtPixel(evt.pixel, function(feature,layer){ 
            featureId = feature.getId()
            areaFeature = feature.getGeometry().getArea()/ 10000;
            totalSelectedArea -= parseFloat(areaFeature.toFixed(2));
        })
    }
}); 

$('#RemoveArea').on('click', function(){
    dcz.setActive(false);
})

$('#OtherBtn').on('click', function(){
    dcz.setActive(true);
})

或者您需要存储双击监听器的密钥，以便稍后取消设置

$('#RemoveArea').on('click', function(){
    key = map.on('dblclick', function(evt) {
        evt.preventDefault();
        evt.map.forEachFeatureAtPixel(evt.pixel, function(feature,layer){ 
            featureId = feature.getId()
            areaFeature = feature.getGeometry().getArea()/ 10000;
            totalSelectedArea -= parseFloat(areaFeature.toFixed(2));
        })
    }); 
})

$('#OtherBtn').on('click', function(){
    ol.Observable.unByKey(key)     
})

Answer 2

所以我没有找到在 dblclick 上检索缩放的方法，但我能够防止我之前覆盖的行为。所以，在点击 OtherBtn

我添加了这个

                map.on('dblclick', function(evt){                        
                    evt.preventDefault();
                })

正如我所说，它不会放大但也不会做其他事情。

编辑：我找到了 un 的函数，它与 on 相反。所以在 OtherBtn 我设置

map.un('dblclick', doubleClickCallback);

其中 doubleClickCallback 只是一个包含我在 dblclick 之后所做的所有事情的函数，然后返回到默认行为

在 dblclick Open Layer 上恢复地图的默认行为

Give back default behavior of map on dblclick Open Layer

openlayers