Добавление абсолютно позиционированного DIV внизу карты OpenLayers?

Question

Я пытаюсь разместить легенду статического изображения в правом нижнем углу карты OpenLayers в верхней части карты.Я пробовал использовать абсолютно позиционированный DIV, но он имеет тенденцию сталкиваться с другими объектами (даже с высоким z-индексом).

Есть ли способ сделать это с помощью API OpenLayers?Я заметил, что OpenMap имеет метод Layer.ScreenOverlay (http://openspace.ordnancesurvey.co.uk/openspace/example7.html), который именно то, что мне нужно, но в OpenLayers такого метода не существует, который я могу найти.

Answer 1

Я столкнулся с подобной проблемой, когда хотел разместить легенду статического изображения на карте OpenLayers. Мое решение состояло в том, чтобы использовать элемент атрибуции http://dev.openlayers.org/examples/attribution.html (посмотрите на источник страницы).

Вы можете изменить атрибуцию изображения вместо текста:

'attribution': "<img src='myimage.jpg'/>"

Что касается изменения позиции атрибуции на карте, вы можете изменить свойства css div.olControlAttribution, например,

    div.olControlAttribution {
        left:10em;
        top:10em;
    }

Answer 2

Это определенно должно работать, чтобы абсолютно позиционировать div внутри div карты с более высоким z-индексом (например, 10000)

Рассмотрим следующие HTML и CSS-код:

<div id="map" style="height:100%">
    <div id="legend"></div>
</div>

#legend{
    position:absolute; 
    right:10px; 
    bottom:10px; 
    z-index:10000; 
    width:100px; 
    height:100px; 
    background-color:#FFFFFF;
}