我创建了两个用于放大和缩小的按钮(使用 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>
我还关闭了 Open Layers 的默认缩放按钮:
var map = new ol.Map({
controls: ol.control.defaults({
zoom: false,
})
})
现在我的问题是,如何让我的两个按钮用于放大和缩小?
谢谢!
最佳答案
在 html 文件中创建 html 按钮后,您可以通过引用 html 中的 id 在每个按钮上添加一个控件。之后监听 map 上的点击事件。
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>
关于twitter-bootstrap - 如何在 Open Layers 中创建新的缩放按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48583496/