[关闭]
@Rico 2015-01-13T10:06:56.000000Z 字数 7568 阅读 3767

OpenLayers 2.10 入门指南1-3翻译

OpenLayers

pic

第一章:创建你的第一个OpenLayers程序

开始

在最近几年里，交互式地图突然开始爆发式流行。在过去，创建交互式地图依赖于与大公司或者投入很多钱，但是现在，借助于像谷歌和雅虎的免费服务，在线地图变得触手可及。今天，借助于正确的工具，每一个人可以在几乎不需要任何地理学、地图学、和编程知识的情况下轻松的创建一个web地图。

创建你的第一个地图

P书15
让我们开始进入OpenLayers的世界并创建一个地图。在完成这章节后，你应该懂得如何去创建一个利用OSGEO公共的wms服务的地图

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>HTML</title>
  6. <style>
  7. body,html{width:99%;height:99%}
  8. </style>
  9. <script type="text/javascript" src="OL/OpenLayers.js" ></script> 
  10. <script type="text/javascript">
  11.     var map;
  12.     function init(){
  13.      map=new OpenLayers.Map('map',{});
  14.      var wms=new OpenLayers.Layer.WMS(
  15.         'OpenLayers WMS',
  16.         'http://vmap0.tiles.osgeo.org/wms/vmap0',
  17.         {layers:'basic'},
  18.         {}      
  19.       );
  20.      map.addLayer(wms);
  21.      if(!map.getCenter()){
  22.         map.zoomToMaxExtent();
  23.      }
  24.     }
  26. </script>
  27. </head>
  28. <body onload='init();' >
  30.     <div id="map" style=" z-index:0;left:0px;top:0px;height:100%;width:100%">
  31.     </div>
  32. </body>
  33. </html>

pic

P20
代码13行：var wms=new OpenLayers.Layer.WMS(利用Layer对象的子类WMS类为地图创建了一个Layer对象，在OpenLayers中，每个地图至少需要一个图层。这个图层可以是任何不同的服务，但是我们这里用的是WMS(一个的web底图服务，这个国际标准被一个开放地球空间组织OGC所制定)
代码第14行OpenLayers WMS,这是第一个参数:图层的标题，多数图层类的第一个参数时图层的标题，标题的文本可以随便写，唯一的要求就是可读性
代码第15行'http://vmap0.tiles.osgeo.org/wms/vmap0'这是WMS图层的第二个参数，现在，我们正在使用公共的来自于OSGeo的WMS服务，第三章我们会深度讲解
代码第16行{layers:'basic'},第三个参数时一个匿名的对象包含着图层的属性，对于WMS图层必须明确指定

对于WMS图层，我们至少需要传一个图层key，这上面这个例子是"basic" ，这个图层参数指定了在地图服务器上的具体哪个图层，所以，当你向WMS服务器请求一个地图图像时，它向你传送一个由该图像组成的图层。你当然也可以向地图服务器请求多个不同的图层，这上面这个例子中，我们只需要WMS服务器给我们一个包含着称为"basic"的图层的图像

代码第17行{}这第四个参数是一个可选择的option对象，这些特性通常每个OpenLayers的图层所都有 。举个例子，不管是什么图层类型(举个例子:WMS或者Google地图)，你可以传递一个透明度(举个例子:{opacity:0.8}80%的透明度)，所以，不管你现在是WMS还是Vector图层，这个透明度属性可以应用于每个图层。

注意:由于这是传递给Layer对象的最后一个参数，请确保没有多余的逗号。

这个options对象是可写可不写的，但是我们通常都写它。保持代码规范并写一个空对象{}是一个很好的习惯,尽管我们并不打算传给它任何值。

代码第18行 ); 结束对象

代码第18行map.addLayer(wms);
现在我们有了一个已经创建好了的wms_layer对象，我们需要将它加入到map对象。事实上有很多方法可以将图层加入到map对象上。我们可以用像上面那个方法一样传入一个独立的图层(map.addLayer)，或者我们可以通过map.addLayers:map.addLayers([layer1,layer2,...]);
这里，我们传入了一个图层数组。这两个方法都是等价的，但当我们有多个图层的时候第二种方法显然更方便。

你当然也可以在你创建map对象前创建图层对象并传递这个图层对象给map 举个例子:
map=new OpenLayers.Map('map_element',{layers:[layer1,layer2,...]});

代码第22-23行 

  1. if(!map.getCenter()){
  2.  map.zoomToMaxExtent();
  3. }

P书23
最后，我们必须制定地图的可视范围。这里移动地图的代码是map.zoomToMaxExtent(),这句代码将地图移动到了地图的最大范围，这里有个if语句，这个if语句检查地图是否已经有了一个中心点。
为什么要加上这个检查呢？默认的，地图可以接收一个特别格式包含一个范围和指定图层是否显示的参数的URL，通常术语称为链接。如果我们不检测是否已经有了地图中心点的话，链接就会失效

注：默认的，地图加了一个参数解析器通过解析URL来获取一些信息用来控制地图。我们将在第六章讲解这个问题，不过现在可以简单看看效果通过如下URL，这个URL会将地图缩放至同样的坐标和缩放级别?zoom=4&lat=56&lon=-116,所以你的URL可能是这样的:c:/code/index.html?zoom=4&lat=56&lon=-116

有很多方法去设定地图的范围，如果你想展示更大些的范围，map.zoomToMaxExtent()方法是一个又快又好的方法，还有一些其他方法，比如map.zoomToExtent(new OpenLayers.Bounds([minx,miny,maxx,maxy]);
还有一些其他方法，如果你想把地图在初始时缩放到一个一个指定的地方，你可以这样 

  1. map.setCenter(new OpenLayers.LonLat(x,y));
  2. map.zoomTo(5);

这里的X,Y是经度和纬度，5是缩放级别，默认的，地图有16个缩放级别，这个可以在地图对象创建的时候通过numZoomLevels属性在指定。

还有很多方法，但是以上说的这些是常用的策略方法。最基本的方法是你需要具体指定一个中心点和缩放级别。

第二章:通过Firebug解决Bug

前端调试基础知识，不翻译了

第三章:OpenLayers中的'图层'

地图包含着大量的信息，但是一些地图展示的并不完善，搞清楚哪些信息需要被展示在地图上是一门艺术，创建一个配色和各项细节都完美的出版地图也是十分难的。

幸运的是，创建一个web地图是十分简便的，因为我们可以让使用者决定他们想要看到什么信息。想象有两个人正在看一张城市地图--一个人仅仅关心公交车路线，另一个人仅仅关心自行车路线。我们可以创建一个包含两个图层(一个包含自行车路线，一个包含公交车路线)的简单的map来代替创建两个地图。

OpenLayers提供了很多图层种类供我们选择和使用。我们可以做很多事情，比如改变图层的透明度，选择是否显示图层，改变图层顺序等等。

在这章节我们将从具体和抽象方面讲述Layers是什么。最后，你将拥有足够的经验和知识来使用不同类型的图层并且将他们相互配合。在这章，我们将

什么是图层

P书50
图层是一个最基本的展示多个独立层级信息的方法。图层不仅仅是地图学或是制图学的概念。绘画设计师和数字艺术家对图层有着十分多的运用。

OpenLayers中的图层

OpenLayers是一个JavaScript框架，而且是用面向对象方法构建的。当我们要创建一个图层，我们创建或者说实例化一个OpenLayers中Layer对象。
OpenLayers有很多不同的图层类，每一个都允许你去使用不同类型的地图服务器作为后台支持。举个例子，如果你想用WMS地图的地图服务器，你将使用Layer.WMS类，如果你想要使用Google地图，你将使用Layer.Google类，每一个图层对象都独立于其他图层对象，所以对一个图层进行操作不会影响到其他图层。

注:我们能同时拥有有多少图层？
在一个map对象上我们能同时拥有的最大的图层书很多程度上取决于用户的电脑性能(他们的处理器性能和内存)太多的图层会将用户的电脑给死机。许多刘贤的地图（比如Google和雅虎）仅仅包含了很少的图层，如果你需要使用很多图层，比如50个，我觉得必要时销毁他们可能更好，太多图层可能会拖慢你的电脑

不论你的网页地图应用程序是什么目的，你至少需要一个图层。一个没有任何图层的OpenLayers地图就像没有一张地图的地图册。你需要至少一张图层--一张Base Layer(底图层)。所有其他图层都是在底图层之上的，称之为‘覆盖图层’。这是两种OpenLayers中的不同类型的图层。

Base Layer 底图

一个底图层是处于图层列表中的最底部，其他图层都在它上面。图层的顺序是可以改变的。，但是低图层始终都是在覆盖图层的下面的 。默认的，你加到map上的第一个图层就是底图层。当然你可可以通过改变任何图层的属性来使它成为底图层(通过设定isBaseLayer属性为true)。
你也可能拥有多个底图层。然而，同时只能有一个底图层。一旦设置了一个底图层，其他所有的底图层都被关闭了。覆盖图层并不是这样工作的，打开或者关闭并不会影响其他覆盖图层。底图层有点像单选按钮--同一时刻仅仅只能有一个是选中的。覆盖图层更像是复选框-你可以同时将很多给关了或者打开

在写本文的同时，有关于移除BaseLayer这个专业术语并使用互动高级图层来替代它。如果你看到了这样的称呼，这个概念和底图层是一样的。

overlay Layers覆盖图层

任何不是底图层的图层称为覆盖图层。加在地图上的顺序很重要。每次你加一个图层到地图上，它会覆盖在前一个图层上。

在这本书书接下来的内容中，我们将使用在第一章创建的地图作为模板，唯一区别就是我们将不会使用创建WMS图层的那一行代码。本书网址http://vasir.net/openlayers_book/

是时候动手了--创建一个多图层的地图

让我们创建一个拥有两个WMS图层的地图吧。一个图层将作为底图，另一个包含有国家洲和城市标注的将作为覆盖图层。

  1. Create a copy of the file you made for the last example of Chapter 1 and remove
    the existing WMS layer code (or, use the template from http://vasir.net/
    openlayers_book/). You can name it whatever you'd like, but we'll refer to it as
    chapter3_ex1_wms_layers.html. Make sure it is in the same directory as your
    OpenLayers.js file.
    The 'Layers' in OpenLayers
    [ 52 ]
  2. First we're going to remove everything that was in the init() function. Your
    function should now look like this:
    function init() {
    }
  3. Next, inside the init() function, we're going to setup our map object like before:
    map = new OpenLayers.Map('map_element', {});
  4. Now we're going to create our first layer. We'll use a WMS layer and ask the WMS
    server for the layer 'basic' (a layer on the WMS service). We'll also explicitly set it
    to be a base layer.
    var wms_layer_map = new OpenLayers.Layer.WMS(
    'Base layer',
    'http://vmap0.tiles.osgeo.org/wms/vmap0',
    {layers: 'basic'},
    {isBaseLayer: true}
    );
  5. Let's create a second layer object now. It will also be a WMS layer. This time, we're
    going to ask for a few different layers from the WMS service—a bunch of labels.
    We're also going to set the transparent property to true, so the map images
    which the server sends back will be transparent. We'll also set the opacity to be 50
    percent (by setting the opacity to .5). This layer will be an overlay layer.
    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}
    );
  6. Time to add the layers to the map. We'll use the addLayers function and pass in an
    array of layer objects.
    map.addLayers([wms_layer_map, wms_layer_labels]);
  7. Now, let's add a Layer Switcher control that will show us the layers on the map.
    map.addControl(new OpenLayers.Control.LayerSwitcher({}));
    Chapter 3
    [ 53 ]
  8. Finally, we need to set the map center information. This last step needs to be
    repeated for all further examples throughout the book—you need to be sure to
    include it even if it isn't explicitly asked for. All our maps will need to have their
    extent set somehow, and this is one standard way to do so (refer to Chapter 1 for
    more explanation).
    if(!map.getCenter()){
    map.zoomToMaxExtent();
    }

不翻译了，完整代码如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>HTML</title>
  6. <style>
  7. body,html{width:99%;height:99%}
  8. </style>
  9. <script type="text/javascript" src="OL/OpenLayers.js" ></script> 
  10. <script type="text/javascript">
  11.     var map;
  12.     function init(){
  13.      map=new OpenLayers.Map('map',{});
  14.      var wms_layer_map=new OpenLayers.Layer.WMS(
  15.         'Base Layer',
  16.         'http://vmap0.tiles.osgeo.org/wms/vmap0',
  17.         {layers:'basic'},
  18.         {isBaseLayer:true}
  19.       );
  20.      var wms_layer_labels=new OpenLayers.Layer.WMS(
  21.         'Location Labels',
  22.         'http://vmap0.tiles.osgeo.org/wms/vmap0',
  23.         {layers:'clabel,ctylabel,statelabel', transparent:true},        
  24.         {opacity:0.5}
  25.       );
  26.      map.addLayers([wms_layer_map,wms_layer_labels]);
  27.      map.addControl(new OpenLayers.Control.LayerSwitcher({}));
  29.      if(!map.getCenter()){
  30.         map.zoomToMaxExtent();
  31.      }
  32.     }
  34. </script>
  35. </head>
  36. <body onload='init();' >
  38.     <div id="map" style=" z-index:0;left:0px;top:0px;height:100%;width:100%">
  39.     </div>
  40. </body>
  41. </html>

效果pic

待续。。。。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注