사용자 정의 OpenLayers 디자인

Question

OpenLayers (확대/축소 막대, 방향 ...)의 기본 UI를 원래 크기가 다른 내 자신의 이미지를 사용하여 변경하고 싶습니다. 그러나 문제는 자바 스크립트에서 하드 코딩 된 요소의 위치와 크기에 남아 있습니다.

누구나 다른 컨트롤에 대해 내 자신의 모형을 사용하는 방법을 알려주거나 아이디어를 줄 수 있습니까?

Answer 1

OpenLayers에서는 컨트롤을 서브 클래스 화하여 원하는대로 만들 수 있습니다. 나는 당신의 질문에 따라 PanZoomBar를 서브 클래스 화하여 Google Maps PanZoomBar와 같이 보이게 만들었습니다. 먼저 컨트롤을 만듭니다.

var panZoomBar = new OpenLayers.Control.PanZoomBar({ 
    panIcons: false // my custom option I use to hide the pan buttons 
}); 

다음으로 사용자 지정하려는 메서드로 컨트롤을 재정의합니다. 이 예를 들어, 나는 내 자신의 CSS 스타일, 이미지 및 위치를 추가하기 위해 draw() 기능을 오버라이드 (override) 할 수 있습니다 :

OpenLayers.Util.extend(panZoomBar, { 
    draw: function(px) { 
     // initialize our internal div 
     OpenLayers.Control.prototype.draw.apply(this, arguments); 
     px = this.position.clone(); 

     // place the controls 
     this.buttons = []; 

     var sz = {w: 18, h: 18}; 
     if (this.panIcons) { // will only draw our pan tools if this option is configured 
      var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y); 
      var wposition = sz.w; 

      if (this.zoomWorldIcon) { 
       centered = new OpenLayers.Pixel(px.x+sz.w, px.y); 
      } 

      this._addButton("panup", "north-mini.png", centered, sz); 
      px.y = centered.y+sz.h; 
      this._addButton("panleft", "west-mini.png", px, sz); 
      if (this.zoomWorldIcon) { 
       this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz); 

       wposition *= 2; 
      } 
      this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz); 
      this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz); 
      this._addButton("zoomin", "gmaps-zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz); 
      centered = this._addZoomBar(centered.add(0, sz.h*4 + 5)); 
      this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz); 
     } 
     else { 
      this._addButton("zoomin", "gmaps-zoom-plus-mini.png", px, sz); 
      centered = this._addZoomBar(px.add(0, sz.h)); 
      this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz); 
      if (this.zoomWorldIcon) { 
       centered = centered.add(0, sz.h+3); 
       this._addButton("zoomworld", "zoom-world-mini.png", centered, sz); 
      } 
     } 
     // add custom CSS styles 
     $(this.slider).find('img').attr('src', media_url + 'OpenLayers-2.12/img/gmaps-slider.png'); 
     $(this.zoombarDiv).css('background-image', 'url("' + media_url + 'OpenLayers-2.12/img/gmaps-zoombar.png")'); 
     return this.div; 
    } 
}); 

그리고 단순히지도에이 컨트롤을 추가

map.addControl(panZoomBar);