[关闭]
@Rico 2015-01-13T10:06:23.000000Z 字数 7666 阅读 2914

OpenLayersCookBook第一章翻译

OpenLayers

第一章--web地图基础

pic

由于本书是实例性质的书，故只翻译重要内容；只贴重要代码

P书22
当地图的allOverlays设置成true，地图将会忽略图层的isbaseLayer属性

开始

实例化OpenLayers.Map类可以有三种方式来创建:

P书24
OpenLayers.Map类使用一些默认options的值:projection="EPSG:4326",units="degrees"和一些其他的

这个projection选项是用于设置投影，map对象可以使用它来呈现图层数据:projection:"EPSG:4326" 注意这个投影代码必须是字符型。在其他的类和选项中也可能是OpenLayers.Projection实例

这里稍微讲下地图投影。首先，如果没有为图层指定投影，那么填充WMS图层的切片使用的就是地图的投影。所以你必须保证WMS服务接受这个投影。第二，来自矢量图层的数据的投影将会被转化成地图的投影，所以你需要在江津矢量图层的时候就指定他们的投影。

地图使用的unit选项的单位是浮点型度:units:"dd" 这个选项依据于分辨率

displayProjection选项允许我们指定投影可以被我们用来显示鼠标的位置:displayProjection:nwe OpenLayers.Projection("EPSG:900913");,这里，我们的地图是EPSG：4326投影，我们都知道他是WGS1984坐标系，但是我们显示的坐标位置是EPSG：900913，是度单位，我们都知道他是椭球形墨卡托坐标系，是米单位

想象一下像Google地图或者OpenStreetMap这种特殊的例子，他们的图像金字塔在被创建的时候就已经预先指定好了：椭球体墨卡托投影:EPSG：900913。 这意味着当你请求的时候不能设定投影意味它是绝对的，定好的。

如果你放置了一个和地图投影不一致的图层进去，那么他将自动失效。

P30
默认的ascending属性是true，图层控制器展示的顺序是相反的，即最底层的图层是最开始加载的，最上面的图层是最晚加载的，你可以将ascending设为false来避免这种情况

map.getLayersByName()方法，返回所有拥有指定名字的图层的数组，正因为如此，我们想得到数组的第一个值

现在我们有了一个图层实例的引用。我们可以使用raiseLayer()提升它的图层顺序.你可以提升其顺序通过一个或多个变量数字或者你也可以像lowerLayer()方法一样，只出一个负数来降低其位置

附书中四个 提升 ，降低图层的方法和置顶置底的方法 

  1. function raiseLayer() {  
  2. var layerName =   
  3. dijit.byId('layerSelection').get('value');  
  4. var layer = map.getLayersByName(layerName)[0];  
  5. map.raiseLayer(layer, 1);  
  6. }  
  9. function lowerLayer() {
  10. var layerName =
  11. dijit.byId('layerSelection').get('value');
  12. var layer = map.getLayersByName(layerName)[0];
  13. map.raiseLayer(layer, -1);
  14. }  
  17. function topLayer() {移到图层堆栈的最上层，即变成最后一个加载的，所以是lastIndex  
  18. var layerName =  
  19. dijit.byId('layerSelection').get('value');  
  20. var layer = map.getLayersByName(layerName)[0];  
  21. var lastIndex = map.getNumLayers()-1;  
  22. map.setLayerIndex(layer, lastIndex);  
  23. }    
  26. function bottomLayer() {//移到图层堆栈的最底层，即变成第一个加载的，所以是0  
  27. var layerName =  
  28. dijit.byId('layerSelection').get('value');  
  29. var layer = map.getLayersByName(layerName)[0];  
  30. map.setLayerIndex(layer, 0);  
  31. }

OpenLayers.Map内部存放图层在一个数组中，他们是按照数组中的顺序来呈现的，所以第一个元素就是最底层的图层

topLayer()和bottomLayer()的功能是相似的，他们移动指定的图层至底部或者顶部，他们都是依赖于map.setLayerIndex()来工作的

map.getNumLayers()方法返回图层的总个数

地图控制控件

OpenLayers有很多控制的接口，比如拖动，缩放，鹰眼，编辑要素等等
这里有个例子，原书代码在P32页，这里就不贴出了
每个按钮都是toggle形式的 

  1. if(checked) {
  2. // Place Zoom control at specified pixel
  3. map.addControl(new OpenLayers.Control.ZoomPanel(),
  4. new OpenLayers.Pixel(50,10));
  5. } else {
  6. var controls = map.getControlsByClass
  7. ("OpenLayers.Control.ZoomPanel");
  8. map.removeControl(controls[0]);
  9. }

通过map.addControl()方法加了一个控件，其中，OpenLayers.Pixel指定了控件的具体位置

通常位置是由CSS的top和left属性来指定的，但是你如果使用了OpenLayers.Pixel的话就会覆盖CSS的那个

当我们要移除控件时，我们先要获得控件的引用，方法map.getControlsByClass()方法将返回指定Class的控件的数组，，接着我们就可以使用map.removeControl()方法将其移除了。

在以上代码中把地图的视图移动到中间是通过传递了一个OpenLayers.LonLat实例，与之前不同的是我们没有用new关键字。我们使用了OpenLayers.LonLat.fromString，他会通过一个String来创建新实例
map.setCenter(OpenLayers.LonLat.fromString("0,0"),3);
另外，地图实例创建的时候只有一个控件，OpenLayers.Control.Navigation() 它允许我们使用鼠标来对地图就像导航 

  1. var map = new OpenLayers.Map("ch1_managing_controls", {
  2. controls: [
  3. new OpenLayers.Control.Navigation()
  4. ]
  5. });

传递给controls一个空数组会创建一个没有任何控件的地图。另外，没有指定controls的属性，OpenLayers会创建默认的controls给地图，默认只包含OpenLayers.Control.Navigation 和
OpenLayers.Control.PanZoom

P书37有下一个例子的详细代码，代码贴一下 

  2. 1. Create an HTML file with OpenLayers dependencies.
  3. The HTML code to create the buttons and layout of the
  4. previous screenshot is extensive and not related to the
  5. goal of the book, so here we avoid writing it.
  6. 2. Add a div element to hold the map instance:
  7. <div id="ch1_moving_around" style="width: 100%;
  8. height: 500px;"></div>
  9. 3. Create a map instance. This time we specify a listener for some events that will
  10. update the center and zoom values of the label on top of the map:
  11. var map = new OpenLayers.Map("ch1_moving_around", {
  12. controls: [],
  13. eventListeners: {
  14. "move": changeListener,
  15. "moveend": changeListener,
  16. "zoomend": changeListener
  17. }
  18. });
  19. function changeListener() {
  20. var center = map.getCenter();
  21. document.getElementById("center").innerHTML =
  22. "("+center.lon + " lon , " + center.lat +
  23. " lat)";
  24. var zoom = map.getZoom();
  25. document.getElementById("zoom").innerHTML = zoom +
  26. " level";
  27. }
  28. 4. Add one layer and center the view:
  29. var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic",
  30. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  31. {
  32. layers: 'basic'
  33. });
  34. map.addLayer(wms);
  35. map.setCenter(new OpenLayers.LonLat(0, 0), 2);
  36. Web Mapping Basics
  37. 38
  38. 5. Insert the code that will be executed by the button actions:
  39. function moveByPx() {
  40. var x = dijit.byId('movebyxpix').get('value');
  41. var y = dijit.byId('movebyypix').get('value');
  42. map.moveByPx(x,y);
  43. }
  44. function moveTo() {
  45. var lon = dijit.byId('movetolon').get('value');
  46. var lat = dijit.byId('movetolat').get('value');
  47. var zoom = dijit.byId('movetozoom').get('value');
  48. var force = dijit.byId
  49. ('movetoforceZoomChange').get('checked');
  50. var drag = dijit.byId
  51. ('movetodragging').get('checked');
  52. map.moveTo(new OpenLayers.LonLat(lon, lat), zoom, {
  53. forceZoomChange: force,
  54. dragging: drag
  55. });
  56. }
  57. function setCenter() {
  58. var lon = dijit.byId('setCenterlon').get('value');
  59. var lat = dijit.byId('setCenterlat').get('value');
  60. var zoom = dijit.byId('setCenterzoom').get('value');
  61. var force = dijit.byId
  62. ('setCenterforceZoomChange').get('checked');
  63. var drag = dijit.byId
  64. ('setCenterdragging').get('checked');
  65. map.setCenter(new OpenLayers.LonLat(lon, lat),
  66. zoom, {
  67. forceZoomChange: force,
  68. dragging: drag
  69. });
  70. }
  71. function pan() {
  72. var x = dijit.byId('panxpix').get('value');
  73. var y = dijit.byId('panypix').get('value');
  74. var anim = dijit.byId('pananimate').get('checked');
  75. var drag = dijit.byId('pandragging').get('checked');
  76. map.pan(x,y, {
  77. animate: anim,
  78. Chapter 1
  79. 39
  80. dragging: drag
  81. });
  82. }
  83. function panTo() {
  84. var lon = dijit.byId('panTolon').get('value');
  85. var lat = dijit.byId('panTolat').get('value');
  86. map.panTo(new OpenLayers.LonLat(lon, lat));
  87. }

为了更新center和zoom的值，我们初始化map的时候加了监听事件。实际上，三个事件的监听器我们加的是一样的: 

  1. var map = new OpenLayers.Map("ch1_moving_around", {
  2. controls: [],
  3. eventListeners: {
  4. "move": changeListener,
  5. "moveend": changeListener,
  6. "zoomend": changeListener
  7. }
  8. });

在changeListener()方法内我们使用map.getCenter()方法，它会返回一个OpenLayers.LonLat对象，和一个map.getZoom()来得到当前值并且更新label

  1. function changeListener() {
  2. var center = map.getCenter();
  3. document.getElementById("center").innerHTML =
  4. "("+center.lon + " lon , " + center.lat + " lat)";
  5. var zoom = map.getZoom();
  6. document.getElementById("zoom").innerHTML = zoom + " level";
  7. }

moveByPx()方法通过给出制定的像素来移动地图相等的距离。

map.moveTo()方法和上一个很相似，但是它移动到一个设定的位置(而不是持续增加距离),而且它需要制定一耳光OpenLayers.LonLat对象

map.setCenter()方法和map.moveTo()很相似，但是它会使地图缩放到以给定经纬度为中心的位置

最后，有两个平移方法，它们会流畅的进行移动。map.pan()方法会会移动地图一定像素并伴随一个平移效果。map.panTo()方法很相似，它移动到某一特定的地方

限定地图范围

有时，很多情况下我们更趋向于展示特定的内容给用户看，但是仅仅限于一定区域（也许你只拥有这部分区域的数据）
这种情况，你需要限定用户浏览范围
原文代码： 

  1. 1. Create a map instance. Take a look at the couple of properties used in
  2. the constructor:
  3. var map = new OpenLayers.Map("ch1_restricting_view", {
  4. maxExtent: OpenLayers.Bounds.fromString
  5. ("-180,-90,180,90"),
  6. restrictedExtent: OpenLayers.Bounds.fromString
  7. ("-180,-90,180,90")
  8. });
  9. 2. As always, add some layer to see content and center the view:
  10. var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic",
  11. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  12. {
  13. layers: 'basic'
  14. });
  15. map.addLayer(wms);
  16. map.setCenter(new OpenLayers.LonLat(0, 0), 2);
  17. 3. Add the functions that will be executed when buttons are clicked:
  18. function updateMaxExtent() {
  19. var left = dijit.byId('left_me').get('value');
  20. var bottom = dijit.byId('bottom_me').get('value');
  21. var right = dijit.byId('rigth_me').get('value');
  22. var top = dijit.byId('top_me').get('value');
  23. Web Mapping Basics
  24. 42
  25. map.setOptions({
  26. maxExtent: new OpenLayers.Bounds(left, bottom,
  27. right, top)
  28. });
  29. }
  30. function updateRestrictedExtent() {
  31. var left = dijit.byId('left_re').get('value');
  32. var bottom = dijit.byId('bottom_re').get('value');
  33. var right = dijit.byId('rigth_re').get('value');
  34. var top = dijit.byId('top_re').get('value');
  35. map.setOptions({
  36. restrictedExtent: new OpenLayers.Bounds(left,
  37. bottom, right, top)
  38. });
  39. }

正如你所看到的那样，地图有两个属性maxExtent和restrictedExtent,它们可以限定我们访问的区域

虽然相似，但是这两个属性有不同的意义。 设定maxExtent属性限定视图，这样图的中心就不会在给定范围的外面了。 设定restrictedExtent属性，地图它自己不能移动到给定范围的外面了。

maxExtent :地图的最大范围.
restrictedExtent: 限制地图只能在设定的范围内活动.平移将会被限制在指定的边界内

参数都是OpenLayers.Bounds

  1. map.setOptions({  
  2. maxExtent: new OpenLayers.Bounds(left, bottom, right, top)  
  3. });

第一章完

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