如何刪除 OpenLayers-Map 中的標准控件？

Question

我使用 OpenLayers 並想在左上角創建另一個導航控件。 我知道如何添加控件，但在創建 OpenLayers-Map 時默認添加此導航。 所以我想刪除那個控件，添加一個自己的控件。 我已經知道，默認控件是 OpenLayers.Control.PanZoom。

Answer 1

地圖對象有一個名為controls的屬性，它是一個OpenLayers.Control對象數組。 如果未明確設置此屬性，則 OpenLayers 將假設您需要默認控件集，包括OpenLayers.Control.Navigation() 、 OpenLayers.Control.PanZoom() 、 OpenLayers.Control.ArgParser()和OpenLayers.Control.Attribution() 。

要刪除PanZoom或任何其他默認控件，只需在構造Map對象時設置controls屬性數組即可。 這是一個代碼示例：

var map = new OpenLayers.Map('map', {
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.Attribution()
    ]
});

這是一個活生生的例子。

請注意，通過設置controls屬性，您將不會獲得任何默認的Control對象。 您需要的任何控件都必須手動添加。

如果您想親自了解它是如何工作的，這里有一個指向Map對象源代碼的鏈接。

Answer 2

遍歷控件數組，然后移除縮放控件

map.getControls().forEach(function(control) {
  if (control instanceof ol.control.Zoom) {
    map.removeControl(control);
  }
}, this);

Answer 3

我本來希望map.removeControl(OpenLayers.Control.PanZoom)可以工作，但顯然不行。

Answer 4

其他答案相對於 OpenLayers 的當前版本已過時，在撰寫本文時（2022 年 12 月）為 7。 下面是一個示例，說明如何僅在縮放控件中手動設置，而不是使用默認值：

 import Map from 'ol/Map'; import Zoom from 'ol/control/Zoom'; import { Tile as TileLayer } from 'ol/layer'; import View from 'ol/View'; const map = new Map({ layers: [ new TileLayer({ source: new OSM(), }), ], target: 'map', view: new View({ center: [0, 0], zoom }), controls: [new Zoom()] });

您可以查看此官方示例以顯示從默認值擴展：

https://openlayers.org/en/latest/examples/navigation-controls.html

如果您想要一個動態添加控件到默認值的示例，這是該行為的一個很好的示例：

https://openlayers.org/en/latest/examples/scaleline-indiana-east.html