OpenLayers系列(2)多个图层-mysql教程-PHP中文网

OpenLayers系列(2)多个图层

php中文网

发布： 2016-06-07 15:42:46

原创

2338人浏览过

工具的使用步骤请参考 OpenLayers系列(1)——入门示例一节。多图层地图的构成多图层的地图由两种图层构成： base layer 和 overlay layer 。 Base layer: 任何一个地图中都存在至少一个图层，否则你的应用将呈现空白，我们把最基本的一个图层称为base lay

工具的使用步骤请参考 OpenLayers系列(1)——入门示例一节。

多图层地图的构成

多图层的地图由两种图层构成：base layer 和overlay layer 。

Base layer: 任何一个地图中都存在至少一个图层，否则你的应用将呈现空白，我们把最基本的一个图层称为base layer。Base layer不止一种或一个，你可以选择任意一个图层作为应用的base layer，但是任何时候base layer都只能有一个是turn on的，如果程序在打开一个base layer时发现已经存在另一个打开着的base layer，则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio button)一个单选按钮。

Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer，你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。

以上概念你可以在OpenLayers提供的一个图层切换器上形象地看到。

示例1

以下是一个包含两个图层和图层切换器的示例，该示例在base layer上加上了国家，城市，洲名层：

OpenLayers系列(2)多个图层

打开图层切换器：

网奇.NET网络商城系统

系统优势： 1、使用全新ASP.Net＋c#和三层结构开发. 2、可生成各类静态页面（html,htm,shtm,shtml和.aspx) 3、管理后台风格模板自由选择，界面精美 4、风格模板每月更新多套，还可按需定制 5、独具的缓存技术加快网页浏览速度 6、智能销售统计，图表分析 7、集成国内各大统计系统 8、多国语言支持，内置简体繁体和英语 9、 UTF-8编码，可使用于全球

查看详情

OpenLayers系列(2)多个图层

示例1代码：

<!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', {});//初始化map对象
		  var wms_layer_map = new OpenLayers.Layer.WMS( //定义第一个层
			'Base layer',
			'http://vmap0.tiles.osgeo.org/wms/vmap0',
			{layers: 'basic'},//向map server请求basic层
			{isBaseLayer: true}//设置该层为basic层
		  );

		  var wms_layer_labels = new OpenLayers.Layer.WMS(//定义第二个层
			'Location Labels',
			'http://vmap0.tiles.osgeo.org/wms/vmap0',
			{layers: 'clabel,ctylabel,statelabel',
			transparent: true},
			{opacity: .5}//设置透明度为50%
		  );

		  map.addLayers([wms_layer_map, wms_layer_labels]);//以数组形式将多个层加入map对象

		  map.addControl(new OpenLayers.Control.LayerSwitcher({}));//添加一个层切换器

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

    </script>
</head>

<body >
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>

登录后复制

示例2

示例2主要展示部分图层参数的效果，该示例一共有5个图层，第个图层有不同效果，可以不断放大查看。

OpenLayers系列(2)多个图层

代码如下：

<!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_layer_map = new OpenLayers.Layer.WMS(//base layer
			  'Base layer',
			  'http://vmap0.tiles.osgeo.org/wms/vmap0',
			  {layers: 'basic'},
			  {isBaseLayer: true}
			);

	      var wms_layer_labels = new OpenLayers.Layer.WMS(//国家，洲，城市名层
			  'Location Labels',
			  'http://vmap0.tiles.osgeo.org/wms/vmap0',
			  {layers: 'clabel,ctylabel,statelabel',
			  transparent: true},
			  {visibility: false, opacity:0.5}//默认不显示该层(但可以图层切换器中打开)
			);

         var wms_state_lines = new OpenLayers.Layer.WMS(//洲界层
			  'State Line Layer',
			  'http://labs.metacarta.com/wms/vmap0',
			  {layers: 'stateboundary',
				transparent: true},
			  {displayInLayerSwitcher: false,  //设置该层不显示在图层切换器中
			  minScale: 13841995.078125}//设置一个最小尺度，只有当地图在缩放时达到这个最小尺度时才显示该图层信息
			);

		 var wms_water_depth = new OpenLayers.Layer.WMS(
			 'Water Depth',
			 'http://labs.metacarta.com/wms/vmap0',
			 {layers: 'depthcontour',
			 transparent: true},
			 {opacity:0.8}
			);

		 var wms_roads = new OpenLayers.Layer.WMS(
			 'Roads',
			 'http://labs.metacarta.com/wms/vmap0',
			 {layers: 'priroad,secroad,rail',
			 transparent: true},
			 {transistionEffect:'resize'}//让该图层在缩放时呈现重新计算的效果
			);

		map.addLayers([
		  wms_layer_map,
		  wms_layer_labels,
		  wms_state_lines,
		  wms_water_depth,
		  wms_roads]);

		  map.addControl(new OpenLayers.Control.LayerSwitcher({}));

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

    </script>
</head>

<body >
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>

登录后复制