OpenLayers系列(4)——使用控制器

最新推荐文章于 2025-01-10 10:39:02 发布

bob007abc

最新推荐文章于 2025-01-10 10:39:02 发布

阅读量2.3k

点赞数

分类专栏： Web开发学习笔记

本文链接：https://blog.youkuaiyun.com/bob007abc/article/details/8111713

版权

学习笔记同时被 2 个专栏收录

19 篇文章

订阅专栏

Web开发

15 篇文章

订阅专栏

本文介绍了OpenLayers中控制器的使用，包括如何在地图初始化时添加控制器，以及如何在地图对象创建后动态添加。默认的四种控制器分别是Navigation、PanZoom、ArgParser和Attribution。文章还讨论了如何移除控制器，重点讲解了Panel控制器的特性，包括TYPE_BUTTON、TYPE_TOGGLE和TYPE_TOOL三种类型。最后，通过示例展示了如何创建自定义的Button控制器并将其添加到地图中。

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

控制器可以使用在地图上，也可以使用在地图之外的元素如<div>中。

添加控制器有两种方式：

1.在map对象初始化时以js数组的形式把OpenLayers控制器传入

2.在map对象初始化后，调用addControl()来添加单个控制器或者addControls()传入一个控制器数组对象

当一个map对象被初始化后，默认会有4种控制器：

1.OpenLayers.Control.Navigation:
用来控制地图与鼠标事件的互动，如拖曳，缩放，滚动，双击。

2.OpenLayers.Control.PanZoom:

在地图的左上方添加一个平移与缩放的工具条

3.OpenLayers.Control.ArgParser:

使地图可以在缩放到指定大小时根据URL参数打开或关闭一些图层

4.OpenLayers.Control.Attribution:

允许通过layer向map添加属性

如果想要创建一个不包含任何控制器的地图，则在创建map对象时使用下面代码

map = new OpenLayers.Map('map_element', {
  controls: []  //设置一个空的控制器数组以清除默认控制器
});

示例：向地图添加控制器

代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
   <title>My OpenLayers Map</title>
    <script type='text/javascript' src='OpenLayers.js'></script>
    <script type='text/javascript'>

        var map;

       function init() {
	   //创建控制器数组
		   var navigation_control = new OpenLayers.Control.Navigation({});
		   var controls_array = [
								  navigation_control,
								  new OpenLayers.Control.PanZoomBar({}),
								  new OpenLayers.Control.LayerSwitcher({}),
								  new OpenLayers.Control.Permalink(),
								  new OpenLayers.Control.MousePosition({})
								];

		   map = new OpenLayers.Map('map_element', {
			  controls: controls_array
			});//初始化map时加入定义的控制器



           var wms_layer = new OpenLayers.Layer.WMS(
					  'WMS Layer Title',
					  'http://vmap0.tiles.osgeo.org/wms/vmap0',
					  {layers: 'basic'},
					  {}
					);

		   map.addLayer(wms_layer);

		   map.addControl(new OpenLayers.Control.ScaleLine());//使用对象方法添加控制器

		   var overview_map = new OpenLayers.Control.OverviewMap();//创建一个预览控制器
		   
		   map.addControls([
				  overview_map,
				  new OpenLayers.Control.KeyboardDefaults()
				]);

           if(!map.getCenter()){
               map.zoomToMaxExtent();
           }
       }

    </script>
</head>

<body οnlοad='init();'>
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>

可以在http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html 查看所有支持的控制器。

移除控制器

使用map.removeControl()方法，有两种调用方式：

1.调用map.removeControl(map.controls[x])，其中x代表控制器数组的索引值。

但并不推荐这种调用方式，因为一旦使用该方法去掉控制器，其他控制器的索引就会移动使得原来的索引值发生变化

2.调用 map.removeControl(control_object)，其中control_object代表控制器对象本身

控制器的类型

Panel(面板)

面板控制器是一个容器，它允许把其他控制器添加并组织在面板中。

每个在面板中的控制器都会用一个图标来表示，当点击图标时会调用该控制器的activateControl方法，这一点很重要，因为有很多控制器不会自动转换到active状态。

面板中的每个控制器都是以下三种类型之一：

1.OpenLayers.Control.TYPE_BUTTON:

这是一种按钮类型的控制器，当点击时会触发事件。例如在ZoomPanel控制器中的ZoomIn和ZoomOut按钮

2.OpenLayers.Control.TYPE_TOGGLE:

这种类型的控制器当点击后可用，再次点击又可关闭。这类控制器不会互相影响，你可以打开任意多个。

3.OpenLayers.Control.TYPE_TOOL:

这种类型的控制器与toggle类型一样，唯一的区别是这类控制器同一时间只能有一个是打开的。如ZoomBox

面板示例：

代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
   <title>My OpenLayers Map</title>
    <script type='text/javascript' src='OpenLayers.js'></script>
    <script type='text/javascript'>

        var map;

       function init() {
           map = new OpenLayers.Map('map_element', {});
           var wms = new OpenLayers.Layer.WMS(
               'OpenLayers WMS',
               'http://vmap0.tiles.osgeo.org/wms/vmap0',
               {layers: 'basic'},
               {}
           );

           map.addLayer(wms);

		   var navigation_control = new OpenLayers.Control.Navigation();

		   var control_panel = new OpenLayers.Control.Panel({//创建面板控制器
			  div: document.getElementById('panel_div'),
			  defaultControl: navigation_control
			});

		   control_panel.addControls([//向面板中添加其他控制器
			  navigation_control,
			  new OpenLayers.Control.ZoomBox(),
			  new OpenLayers.Control.ZoomToMaxExtent()
			])

		   map.addControl(control_panel);//将面板控制器添加到map上

           if(!map.getCenter()){
               map.zoomToMaxExtent();
           }
       }

    </script>
<!-- 设置各控制器的样式，如果不设置，则控制器无法显示，页面呈现空白-->
	<style type='text/css'> 
    /*Navigation Control*/ 
    #panel_div .olControlNavigationItemActive { 
      background: #226699 url('http://dev.openlayers.org/releases/OpenLayers-2.9.1/theme/default/img/pan_on.png'); 
      width:  22px;  
      height: 22px; 
    } 
    #panel_div .olControlNavigationItemInactive { 
      background: #996622 url('http://dev.openlayers.org/releases/OpenLayers-2.9.1/theme/default/img/pan_off.png'); 
      width:  22px;  
      height: 22px; 
    } 
    /*Zoom Box Control*/ 
    #panel_div .olControlZoomBoxItemInactive { 
      width:  22px;  
      height: 22px; 
      background:#999933 url('http://dev.openlayers.org/releases/OpenLayers-2.9.1/img/drag-rectangle-off.png'); 
    } 
    #panel_div .olControlZoomBoxItemActive { 
      width:  22px;  
      height: 22px; 
      background:#999966 url('http://dev.openlayers.org/releases/OpenLayers-2.9.1/img/drag-rectangle-on.png'); 
    } 
	    /*Zoom to Max Extent Control*/ 
    #panel_div .olControlZoomToMaxExtentItemInactive { 
      width:  18px;  
      height: 18px; 
      background:#333399 url('http://dev.openlayers.org/releases/OpenLayers-2.9.1/img/zoom-world-mini.png'); 
    } 
</style>
</head>
<body οnlοad='init();'>
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
	<div id='panel_div'></div><!--在map之外创建一个panel并放置在该标签处，用以存放控制器-->
</body>
</html>

自定义控制器

使用控制器的子类OpenLayers.Control.Button创建一个自定义的按钮控制器

步骤如下：

1.设置该按钮控制器的displayClass属性以设定一种样式

2.创建一个函数作为按钮触发器

3.把按钮添加到面板并把面板添加到map中

示例--创建一个简单的自定义按钮控制器

代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
   <title>My OpenLayers Map</title>
    <script type='text/javascript' src='OpenLayers.js'></script>
    <script type='text/javascript'>

        var map;

       function init() {
           map = new OpenLayers.Map('map_element', {});
           var wms = new OpenLayers.Layer.WMS(
               'OpenLayers WMS',
               'http://vmap0.tiles.osgeo.org/wms/vmap0',
               {layers: 'basic'},
               {}
           );

           map.addLayer(wms);

		   var custom_button_func = function(){ 
			  //Get a random coordinate from -90 to 90
			   var random_lon = Math.floor(Math.random() * 360) - 180;
			   var random_lat = Math.floor(Math.random() * 180) - 90;
			   if(map.layers[0].opacity === 1){ 
					//If the layer opacity is 1 (fully opaque), then change it and zoom
					map.layers[0].setOpacity(.5); 
					map.setCenter(new OpenLayers.LonLat(random_lon,random_lat), 3); 
			   } 
			   else{ 
					//If the layer opacity is anything but 1, change it and zoom 
					map.layers[0].setOpacity(1); 
					map.setCenter(new OpenLayers.LonLat(random_lon,random_lat), 3); 
			   } 
		}; 
		  
		   var my_button = new OpenLayers.Control.Button({
				  displayClass: 'olControlCustomButton', //添加样式
				  trigger: custom_button_func//添加触发器
				});
		
		   var control_panel = new OpenLayers.Control.Panel({});//直接在map上创建面板

		   control_panel.addControls([my_button]);

		   map.addControl(control_panel);

		   control_panel.moveTo(new OpenLayers.Pixel(450,0));//移动面板到指定位置，也可用CSS调整

           if(!map.getCenter()){
               map.zoomToMaxExtent();
           }
       }

    </script>
<!-- 为按钮控制器添加样式 -->
	<style type='text/css'> 
        /*Custom Button*/ 
        .olControlCustomButtonItemInactive { 
            background:#22dd22; 
            border:5px solid #202020; 
            cursor: pointer; 
            height: 28px; 
            width:  28px;  
        } 
    </style> 
</head>

<body οnlοad='init();'>
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>