效果图
核心代码
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);
这行代码设置了地图的最大范围。
那么在地图上是怎么表示地图的最大范围的呢?
自我理解:设置的地图最大范围是一个矩形,这个矩形必须包括可视区域的中心点,这样就可以限制地图区域