Openlayers6 Examples学习笔记（6）

Interaction Options（互动选项）

此示例使用自定义ol/interaction/defaults配置：默认情况下，滚轮/触控板缩放和拖动平移始终处于激活状态，这在包含大量可滚动内容和嵌入式地图的页面上可能是意外的。要仅在地图具有焦点时执行滚轮/触控板缩放和拖动和平移操作，请设置onFocusOnly: true为选项。这需要具有tabindex属性集的map div 。
案例链接

Limited Layer Extent（限制图层范围）

案例链接

Layer Spy（地图探查）

案例链接

Layer Swipe（卷帘地图）

案例链接

Layer Zoom Limits（图层缩放限制）

图层支持minZoom和maxZoom选项，用于根据视图的缩放级别控制可见性。如果设置了最小或最大缩放，则该图层仅在大于minZoom，小于或等于的缩放级别下可见maxZoom。构造后，可以使用图层的setMinZoom和setMaxZoom来设置限制。此示例显示了缩放级别为14或更低的OSM层和缩放级别高于14的USGS层。
案例链接

Localized OpenStreetMap（本地化的OSM）

案例链接

Layer Z-Index（图层的Z-Index）

案例链接

LineString Arrows（绘制带有箭头的线）

案例链接

Mapbox-gl Layer（加载Mapbox-gl 图层）

显示如何在openlayers地图中添加mapbox-gl-js图层。注意：使用此示例时，请确保在https://www.maptiler.com/cloud/上获得自己的API密钥。API密钥过期后，将看不到任何地图。
案例链接

Layer Min/Max Resolution（图层最小/最大分辨率）

设定最大/最小分辨率，实现地图多个图层的分级显示

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import TileJSON from 'ol/source/TileJSON';

var key = 'Your Mapbox access token from https://mapbox.com/ here';

/**
 * Create the map.
 */
var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
      minResolution: 200,
      maxResolution: 2000
    }),
    new TileLayer({
      source: new TileJSON({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + key,
        crossOrigin: 'anonymous'
      }),
      minResolution: 2000,
      maxResolution: 20000
    })
  ],
  target: 'map',
  view: new View({
    center: [653600, 5723680],
    zoom: 5
  })
});