在实际使用中,往往只关心某一个区域的地图,而无需显示整个地球的地图,这样可以聚焦于业务,同时可以减少前端和后台的地图数据。无疑,这样的功能是非常有用的。下面我们就将看到,地图只能在经度29度到31度,纬度在102到104度之间显示。
<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script> <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>
<div id="map" style="width: 100%"></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>
就只是添加了 extent: [102, 29, 104, 31],
这行代码就实现了功能。extent
参数类型为[minX, minY, maxX, maxY]
的ol.Extent
,很容易记住。
如果对上面的地图进行缩小,然后再看地图,是否发现范围[102, 29, 104, 31]
外的区域也显示出来了,而这并不是我们期望看到的。这时请注意仔细看extent
参数的说明,这个范围指的是地图中心的限制范围,而不是整个地图显示的范围。那遇到这个问题该怎么办?我们发现,当我们地图放大后,这个问题并不那么明显,地图放大的越大,固定窗口显示的实际地理范围越小。一个简单的办法就是限制地图不能无限缩小,具体允许缩小到哪一级,可通过实际缩小地图到刚好填满整个窗口(id
为map
的div
)来确定。限制地图缩放级别可参见下一节。
这是一种简单的做法,虽然有效,但并不精确,如果要做到非常精确,还需要学习后面更多的知识(分辨率等),在后续章节会有更深入的说明和示例。