Я работаю над Openlayers 5.13 с jQuery 3.21. Я пытаюсь поместить элемент html div
в область просмотра карты в openlayers. Этот элемент должен иметь два флажка, чтобы отфильтровать некоторый контент на карте.
Для этой цели я использую экземпляр Overlay
.
Есть две проблемы:
1) Когда я увеличиваю или уменьшаю масштаб, оверлей имеет тенденцию увеличиваться и уменьшаться в размере, что я не ожидаю.
Я хочу, чтобы этот оверлей (элемент html div) сохранил свой размер.
2) Я не могу понять, как разместить оверлей в правом верхнем углу.
Оверлей создается с помощью свойства position
, которое я не знаю, что установить.
Я также не знаю, что если наложение это то, что я должен стремиться показать какой-то статический элемент на карте. (Я очень сомневаюсь, что оверлей это правильный путь)
Вот мой код:
css-
<style>
.ol-panel {
position: absolute;
background-color: white;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 100px;
}
</style>
HTML -
<div id="panel" class="ol-panel">
<div id="content">
<table>
<tr>
<td>
Ports <input type="checkbox">
</td>
</tr>
<tr>
<td>
Vessels <input type="checkbox">
</td>
</tr>
</table>
</div>
</div>
<div id="map"></div>
скрипт -
map = new ol.Map({
logo: 'false',
target: 'map',
layers: [new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
panelDiv = document.getElementById("panel");
var panel = new ol.Overlay({
element: panelDiv,
stopEvent: false,
//offset:[0,0],
autoPan: true,
position: ol.proj.transform([82,80 ], 'EPSG:4326', 'EPSG:3857'),
positioning: 'top-right',
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(panel);
Это мой текущий вывод:
Это то, что я ожидаю, элемент, который остается фиксированным в позиции:
Ссылка - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]