自定義的OpenLayers控制

Question

我如何可以輕鬆地定製的OpenLayers地圖控件？或者至少，我怎樣才能最小化控件的高度？

謝謝。

PS。有沒有CSS覆蓋？

Answer 1

看一看 - http://geojavaflex.blogspot.com/ 我正在展示如何執行LayerSwitcher的參與定製。這可能會告訴你如何做你以後的事情。

有展示瞭如何控制工作，以及後續的帖子將詳細討論該代碼的網頁上的地圖。

如果你在代碼只是有興趣看到頁面的源代碼，並查找鏈接CustomLayerSwitcher.js的切換器的定製版本。

Answer 2

爲了減少OpenLayers.js的ZoomBar搜索zoomStopHeight，並根據需要進行編輯。

另外參考：Link。

Answer 3

有自帶的可以控制所有的CSS的OpenLayers內的命令通常.olZoombar {}這裏 這可能是編輯這些各種各樣的東西，否則你可以編輯實際js文件的最簡單的方法一個CSS文件爲控制。

Answer 4

如上所述，如果您正在討論PanZoomBar或ZoomBar，則需要編輯zoomStopHeight。但是，你並不需要編輯OpenLayers.js。

new OpenLayers.Control.PanZoomBar({zoomStopHeight: 7}) 

你可以考慮嘗試PanZoom，它沒有酒吧。

Answer 5

您可以對任何openLayers控件進行子類化。我只是做了「縮放滑塊」的子類PanZoomBar（panZoomBar.js），覆蓋了draw（）方法和註釋掉所有按鈕元素，只留下縮放滑塊..這樣的：

function zoomSlider(options) { 

    this.control = new OpenLayers.Control.PanZoomBar(options); 

    OpenLayers.Util.extend(this.control,{ 
     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 = new OpenLayers.Size(18,18); 
      var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y); 

      this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz); 
      centered = this._addZoomBar(centered.add(0, sz.h + 5)); 
      this._addButton("zoomout", "zoom-minus-mini.png", centered, sz); 
      return this.div; 
     } 
    }); 
    return this.control; 
} 

var panel = new OpenLayers.Control.Panel(); 
panel.addControls([ 
    new zoomSlider({zoomStopHeight:11}), 
    new OpenLayers.Control.LayerSwitcher({'ascending':false}), 
]); 
map.addControl(panel);