OpenLayers基础知识_openlayers 可以一个图层使用epsg:3857一个图层使用4326-CSDN博客

OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。

OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。

要使用OpenLayers，您可以到它的官方网站http://www.openlayers.org下载他的压缩包，解压后可以看到其中的一些目录和文件。

拷贝根目录下的lib目录、根目录下的img目录到你网站的scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一

目录中即可）。

OpenLayers中最重要的2个对象Map和Layer.

OpenLayers.Map的实体化方法： var map = new OpenLayers.Map("map"); 这里参数"map"对应页面中显示Map地图的DIV的id名称。

OpenLayers.Layer为创建图层对象,OpenLayers提供了很多图层的扩展：

* OpenLayers.Layer.Image // Image类封装一个实际图象作为图曾内容

* OpenLayers.Layer.HTTPRequest // HTTPRequest类可以接收一个动态生成的图片，你可以通过HTTPRequest类的参数向服务器发送参数

* OpenLayers.Layer.Grid //Grid类是HTTPRequest类的子类，提供更加详细的方法

* OpenLayers.Layer.WMS //WMS类用于连接WMS服务器以获得图象

* OpenLayers.Layer.KaMap //KaMap 类用于连接MapServer

* OpenLayers.Layer.EventPane //EventPane类作为用于接收用户操作的图层

* OpenLayers.Layer.Google //Google类用于从Google获得图象，它仍然需要你从Google获得API KEY，并且include

* OpenLayers.Layer.VirtualEarth //VirtualEarth类用于操作VirtualEarth的图层

* OpenLayers.Layer.Markers //Markers 类用于生成接收和显示用户本地标记的图层

* OpenLayers.Layer.Text // Text类用于接收CSV文件

* OpenLayers.Layer.GeoRSS // GeoRSS类是Marker类的子类，用于封装接收 GeoRSS并在图层中作出marker

* OpenLayers.Layer.Boxes // Boxes同样也是Marker类的子类，可以用div来做marker，而非image

* OpenLayers.Layer.TMS // TMS 用于接收TMS服务器的地图

OpenLayers还提供了丰富的Control类为地图浏览添加一些工具，继承自OpenLayers.Control类

* OpenLayers.Control.LayerSwitcher

* OpenLayers.Control.MouseDefaults

* OpenLayers.Control.MousePosition

* OpenLayers.Control.MouseToolbar

* OpenLayers.Control.OverviewMap

* OpenLayers.Control.PanZoom

* OpenLayers.Control.PanZoomBar

* OpenLayers.Control.Permalink

* OpenLayers.Control.Scale

这些类的实例会在地图浏览的“窗口”上增加一些工具栏或是“按钮”，增加互动性和功能性。

OpenLayers对常用的数据结构进行了封装

# OpenLayers.LonLat

# OpenLayers.Size

# OpenLayers.Pixel

# OpenLayers.Bounds以便于操作。

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>WMS MAP INIT</title>
    <script src="lib/OpenLayers.js" type="text/javascript"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        function init(){
            //数据存储的左、下、右、上的范围，默认为NULL
           var bounds = new OpenLayers.Bounds( 
				-128 * 156543.0339, 
				-128 * 156543.0339, 
				 128 * 156543.0339, 
				 128 * 156543.0339
				);
            //创建一个OpenLayers.Map构造新的地图。
            var options = { 
				maxExtent: bounds, 
				maxResolution: 156543.0339,  //最大比例下的每像素屏幕地图代表的单位值           
				units: 'm', 
				projection: new OpenLayers.Projection('EPSG:900913'), 
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			};
            var map = new OpenLayers.Map('map', {});
            //创建一个图层信息
            var layer = new OpenLayers.Layer.WMS( 'OpenLayers WMS',  
						'http://vmap0.tiles.osgeo.org/wms/vmap0',  
						{layers: 'basic'},  
						{}  
						);
			//添加矢量图层  
			var ol_vector = new OpenLayers.Layer.Vector( 
				'Editable Vectors' 
			); 
			//添加编辑控件  
			map.addControl(new OpenLayers.Control.EditingToolbar(ol_vector)); 
         
			//Add a layer switcher control 
			map.addControl(new OpenLayers.Control.LayerSwitcher()); 
            //将创建的图层对象添加到Map对象
            map.addLayers([layer,ol_vector]);
            //显示地图
            map.zoomToMaxExtent();
        }
    </script>
  </head>
  
  <body οnlοad="init()">
    <div id="map"></div>
  </body>
</html>