如何在openlayers API中定義縮放按鈕？

Question

如何在openlayers API中刪除默認的ol-zoom按鈕並用不同的標簽和類名定義另一個縮放按鈕？

<div class="ol-zoom ol-unselectable ol-control">
    <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
    <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
</div>

我使用以下代碼來設置縮放按鈕的CSS類名稱，但我不知道為什么它不起作用：

new ol.control.Zoom({
          className: "my-new-class-name"
        });

Answer 1

我看不到您是否確實在地圖上添加了“縮放”控件。 實例化控件本身不會更改OL映射。 此外，地圖具有默認的縮放控件實例。 如果在地圖上調用addControl ，則可能最終將兩個縮放控件放置在彼此上方。

您可以將控件作為地圖初始化的選項。 如果您不想手動列出所有其他控件，只需將ol.control.defaults與zoom: false選項一起使用。 它省略了縮放控件，但添加了默認的歸因和旋轉控件。

您甚至可以將選項直接提供給ol.control.defaults：

ol.control.defaults({
    zoomOptions: {
        className: "ol-zoom my-new-class-name"
    }
})

其次，將className設置為非加性的，它將替換默認的ol-zoom類。 因此，您的控件可能已添加到DOM，但沒有樣式，因此不在屏幕上。 您也可以通過將ol-zoom添加到className來解決此問題。

這是一個工作示例：

 var map = new ol.Map({ controls: ol.control.defaults({ zoom: false }).extend([ new ol.control.Zoom({ className: "ol-zoom my-new-class-name" }) ]), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 3, }) }); 

 .ol-zoom.my-new-class-name { background: red; } 

 <link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/> <script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script> <div id="map" class="map"></div>