如何使用openlayers 6设置XYZ源的范围

<script src="https://cdn.jsdelivr.net/npm/ol@6.6.1/dist/ol.js"></script>

<div id="map" style="width: 100%; height: 400px;"></div>

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        maxZoom: 18
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

var xyzSource = map.getLayers().getArray()[0].getSource();
xyzSource.setExtent(ol.proj.transformExtent([-180, -90, 180, 90], 'EPSG:4326', 'EPSG:3857'));