Как разместить HTML-элемент на карте в OpenLayers - PullRequest
Новая
       31

Как разместить HTML-элемент на карте в OpenLayers

0 голосов
/ 31 августа 2018

Я работаю над 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 &nbsp;<input type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td>
                        Vessels&nbsp;<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);

Это мой текущий вывод: current output

Это то, что я ожидаю, элемент, который остается фиксированным в позиции:

Expected

Ссылка - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]

1 Ответ

0 голосов
/ 03 сентября 2018

Я получил то, что искал здесь [http://openlayers.org/en/latest/examples/custom-controls.html?q=custom-controls]

/** Create a checkbox to toggle visibility of straits on map 
             *  You can create different controls for different operations
             */
            var strait_cbx = document.createElement('input');
            strait_cbx.type = "checkbox";
            strait_cbx.id = "strait_cbx";
            strait_cbx.checked = true;

 /**
             * This is a container element which holds input elements which are controls for the map
             * You can add as many as you want depending upon use.
             * The element is a div which would act like a panel to add controls on map like toggling visibility of the layers
             */
            var element = document.createElement('div');
            element.className = 'ol-control-panel ol-unselectable ol-control';
            element.innerHTML="<b>Straits</b>&nbsp;"
            element.appendChild(strait_cbx);

            /*A custom control which has container holding input elements etc*/
            var controlPanel = new ol.control.Control({
                element: element
            });
map.addControl(controlPanel);

output

...