Skip to content

Latest commit

 

History

History
53 lines (47 loc) · 2.42 KB

04-06.md

File metadata and controls

53 lines (47 loc) · 2.42 KB

限制地图范围

在实际使用中,往往只关心某一个区域的地图,而无需显示整个地球的地图,这样可以聚焦于业务,同时可以减少前端和后台的地图数据。无疑,这样的功能是非常有用的。下面我们就将看到,地图只能在经度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参数的说明,这个范围指的是地图中心的限制范围,而不是整个地图显示的范围。那遇到这个问题该怎么办?我们发现,当我们地图放大后,这个问题并不那么明显,地图放大的越大,固定窗口显示的实际地理范围越小。一个简单的办法就是限制地图不能无限缩小,具体允许缩小到哪一级,可通过实际缩小地图到刚好填满整个窗口(idmapdiv)来确定。限制地图缩放级别可参见下一节

这是一种简单的做法,虽然有效,但并不精确,如果要做到非常精确,还需要学习后面更多的知识(分辨率等),在后续章节会有更深入的说明和示例。