如何在 Open Layers 中创建新的缩放按钮？答案

【问题标题】：How to create new zoom buttons in Open Layers?如何在 Open Layers 中创建新的缩放按钮？
【发布时间】：2018-02-02 13:14:47
【问题描述】：

我创建了两个用于放大和缩小的按钮（使用 Bootstrap）：

<div class="btn-toolbar" id="buttontoolbar">
    <div id="newSim", class="btn-group-vertical">
        <button type="button" title="Zoom in", class="btn btn-default",id="olZoomOutLink"><img src="plus.svg"></button>
        <button type="button" title="Zoom out", class="btn btn-default", id="customZoomOut"><img src="minus.svg"></button>
    </div>
</div>

我还关闭了打开图层的默认缩放按钮：

var map = new ol.Map({
    controls: ol.control.defaults({
        zoom: false,
    })
})

现在我的问题是，如何让我的两个按钮分别用于放大和缩小？

谢谢！

【问题讨论】：

标签： twitter-bootstrap gis openlayers openlayers-3

【解决方案1】：

在 html 文件中创建 html 按钮后，通过引用 html 中的 id 在每个按钮上添加一个控件。之后听地图上的点击事件。

var zoomType;
document.getElementById('customZoomOut').onclick = function() {
    zoomType="customZoomOut";
};
document.getElementById('olZoomOutLink').onclick = function() {
    zoomType="olZoomOutLink";
};

var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
    view: new ol.View({ center: [0, 0], zoom: 2 })
});

map.on('click', function(evt) {
    if(zoomType=="olZoomOutLink"){
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom - 1);
    }
    if(zoomType=="customZoomOut"){
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom + 1);
    }
});

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>

<div class="btn-toolbar" id="buttontoolbar">
  <div id="newSim" , class="btn-group-vertical">
    <button type="button" title="Zoom in" class="btn btn-default" id="olZoomOutLink"><img src="plus.svg"></button>
    <button type="button" title="Zoom out" class="btn btn-default" id="customZoomOut"><img src="minus.svg"></button>
  </div>
</div>

【讨论】：

谢谢。我使用了您的答案的略微修改版本，它有效:)

【解决方案2】：

对新版本 OL 的补充并带有动画。默认按钮的行为不同且更流畅。所以这是一个没有setZoom() 的解决方案。它有点通用，因此请根据您的框架进行调整

<button onclick="zoomTo(+1)">+</button> 
<button onclick="zoomTo(-1)">-</button>

还有这个功能

zoomTo(amount){
    const view = map.getView();
    const zoom = view.getZoom();
    view.animate({ zoom: zoom + amount})
}

在定义地图时禁用普通控件：

new Map({
    ...
    controls: []
})

【讨论】：