OpenLayer

最新推荐文章于 2021-10-13 17:27:19 发布

nuoline

最新推荐文章于 2021-10-13 17:27:19 发布

阅读量1.3k

点赞数

分类专栏： GIS

本文链接：https://blog.csdn.net/nuoline/article/details/8610580

版权

GIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

OpenLayer是一个用于浏览器地图展示的js库，用于构建基于网络的地理应用，OpenLayer使用Prototype.js和Rico作为核心库的基础，实现了工业标准的地理数据访问方法（OGC标准）。在企业级GIS应用中，能较好的作为客户端应用开发框架，消除和GIS服务层之间的耦合。

ArcGIS Server 9.3对OGC标准提供了更好的支持，OGC标准成为了OpenLayer和ArcGIS Server服务连接的桥梁，基于Ags服务进行OpenLayer开发，是除了adf、js/flex/silverlight api官方开发框架之外的新选择。

网上已经有很多OpenLayer开发的资源：
http://www.3snews.net/?uid-10624-action-spacelist-type-blog-itemtypeid-793
or Google Search "OpenLayer"

该系列文章会重复部分OpenLayer功能实现，但更重要的是和大家一起研究OpenLayer设计模式，及如何有效利用Ags服务进行OpenLayer开发。

准备工作：

1.下载OpenLayer 2.7
网址：http://openlayers.org/

2.成功安装ArcGIS Server 9.3
安装方法：http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=3891&extra=page%3D1

3.准备一套完整的Sample数据，可以从ArcGIS Tutor中copy一份，也可以使用自己已有的或从网站上下载数据。

暂时无法做好2、3准备工作没有关系，先从OpenLayer（简称OL）开始。

主体内容：

1.分析OL代码框架和构成请参考其他文章，从Sample示例中最简单的地图展现开始

复制内容到剪贴板

代码:


 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>OpenLayers Basic Single WMS Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
         function init(){
             map = new OpenLayers.Map( 'map' );
             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                     "http://labs.metacarta.com/wms/vmap0",
                     {layers: 'basic'} );
             map.addLayer(layer);
             map.zoomToMaxExtent();
         }
     </script>
   </head>
   <body οnlοad="init()">
     <h1 id="title">Basic Single WMS Example</h1>
     <div id="tags"></div>
     <div id="shortdesc">Show a Simple Map</div>
     <div id="map" class="smallmap"></div>
     <div id="docs">
         This example shows a very simple layout with minimal controls.  This example uses a single WMS base layer.
     </div>
   </body>
 </html>

几个关键点：
(1)引入OpenLayer.js
(2)body onload中初始化地图

OpenLayer.Layer要和中文翻译的“图层”概念区分开，这里的一个Layer是一个完整的服务，例如Ags服务器发布出来的一个WMS服务，这个服务可能有一个或多个图层组成。

2.理解OpenLayer.Layer

复制内容到剪贴板

代码:


 function init(){
     map = new OpenLayers.Map('map');
 
     var ol_wms = new OpenLayers.Layer.WMS(
         "OpenLayers WMS",
         "http://labs.metacarta.com/wms/vmap0",
         {layers: 'basic'}
     );
 
     var jpl_wms = new OpenLayers.Layer.WMS(
         "NASA Global Mosaic",
         "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
         {layers: "landsat7"}
     );
 
     var dm_wms = new OpenLayers.Layer.WMS(
         "DM Solutions Demo",
         "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
         {
             layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                 "prov_bound,fedlimit,rail,road,popplace",
             transparent: "true", format: "image/png"},
         {
             minResolution: 0.17578125,
             maxResolution: 0.703125
         }
     );
 
     map.addLayers([ol_wms, jpl_wms, dm_wms]);
     map.addControl(new OpenLayers.Control.LayerSwitcher());
     map.zoomToMaxExtent();
 }

这里添加了三个wms服务，每个服务都是作为OL Map的一个Layer，运行之后可以看到Base Layer和Overlayers，并不包含三个服务中的具体图层。

服务前面有的是单选框，有的是复选框，显示复选框是因为设置了transparent为true，透明图层一般放置在地图上方，不会用做底图，因此OL使用复选框方便用户选择或取消该服务地图的显示，设置为false之后，全部为底图只能单选。

3.一次性添加多个服务
除了map.addLayers逐个添加服务外，还可以将多个服务作为一个Array一次性加入map中：

复制内容到剪贴板

代码:

function init(){
 map = new OpenLayers.Map( 'map' );
 
 var urlArray = ["http://t1.labs.metacarta.com/wms-c/Basic.py",
 "http://t2.labs.metacarta.com/wms-c/Basic.py"];
 layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", urlArray, {layers: 'basic'} );
 map.addLayer(layer);
 }

4.OL文档

OL在线和下载包中都有一份参考文档，devdocs更全一些，但还是没有囊括所有参数说明，可以从前面使用到的OpenLayer.Layer.WMS对象得到证实，构造方法中的参数：
name {String} A name for the layer
url {String} Base url for the WMS (e.g. http://wms.jpl.nasa.gov/wms.cgi)
params {Object} An object with key/value pairs representing the GetMap query string parameters and parameter values.
options {Ojbect} Hashtable of extra options to tag onto the layer

到此就没有更详细的说明了，只能根据Sample示例和源码去积累，如第三组参数除layers外还有：

复制内容到剪贴板

代码:

{
 layers: "bathymetry,land_fn,park,drain_fn,drainage,prov_bound,fedlimit,rail,road,popplace",
 transparent: "true",
 format: "image/png"
 }

还可以设置第四组参数{'displayInLayerSwitcher': false}，layer服务将不显示在服务列表（上图中的蓝色面板）中，默认值为true。{'isBaseLayer': false}，默认值为true，服务前显示单选框。这些都需要我们逐步去摸索。

5.OpenLayers.Layer.WMS

刚才提到过两个参数displayInLayerSwitcher、isBaseLayer，它们并没有在OpenLayers.Layer.WMS定义，而是在父类OpenLayers.Layer，中间还有OpenLayers.Layer.HTTPRequest、 OpenLayers.Layer.Grid，文档中没有详细说明，但可以从源码中获得更多信息。从这种继承关系中可以发现，OpenLayers继承全部通过prototype原型继承方式实现。

小结：

Map对象是地图展示的核心，一切和地图操作相关都要和Map打交道，里面的属性方法很多，可以去学习controls入手，之前我们都没有定义 controls，但还是可以通过鼠标操作地图，那是因为默认情况下，地图自动拥有Navigation、PanZoom、ArgParser、 Attribution四个controls。

（转自 http://www.cnblogs.com/flyingis/archive/2008/11/07/1328987.html）作者：Flyingis

nuoline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
OpenLayer

OpenLayer是一个用于浏览器地图展示的js库，用于构建基于网络的地理应用，OpenLayer使用Prototype.js和Rico作为核心库的基础，实现了工业标准的地理数据访问方法（OGC标准）。在企业级GIS应用中，能较好的作为客户端应用开发框架，消除和GIS服务层之间的耦合。 ArcGISServer9.3对OGC标准提供了更好的支持，OGC标准成为了OpenLayer和A
复制链接

扫一扫

专栏目录