OpenLayers设置地图缩放最小范围和最大范围_openlayers6 限制显示范围-优快云博客

本文链接：https://blog.youkuaiyun.com/asuyunlong/article/details/52065614

本文介绍如何使用OpenLayers设置地图的显示范围及最小最大缩放级别。通过定义地图对象的options属性来实现地图边界的设定，并通过实例演示了如何加载WMS图层并激活选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

OpenLayers设置地图缩放最小范围和最大范围

function init()
		{
			var options=
			{
				projection: "EPSG:4326",				
				eventListeners: 
				{
					"moveend": mapEvent,
					"zoomend": mapEvent
				},
				controls: 
				[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					//new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.ScaleLine(),
					//new OpenLayers.Control.Scale(),
					new OpenLayers.Control.MousePosition(),
					new OpenLayers.Control.KeyboardDefaults()
				],
				//numZoomLevels:20
				minResolution:"auto",
				minExtent:new OpenLayers.Bounds(119.66509,32.23268,121.37895,32.77925),
				maxResolution:"auto",
				maxExtent:new OpenLayers.Bounds(118.84386,31.93193,122.27159,33.02782)
			};
			map=new OpenLayers.Map("map_element",options);
			var wms=new OpenLayers.Layer.WMS("OpenLayers WMS",
				"http://127.0.0.1:8989/geoserver/map/wms", 
				{ 
					layers:"map:china"
				});
			//添加wms图层
			//map.addLayer(wms);
			map.addLayers([wms,test,train]);
			selectControl=new OpenLayers.Control.SelectFeature([train,test],
            {
            	onSelect:onFeatureSelect, 
            	onUnselect:onFeatureUnselect
            });
            map.addControl(selectControl);
            selectControl.activate();
			map.setCenter(new OpenLayers.LonLat(lon,lat),zoom);
			$(".close_btn").hover(function()
			{
				$(this).css({color:'black'});
			},function() 
			{
				$(this).css({color:"#999"}); 
			}).on('click',function() 
			{
				$("#LoginBox").fadeOut("fast");
				$("#mask").css({display:'none'});
			});
			$("#closehostidBtn").hover(function()
			{
				$(this).css({color:'black'});
			},function() 
			{
				$(this).css({color:"#999"}); 
			}).on('click',function() 
			{
				$("#hostidBox").fadeOut("fast");
			});
			$("#zyxxCloseBtn").hover(function()
			{
				$(this).css({color:"black"});
			},function()
			{
				$(this).css({color:"#999"});
			}).on("click",function()
			{
				$("#zyxxDiv").fadeOut("fast");
			});
		}