Openlayers Restricted Extent

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

#map {
  height: 230px;
}

JavaScript

var _min = [113.830955, 22.1466919];
 var _max = [114.4475656, 22.561953621 ];
 
 var _extent = ol.extent.boundingExtent([_min, _max]);
 var extent3857 = ol.proj.transformExtent(_extent, 'EPSG:4326', 'EPSG:3857')
			               
 var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809';
 var map = new ol.Map({

   target: 'map',
   layers: [
     new ol.layer.Tile({ source: new ol.source.OSM() }),
     new ol.layer.Tile({
       source: new ol.source.XYZ({
         attributions: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
         url: 'https://landsd.azure-api.net/tileservices/basemap/WGS84/2017/{z}/{x}/{y}.png?key=' + apikey
         
       }),
       //extent:extent3857
     }),
     new ol.layer.Tile({
       source: new ol.source.XYZ({

         attributions: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
         url: 'https://landsd.azure-api.net/tileservices/label/WGS84/2017/tc/{z}/{x}/{y}.png?key=' + apikey
       }),
       extent:extent3857
     })
   ],
   view: new ol.View({
     center: ol.proj.fromLonLat([114.20847, 22.29227]),
     zoom: 11,
     minZoom: 10,
     maxZoom: 19,
     extent:extent3857 
   })
 });