如何在內置圖像的打開圖層中創建自定義控件？

Question

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

這是如何創建自定義控件的一個很好的例子，但我似乎無法使它與圖像一起工作。

我要在定製控件包括圖像是here

另外，我不希望像做任何事情，只是有在一個角落裏。

Answer 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') 
}