OpenLayers - 확대/축소 및 이동 컨트롤의 위치를 ​​변경하십시오.

Question

지도의 PanPanel 및 ZoomPanel 컨트롤의 위치를 ​​왼쪽 상단이 아닌 왼쪽 하단으로 변경하려고합니다. 옵션을 추가 할 수는 있지만, 시도한 것만 큼 창 크기를 조정하더라도 왼쪽 아래에 머물러있게 할 수는 없습니다.

왼쪽 하단에 상대적으로 위치를 변경하라고 지시 할 때 정상적으로 수행하는 것처럼 스택에 어떻게 표시할지 잘 모르겠습니다.

두 패널을 구성하는 이미지가 변경되었으므로 이제는 원하는 것보다 팬 및 확대/축소 패널 사이에 약간의 공간이 있으므로 서로 가깝게 접근하려고합니다.

컨트롤 위에 옵션을 사용하는 것 외에 두 패널을 둘러싼 div의 ID 스타일을 만들려고했지만 div의 id 값은 "OpenLayers.Map_2_OpenLayers_Container"입니다. '.'. 내가 아는 한, 그것은 스타일에 대한 합법적 인 ID가 아닙니다. 어쨌든, 작동하지 않았습니다. 그 위에 나는 이름이 항상 같다고 믿을 수 없다고 생각합니다.이 페이지에 대한 계속적인 작업으로 시간이지나면서 많은 추가가있었습니다.

아이디어가 있으십니까?

Answer 1

시도 :

new OpenLayers.Control.YourControlXXXX({ 
    moveTo: function (px) { 
     if ((px != null) && (this.div != null)) { 
      this.div.style.left = yourLeft + "px"; 
      this.div.style.bottom = (yourBottom+controlHeigth) + "px"; 
     } 
    }, 
    ... other options 
}) 

음, 어디! 나는 그렇게하려고 이러한 컨트롤은 CSS로 위치, 내가 생각했던 것보다 더 현대적인 것을 볼 :

.olControlPanPanel { 
    bottom: 55px; /* not 0px */ 
    top: auto; 
} 

참고 : 같은 시도 : div.olControlPanPanel {... 당신이 위치의 CSS 드로드 어디에 확실하지 않은 경우 CSS의 우선 순위를 강제로 OL.

Answer 2

그래서 문제가 발견되었습니다. 처음에 나는 자동차 탑을 설정하지 않았다. style.css 파일에서 10px로 설정되었으므로 style.css 파일에서 스타일을 변경하면 자동으로 바닥에 적용됩니다. 하지만 내 CSS 파일이 작동하지 않았다. Pan과 Zoom에 대한 OpenLayers 예제를 발견했는데, 내가하고 있던 일과 내가하고 있던 일과의 차이점은 페이지 시작 부분에 style.css 파일을 명시 적으로로드하지 않았다는 것입니다. 그래서 OpenLayers Map이 생성 될 때 CSS가 읽힌 후 style.css 파일이 늦게 읽혀 져서 내 재정의를 무효화하는 것으로 보입니다. 내가 초기로드 (페이지의 시작)를했을 때 완벽하게 작동했습니다.

지도 레이어를 만들 때 생성 된 속성 컨트롤은지도가 아직 페이지에 생성되지 않았기 때문에 현재 CSS를 읽어야하므로 초기로드를 수행 할 필요가 없었습니다. 초기로드를 제거하면 여전히 내 css 파일에서 변경 한 내용이 적용됩니다. 그러나 초기로드를 제거하면 팬 및 확대/축소 컨트롤이 더 이상 내 변경 내용에 응답하지 않게되므로이 시점에서 이미 오버라이드 된 style.css 파일의 늦은로드 이후에 Map 객체가 스타일을 읽었다 고 가정합니다 내 CSS.

이동 그림 ...

Answer 3

이런 경우에는이 다른 사람에게 유용 할 수 있습니다. 나는 OpenLayers 3을 사용하고 있으며 줌 컨트롤을지도의 오른쪽으로 옮기고 싶었습니다. 내지도가 'tm-openlayers-map'클래스 값이있는 요소에 연결되어 있고 확대/축소 컨트롤을 이동하려면 다음 CSS/Sass를 사용합니다.

.tm-openlayer-map 

    //change the colour of the map buttons 
    button { 
     background: $title-bar; 
    } 

    .ol-zoom { 
     top: 0.5em; 
     right: 0.5em; 
     left: auto; 
     //move the tooltips to the left of the now right aligned buttons 
     .ol-has-tooltip:hover [role=tooltip] { 
      left: -5.5em; 
      border-radius: 4px 0 0 4px; 
     } 
     .ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{ 
      left: -6.2em; 
     } 
    } 
    //make sure the rotate controls included by default with an opacity of 0 don't 
    //block clicks intended for the '+' button 
    .ol-rotate { 
    visibility: hidden; 
    } 
}