限制地图范围
在日常开发中，我们有可能只需要定位某一区域的地图，无需显示整个地图，从而实现对某位置的聚焦关注，并且可以减少前端和后台地图的数据交互。而这如何实现呢？
在下例中，我们将实现显示经度29°-31°，纬度102°-104°之间的地图。
<!Doctype html>
<html lang="ch">
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>OpenLayers 地图示例</title>
<link href="ol.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置地图中心范围
extent: [102, 29, 104, 31],
// 设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
</script>
</body>
</html>
实现的方法就是添加了extent属性。extent参数类型为[minX, minY, maxX, maxY]的ol.Extent。
我们可以看到在API中，对其进行了清晰的表述：任何超过extent的内容在地图上都不会显示。
限制地图缩放级别
当我们有些地图不希望用户看到是，可以通过设置缩放级别进行限制。
在下例中，我们将会实现10-14级别的缩放。
<!Doctype html>
<html lang="ch">
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>OpenLayers 地图示例</title>
<link href="ol.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10,
// 限制地图缩放最大级别为14，最小级别为10
minZoom: 10,
maxZoom: 14
}),
target: 'map'
});
</script>
</body>
</html>
自适配区域
在实际开发中，我们可能会有一些地图查找和标注的业务，比如查看成都市锦江区。而此时，地图所在的区域可能是北京，我们需要让地图直接定位到锦江区，并且最大化完全的显示这块区域。
下例中，我们将让地图最大化完全显示成都：
<!Doctype html>
<html lang="ch">
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>OpenLayers 地图示例</title>
<link href="ol.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px"></div>
<input type="button" value="显示成都" onclick="fitToChengdu();" />
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
function fitToChengdu() {
// 让地图最大化完全地显示区域[104, 30.6, 104.12, 30.74]
map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize());
}
</script>
</body>
</html>初始：
点击显示成都后：
在API中，是这样对fit方法描述的：
大概意思就是根据你所提供的地图尺寸大小和边界，进行自适应操作。
