This is the 16th day of my participation in the August Text Challenge.More challenges in August

What is the control

  1. ControlsIt’s used to control the map. For example, control map size through buttons, add decoration on map map, etc.
  2. inOpenlayersIn the mostControlsYou can just add it to the map, likeNavigation bar. The second type is the need to putDiv elementsIn order to use. The third type needs to be placed inPanelThe operation is similar to a web pageHTMLIn thebuttonButton that needs to be clicked or bound to work. The last category is custom typed.

Common controls

  • controldefaults, maps contain controls by default.
  • fullscreen, full screen control for full screen view of the map.
  • mouseposition, mouse position control, display the coordinates of the map position of the mouse, you can customize the projection.
  • overviewmap, map global view control (eagle eye).
  • scaleline, scale control.
  • zoom, map control.
  • zoomsliderMap zoom slider scale control.

Use a control

  • Instantiation mapmap, by parametercontrolPass, do not pass the default valuecontroldefaultsControl in.
  • You can also usemapThe object’saddControl()oraddControls()Method is added to the mapControlsObject.
  • Need to continue to add controls on the basis of the default control, you can useol.control.defaults().extend([new ol.control.FullScreen()])Method passed in.

Instantiation map

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  <body>
    <div id="map" class="map"></div>
  </body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    / / layer
    var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})/ / view
    var view = new ol.View({
      center: ol.proj.fromLonLat([37.41.8.82]),
      zoom: 4
    })

    map.setView(view)
    map.addLayer(layerTile)
  </script>
</html>
Copy the code

Fullscreen fullscreen control

map.addControl(new ol.control.FullScreen())
Copy the code

Mouseposition Displays the coordinates of the mouse

    var mousePositionControl = new ol.control.MousePosition({
      // Map projection coordinate system (if not set output is the default projection coordinate system coordinates)
      projection: 'EPSG:4326'.// The target container that displays mouse position information
      target: document.getElementById('mouse-position'),
      // Mark of undefined coordinates
      undefinedHTML: ' '
    })
    this.map.addControl(mousePositionControl)
Copy the code

Scaleline control, Zoom control, ZoomSlider control

map.addControl(new ol.control.ScaleLine())
map.addControl(new ol.control.Zoom())
map.addControl(new ol.control.ZoomSlider())
Copy the code

Overviewmap Global view of the map

  • Create a new control using the map as another overview diagram that defines the map.
  • Commonly used parameters
  1. collapsed, the shrink option, defaults to true, shrink.
  2. collapsibleCan be shrunk to an icon button. Default is true.
  3. label, the text or symbol displayed on the icon button when overviewMapControl shrinks to the icon button. The default value is ».
  4. layersThe default value is all layers. Generally, the values set here are the same as those set in map.
    var overview = new ol.control.OverviewMap({
      collapsed: false.layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
          })
        })
      ]
    })
    map.addControl(overview)
Copy the code
  • Of course, in addition to these controls, there are other controls on the official website.
  • We can also customize controls to manipulate the map. You can create an instance of a simple custom control by creating an element using a listener:
var myControl = new Control({element: myElement});
Copy the code
  • Then add it to the map.