如何在 Open Layers 中创建带有图像的自定义控件？答案

【问题标题】：How do I create a custom control in Open Layers with an image inside?如何在 Open Layers 中创建带有图像的自定义控件？
【发布时间】：2017-08-10 13:40:01
【问题描述】：

http://openlayers.org/en/latest/examples/custom-controls.html?q=custom

这是如何创建自定义控件的一个很好的示例，但我似乎无法使其与图像一起使用。

我要在自定义控件中包含的图像是here

另外，我不希望图像做任何事情，就在角落里。

【问题讨论】：

标签： controls custom-controls openlayers

【解决方案1】：

自定义控件基本上只是带有事件处理程序的 DOM 元素，因此您只需创建一个元素并对其应用一点 CSS。

  customControl = function(opt_options) {
    var element = document.createElement('div');
    element.className = 'custom-control ol-unselectable ol-control';
    ol.control.Control.call(this, {
      element: element
    });
  };
  ol.inherits(customControl, ol.control.Control);

  var map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
    controls: [new customControl],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

CSS：

.custom-control {
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: no-repeat url('http://openlayers.org/en/latest/examples/resources/logo-70x70.png')
}

【讨论】：

查看您在原始问题中引用的示例，了解如何通过调用 ol.controls.defaults.extend() 将控件附加到“标准”控件。
很好的答案！完美运行！