如何删除 OpenLayers-Map 中的标准控件？

Question

I use OpenLayers and want to create another navigation-control in the upper-left side. I know how to add Controls, but this navigation is added at default while creating the OpenLayers-Map. So I want to remove that Control, to add an own. I know already, that the default-control is an OpenLayers.Control.PanZoom.

Answer 1

The map object has a property called controls that is an array of OpenLayers.Control objects. If this property is not explicitly set then OpenLayers will assume that you want the default control set, including OpenLayers.Control.Navigation() , OpenLayers.Control.PanZoom() , OpenLayers.Control.ArgParser() , and OpenLayers.Control.Attribution() .

To remove PanZoom or any other default control, simply set the controls property array at the time you construct the Map object. Here is a code example:

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

Here is a live example .

Please note that by setting the controls property that you will not get any Control objects be default. Any controls you need must be added manually.

Here is a link to the source code of the Map object if you want to see how it works for yourself.

Answer 2

Traverse the array of controls and then remove the zoom control

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

Answer 3

I would have expected map.removeControl(OpenLayers.Control.PanZoom) to work but apparently not.

Answer 4

The other answers are out of date in relation to the current verison of OpenLayers which is 7 at time of writing (Dec 2022). Here is an example of how to just at the Zoom control in manually, rather than using the defaults:

 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()] });

You can check out this official example to show extending from the defaults:

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

If you want an example of adding a control to the defaults dynamically this is a good example of that behaviour:

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