javascript - 如何在 openlayers 3 中将缩放控件放置在另一个 div 内？

Question

我有一个 div 位于 ol3-map 顶部，我想在其中放置缩放控件。在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);

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

Answer 1

简单:

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

看看 the docs !