如何在 Open Layers 中创建带有图像的自定义控件?
How do I create a custom control in Open Layers with an image inside?
http://openlayers.org/en/latest/examples/custom-controls.html?q=custom
这是一个关于如何创建自定义控件的好例子,但我似乎无法让它与图像一起工作。
我要包含在自定义控件中的图片是here
此外,我不想让图像做任何事情,只是在一个角落里。
自定义控件基本上只是带有事件处理程序的 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')
}
http://openlayers.org/en/latest/examples/custom-controls.html?q=custom
这是一个关于如何创建自定义控件的好例子,但我似乎无法让它与图像一起工作。
我要包含在自定义控件中的图片是here
此外,我不想让图像做任何事情,只是在一个角落里。
自定义控件基本上只是带有事件处理程序的 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')
}