如何将缩放控件放在 openlayers 3 中的另一个 div 中？

Question

我有一个 div 放在 ol3 地图上，我想在其中放置缩放控件。在 ol2 中这很容易做到，但我还没有在 ol3 中找到这个选项。

这是使用 ol2 方法的一次失败尝试，应用于 ol3。

map = new ol.Map({
  layers: [bingMapsRoad, layerBiomass],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [1,16.7],
    zoom: 8
  }),
  controls: ([])  //initialize without controls
});

var external_control = new ol.control.Zoom({
  div: document.getElementById('external_control') });
map.addControl(external_control);

不幸的是，此代码导致缩放控件仍放置在地图上而不是 div 内。

Answer 1

简单如：

var external_control = new ol.control.Zoom({
  target: document.getElementById('external_control') });
map.addControl(external_control);

看看the docs！

如何将缩放控件放在 openlayers 3 中的另一个 div 中？

How to place the zoom control inside another div in openlayers 3?

javascript

controls

zooming

openlayers-3