Перемещение инструментов масштабирования открытых слоев при событии

Попытка воспроизвести что-то похожее на Openlayers с боковой панелью, где как только боковая панель расширяется, .ol-zoom margin-left изменяется для изменения своего положения, но я не могу использовать jquery в своем проекте, поэтому ищу решение на основе Vanilla JS или Angular.

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

Спасибо


angular css openlayers openlayers-6
person Rizwan    schedule 18.11.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В JS вы можете динамически добавлять css в приложение, например

    var css =
        '.menuSeparator {' +
        '    border-bottom: solid 1px black;' +
        '}';

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
person Mike    schedule 18.11.2020

arrow_upward
0
arrow_downward

Вот мое решение

const olZoom = document.getElementsByClassName("ol-zoom");
const sideBarElements = document.getElementsByClassName("sidebar-left");
if(!this.sidebarVisibility) {
  (olZoom[0] as HTMLElement).style.marginLeft = "0px";
  (olZoom[0] as HTMLElement).style.marginTop = "60px";
} else {
  setTimeout(() => {
    (olZoom[0] as HTMLElement).style.marginLeft = ((sideBarElements[0] as HTMLElement).offsetWidth - 10) + 'px';
    (olZoom[0] as HTMLElement).style.marginTop = "0px";
  }, 50);
}

Основная проблема, с которой я столкнулся, заключалась в том, что я не преобразовывал Element в HTMLElement в машинописном тексте, как описано в здесь, что мешало мне применить мой margin стиль

person Rizwan    schedule 18.11.2020