在事件上移动 openlayers 缩放工具

Question

尝试重现类似于 Openlayers with sidebar 的内容，一旦侧边栏展开，.ol-zoom margin-left 就会被修改以改变其位置，但我无法使用 jquery在我的项目中，寻找基于 Vanilla JS 或 Angular 的解决方案。

我看到它很容易改变 openlayers 缩放按钮的位置作为回答 here 但我想改变某些事件触发的位置，比如（侧边栏切换按钮）按钮点击。

谢谢

Answer 1

在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);

Answer 2

这是我的解决方案

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风格

在事件上移动 openlayers 缩放工具

Move openlayers zoom tools on event

css

openlayers

angular

openlayers-6