maptalks案例之限制地图区域

效果图

核心代码

var map = new maptalks.Map('map', {
  center: [-0.113049, 51.498568],
  zoom: 14,
  centerCross: true,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    attribution: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
  }),
  layers: [
    new maptalks.VectorLayer('v')
  ]
});

var extent = map.getExtent();
debugger;
// set map's max extent to map's extent at zoom 14
map.setMaxExtent(extent);


map.setZoom(map.getZoom() - 2, {
  animation: false
});

map.getLayer('v')
  .addGeometry(
    new maptalks.Polygon(extent.toArray(), {
      symbol: {
        'polygonOpacity': 1,
        'lineWidth': 1
      }
    })
);

自我理解

这个案例主要代码就是一行：map.setMaxExtent(extent);
这行代码设置了地图的最大范围。
那么在地图上是怎么表示地图的最大范围的呢？
自我理解：设置的地图最大范围是一个矩形，这个矩形必须包括可视区域的中心点，这样就可以限制地图区域