[关闭]
@Rico 2015-08-10T20:15:02.000000Z 字数 16426 阅读 2900

OpenLayersCookBook第二章

OpenLayers

P书44- 72

添加栅

格图层

In this chapter we will cover the following:

第44-50页讨论了如何加载GoogleMap和BingMap这里不翻译了。

P书50

加载WMS图层

  1. 1. Create an HTML file and add the OpenLayers dependencies.
  2. 2. Add a div element to hold the map, as follows:
  3. <div id="ch2_wms_layer" style="width: 100%; height: 100%;"></div>
  4. Chapter 2
  5. 51
  6. 3. Create the map instance as follows:
  7. // Create the map using the specified DOM element
  8. var map = new OpenLayers.Map("ch2_wms_layer");
  9. 4. Now, add two WMS layers. The first will be the base layer and the second will be an
  10. overlay, as follows:
  11. // Add a WMS layer
  12. var wms = new OpenLayers.Layer.WMS("Basic",
  13. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  14. {
  15. layers: 'basic'
  16. });
  17. // Add Nexrad WMS layer
  18. var nexrad = new OpenLayers.Layer.WMS("Nexrad",
  19. "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
  20. {
  21. layers: "nexrad-n0r",
  22. transparent: "true",
  23. format: 'image/png'
  24. },
  25. {
  26. isBaseLayer: false
  27. });
  28. map.addLayers([wms, nexrad]);
  29. 5. Finally, we add a layer switcher control and center the view, as follows:
  30. // Add layer switcher control
  31. map.addControl(new OpenLayers.Control.LayerSwitcher());
  32. // Set the center of the view
  33. map.setCenter(new OpenLayers.LonLat(-90,40), 4);

OpenLayers.Layer.WMS类构造函数new OpenLayers.Layer.WMS(name, url, params, options)

横向伸展地图

pic
属性:wrapDateLine

  1. 1. Create an HTML file and add the OpenLayers dependency.
  2. 2. In the beginning, we have put a checkbox to activate/deactivate the wrap data line
  3. feature, as follows:
  4. Wrap date line: <input dojoType="dijit.form.CheckBox" checked
  5. onChange="wrapDateLine" /> <br/>
  6. Do not worry about the dojoType="dijit.form.CheckBox"
  7. attribute, it is because the Dojo Toolkit (http://dojotoolkit.org)
  8. is used in the sample.
  9. Think of it as a normal HTML input element.
  10. 3. Next, we have added the DOM element used to render the map, as follows:
  11. <div id="ch2_wrapdataline" style="width: 100%; height: 100%;"></div>
  12. Chapter 2
  13. 55
  14. 4. Within a script element, create the map instance, as follows:
  15. <script type="text/javascript">
  16. // Create the map using the specified DOM element
  17. var map = new OpenLayers.Map("ch2_wrapdataline");
  18. 5. Now, create a WMS layer specifying the wrapDateLine property, as follows:
  19. // Add a WMS layer
  20. var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic",
  21. "http://labs.metacarta.com/wms/vmap0",
  22. {
  23. layers: 'basic'
  24. },
  25. {
  26. wrapDateLine: true
  27. });
  28. map.addLayer(wms);
  29. // Center map view
  30. map.setCenter(new OpenLayers.LonLat(-110,0), 2);
  31. 6. Finally, implement the function that will change the wrapDateLine property value,
  32. as follows:
  33. function wrapDateLine(checked) {
  34. wms.wrapDateLine = checked;
  35. wms.redraw();
  36. }
  37. </script>

改变缩放效果

平移和缩放效果对于用户体验来说十分重要。

在不同层级之间进行缩放的效果是可以控制的。

OpenLayers.Layers类有一个transitionEffect属性，决定了图层缩放效果，目前只有两个值:null和resize

null意味着没有缩放效果，你缩放时将会看到原有图层消失然后渐渐地新层级的地图慢慢加载

当你使用resize时，目前层级的地图切片会重置大小去适应新层级，直到后台新层级的切片被加载。这种方式图片是一直可见的避免了缩放时短暂空隙时显示空白地图的丑陋效果 。
代码: 

  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,wms;
  12. function init(){
  13.       map=new OpenLayers.Map("map");
  14.       wms=new OpenLayers.Layer.WMS(
  15.         'OpenLayers WMS',
  16.         'http://vmap0.tiles.osgeo.org/wms/vmap0',
  17.         {layers:'basic'},
  18.         {
  19.             wrapDateLine:true,
  20.             transitionEffect:'resize'   
  21.         }       
  22.       );
  24.      map.addLayer(wms);
  25.      map.addControl(new OpenLayers.Control.LayerSwitcher({}));
  26.      map.setCenter(new OpenLayers.LonLat(0,0),3);
  27.     }
  30. function change(){
  31.     var ifchecked=document.getElementById("chx").checked;
  32.     if(ifchecked){
  33.         wms.transitionEffect='resize';
  34.     }else{
  35.         wms.transitionEffect=null;
  36.     }
  38. }
  39. </script>
  40. </head>
  41. <body onload='init();' >
  42.     <input type="checkbox" id="chx" onChange="change()" value="按钮"/>
  43.     <div id="map" style=" z-index:0;left:0px;top:0px;height:500px;width:100%">
  44.     </div>
  45. </body>
  46. </html>

改变图层透明度

  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,wms,wms2;
  12. function init(){
  13.     map=new OpenLayers.Map("map");
  14.     wms=new OpenLayers.Layer.WMS(
  15.             'OpenLayers WMS',
  16.             'http://vmap0.tiles.osgeo.org/wms/vmap0',
  17.             {layers:'basic'},
  18.             {
  19. wrapDateLine:true,
  20. transitionEffect:'resize'   
  21. }       
  22. );
  24.     wms2=new OpenLayers.Layer.WMS("Coast Line",
  25.             "http://vmap0.tiles.osgeo.org/wms/vmap0",
  26.             {layers: 'coastline_01,coastline_02'},
  27.             {isBaseLayer: false}
  28.         );
  29. map.addLayer(wms);
  30. map.addLayer(wms2);
  31. map.addControl(new OpenLayers.Control.LayerSwitcher({}));
  32. map.setCenter(new OpenLayers.LonLat(0,0),3);
  33. }
  35. var selectVal;
  36. function changeopacity(){
  37.     var list=document.getElementById("selectOpa");
  38.     for(var i=0;i<list.length;i++){
  39.         if(list[i].selected==true){
  40.             selectVal=list[i].innerText;
  41.             wms2.setOpacity(selectVal/100);
  42.         }
  43.     }
  45. }
  46. </script>
  47. </head>
  48. <body onload='init();' >
  49. <div >
  50.     <select name="selectAge" onChange="changeopacity()" id="selectOpa">   
  51.         <option value="0">0</option>
  52.         <option value="20">20</option>   
  53.         <option value="40">40</option>   
  54.         <option value="60">60</option>   
  55.         <option value="80">80</option>   
  56.         <option value="100">100</option>   
  57.     </select>   
  58. </div>
  59. <div id="map" style=" z-index:0;left:0px;top:0px;height:500px;width:100%">
  60. </div>
  61. </body>
  62. </html>

使用单切片模式的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 map1,map2,wms1,wms2;
  12. function init(){
  13.     var map1 = new OpenLayers.Map("wmslayer");
  14.     wms1 = new OpenLayers.Layer.WMS("Basic","http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'});
  15.     map1.addLayer(wms1);
  16.     map1.setCenter(new OpenLayers.LonLat(-90,0), 2);
  18.     var map2 = new OpenLayers.Map("signlelayer");
  19.     wms2 = new OpenLayers.Layer.WMS("Basic","http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'},{singleTile: true});
  20.     map2.addLayer(wms2);
  21.     map2.setCenter(new OpenLayers.LonLat(-90,0), 2);
  22. }
  23. </script>
  24. </head>
  25. <body onload='init();' >
  26. <table style="width:100%;height:95%;">
  27.  <tr>
  28.   <td style="width:50%">
  29.     <p>WMS Layer:</p>
  30.     <div id="wmslayer" style="width:100%; height:100%"</div>
  31.   </td>
  32.   <td style="width:50%">
  33.       <p>WMS using <em>signleTile</em>property:</p>
  34.       <div id="signlelayer" style="width:100%;height:100%;"</div>
  35.   </td>
  36.  </tr>
  37. </table>
  38. </div>
  39. </body>
  40. </html>

Web Map Service(WMS)是一个地理地图服务协议

通常做法是客户端想WMS服务器请求，然后服务端返回一张包含所有信息的图片

OpenLayers中，你加了一个wms图层，WMS服务器会返回很多切片为每个层级使用，这种方法向服务端发出的请求不止一个。

把一个wms图层区分成很多切片不是唯一的方法，如果必须，你可以使用所谓单切片模式

这种模式下，仅仅只有一张图片会覆盖视图区域，而不是很多切片

每次当你移动地图或者缩放时图层必须被刷新

正如你说见，单切片模式下，请求服务器的次数远少于多切片模式。但与此相反的是，在多切片模式下，每个切片的请求都是很容易的，但是在单切片模式下，稍微有些不同，并且需要很长的计算时间

效果

pic

可以看到单切片模式只请求了一张图片

pic

单切片模式请求时间长达54秒

pic

单张图片

pic

缓冲图层数据提高地图导航效果

当你移动地图的时候，很多时候会看到空白(这意味着内容还没被载入)然后过一会儿图像会显示

在栅格grid图层和WMS单切片模式图层是，我们可以牺牲电脑性能和计算时间来提高这种用户体验

大多数栅格图层继承自OpenLayers.Layer.Grid，它会将每个层级分成很多切片

提高地图拖动时的效果很简单，就是在可见范围之外的地图在我们拖动之前就提前载入

下面的代码展示了如何预载入视图之外的地图的内容，grid图层和wms单切片模式同样适用，这样你就可以提高用户的友好度了。
原书代码：

  1. 1. Create an HTML file and include the OpenLayers dependencies.
  2. 2. We are going to create two maps side by side and on top of each one we are going
  3. to add a spinner control, from the Dojo Toolkit framework (http://dojotoolkit.
  4. org), to control the properties buffer and singleTile values:
  5. <table style="width: 100%; height: 95%;">
  6. <tr>
  7. <td style="width: 50%;">
  8. <p>
  9. WMS layer with <em>buffer</em>:
  10. <input id="buffer_a"
  11. dojoType="dijit.form.NumberSpinner"
  12. onChange="changeBufferA"
  13. intermediateChanges="true"
  14. style="width:100px"
  15. value="0" smallDelta="1"
  16. constraints="{min:0,max:5}" />
  17. </p>
  18. <div id="ch02_wms_buffer" style="width: 100%;
  19. height: 100%;"></div>
  20. </td>
  21. <td style="width: 50%;">
  22. <p>
  23. WMS using <em>singleTile</em>
  24. property and <em>ratio</em>:
  25. <input id="buffer_b"
  26. dojoType="dijit.form.NumberSpinner"
  27. onChange="changeBufferB"
  28. intermediateChanges="true"
  29. style="width:100px"
  30. value="1.0" smallDelta="0.1"
  31. constraints="{min:0.0,max:2.0}" />
  32. </p>
  33. Chapter 2
  34. 65
  35. <div id="ch02_wms_ratio" style="width: 100%;
  36. height: 100%;"></div>
  37. </td>
  38. </tr>
  39. </table>
  40. 3. The left-hand side panel will show how to control the number of tiles that can be
  41. loaded outside the map view:
  42. <script type="text/javascript">
  43. // Create the map using the specified DOM element
  44. var map_a = new OpenLayers.Map("ch02_wms_buffer");
  45. // Add a WMS layer
  46. var wms_a = new OpenLayers.Layer.WMS("Basic",
  47. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  48. {
  49. layers: 'basic'
  50. },
  51. {
  52. buffer: 0
  53. });
  54. map_a.addLayer(wms_a);
  55. // Set the center of the view
  56. map_a.setCenter(new OpenLayers.LonLat(-90,0), 3);
  57. 4. The right-hand side panel shows how to control the amount of data you can preload
  58. in a WMS layer working in single tile mode.
  59. // Create the map using the specified DOM element
  60. var map_b = new OpenLayers.Map("ch02_wms_ratio");
  61. // Add a WMS layer
  62. var wms_b = new OpenLayers.Layer.WMS("Basic",
  63. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  64. {
  65. layers: 'basic'
  66. },
  67. {
  68. singleTile: true,
  69. ratio: 1
  70. });
  71. map_b.addLayer(wms_b);
  72. // Set the center of the view
  73. map_b.setCenter(new OpenLayers.LonLat(-90,0), 3);
  74. Adding Raster Layers
  75. 66
  76. 5. Finally, there is the code responsible for changes on the spinner controls, shown
  77. as follows:
  78. // Handle events
  79. function changeBufferA(value) {
  80. wms_a.addOptions({buffer: value});
  81. }
  82. function changeBufferB(value) {
  83. map_b.removeLayer(wms_b);
  84. wms_b.destroy();
  85. wms_b = new OpenLayers.Layer.WMS("Basic",
  86. "http:// vmap0.tiles.osgeo.org/wms/vmap0",
  87. {
  88. layers: 'basic'
  89. },
  90. {
  91. singleTile: true,
  92. ratio: value
  93. });
  94. map_b.addLayer(wms_b);
  95. }
  96. </script>

左边地图包含了一个默认模式的WMS图层，buffer属性来自基类OpenLayers.Layer.Gird具体指定了在地图外面需要预先载入多少切片

当用户改变buffer的值时，我们用以下代码来更新 

  1. function changeBufferA(value) {
  2. wms_a.addOptions({buffer: value});
  3. }

右边显示了如何控制大量数据来预载入当你使用单切片模式时。

  1. // Create the map using the specified DOM element
  2. var map_b = new OpenLayers.Map("ch02_wms_ratio");
  3. // Add a WMS layer
  4. var wms_b = new OpenLayers.Layer.WMS("Basic",
  5. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  6. {
  7. layers: 'basic'
  8. },
  9. {
  10. singleTile: true,
  11. ratio: 1
  12. });
  13. map_b.addLayer(wms_b);
  14. // Set the center of the view
  15. map_b.setCenter(new OpenLayers.LonLat(-90,0), 3);

最后，下面的代码显示了buffer值改变时map的变化 

  1. // Handle events
  2. function changeBufferA(value) {
  3. wms_a.addOptions({buffer: value});
  4. }
  5. function changeBufferB(value) {
  6. map_b.removeLayer(wms_b);
  7. wms_b.destroy();
  8. wms_b = new OpenLayers.Layer.WMS("Basic",
  9. "http:// vmap0.tiles.osgeo.org/wms/vmap0",
  10. {
  11. layers: 'basic'
  12. },
  13. {
  14. singleTile: true,
  15. ratio: value
  16. });
  17. map_b.addLayer(wms_b);
  18. }

The left-hand side map contains a WMS layer working in the default tiled mode. In this mode,
the buffer property from the base class OpenLayers.Layer.Grid specifies how many
tiles must be loaded outside the map view.
When a user changes the spinner value for the buffer property, we simply update it with the 

  1. following line of code:
  2. function changeBufferA(value) {
  3. wms_a.addOptions({buffer: value});
  4. }

The right-hand side map, on the other hand, has a WMS layer working in single tile mode
(see the singleTile property set to true). In this mode, only one request is made to
get an image, which fills the whole map view.

We can control the size of the image with the ratio property, which belongs to the
OpenLayers.Layer.WMS class. A ratio of value 1.0 means an image with exact
dimensions of the map view. By default the ratio value is 1.5, which means we are
requesting an image with the map view dimensions plus a half.
第三段翻译下：

我们能使用ratio(比率)属性控制图像大小，它是属于OpenLayers.Layer.WMS类的，1.0比率意味着图像大小和视图大小一样。默认的比率是1.5，意味着我们祈求的图像比视图大小多了0.5倍

本例中，比率在我们创建图层的时候就已经设定好了，当我们需要去更新它的时候我们需要删除原来的图层然后创建一个新的并伴随着新的值代码: 

  2. function changeBufferB(value) {
  3. map_b.removeLayer(wms_b);
  4. wms_b.destroy();
  5. wms_b = new OpenLayers.Layer.WMS("Basic",
  6. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  7. {
  8. layers: 'basic'
  9. },
  10. {
  11. singleTile: true,
  12. ratio: value
  13. });
  14. map_b.addLayer(wms_b);
  15. }

我们先移除了图层然后引用了destroy()方法来销毁layler使用的内部对象避免内存泄露

更多:(有点废话，不翻译了)

Remember, the more tiles we load the more requests to the server. The same goes for a
WMS layer in single tile mode; the greater the bounding box you request, the greater the
computation time on the server results.
Because of this, increasing the buffer or ratio values too much is not always the
best solution.
Think about your data and how the user will explore it. If your data is probably better to explore
in its extension—a great area in the same zoom level—then a buffer of one or two can be a
good idea. If your data is mainly zoomed but the user is not interested in exploring large areas,
then the default values are fine.

自己写的buffer的例子，把buffer设成了5，会发现拖动的时候旁边的图片早就有了。

  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.         {buffer:5}      
  19.       );
  21.      map.addLayer(wms);
  22.      map.addControl(new OpenLayers.Control.LayerSwitcher({}));
  23.      if(!map.getCenter()){
  24.         map.zoomToMaxExtent();
  25.      }
  26.     }
  28. </script>
  29. </head>
  30. <body onload='init();' >
  32.     <div id="map" style=" z-index:0;left:0px;top:0px;height:100%;width:100%">
  33.     </div>
  34. </body>
  35. </html>

创建一个影像图层

有时候一个切片图层比如Google地图，OpenStreet地图或者WMS图层并不是你需要的。也有可能你有个张地理坐标图像，知道它的投影和范围，想把它展示在地图上 。

在这则例子里，OpenLayers提供了OpenLayers.Layer.Image类，它可以让你创建一个基于一张简单图像的图层。 

  1. 1. Let's go and create an HTML file with the OpenLayers dependencies.
  2. 2. First, add the div element that will hold the map, as follows:
  3. <!-- Map DOM element -->
  4. <div id="ch2_image" style="width: 100%; height: 100%;"></div>
  5. 3. Next, initialize the map and add a WMS base layer, as follows:
  6. <!-- The magic comes here -->
  7. <script type="text/javascript">
  8. // Create the map using the specified DOM element
  9. var map = new OpenLayers.Map("ch2_image", {
  10. allOverlays: true
  11. });
  12. map.addControl(new OpenLayers.Control.LayerSwitcher());
  13. // Add WMs layer
  14. Chapter 2
  15. 69
  16. var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic",
  17. "http://vmap0.tiles.osgeo.org/wms/vmap0",
  18. {
  19. layers: 'basic'
  20. });
  21. map.addLayer(wms);
  22. 4. Now, define the image URL, its extent and size, and create an image layer as follows:
  23. // Add an Image layer
  24. var img_url =
  25. "http://localhost:8080/openlayers-cookbook/data/nexrad.png";
  26. var img_extent = new OpenLayers.Bounds(-131.0888671875,
  27. 30.5419921875, -78.3544921875, 53.7451171875);
  28. var img_size = new OpenLayers.Size(780, 480);
  29. var image = new OpenLayers.Layer.Image("Image Layer", img_url,
  30. img_extent, img_size, {
  31. isBaseLayer: false,
  32. alwaysInRange: true // Necessary to always draw the image
  33. });
  34. map.addLayer(image);
  35. // Center the view
  36. map.setCenter(new OpenLayers.LonLat(-85, 40), 3);
  37. </script>

很简单，不翻译了：
name: This is the desired descriptive name for the layer

url: This is the URL for the image

extent: This is an instance of the OpenLayers.Bounds class with the bounding box of the image

size: This is an instance of the OpenLayers.Size with the image dimensions in
pixels

options: This indicates a JavaScript object with different options for the layer

WMS图层设定切片大小

OpenLayers.Layer.Grid类是一个特殊的类，它在不同缩放级别下划分图层，以格子切片来组成图层

OpenLayers.Layer.WMS类是之前那个类的子类，而且不仅能单切片模式，也可以多切片模式

当然，控制切片的大小会影响结果。
默认的，切片大小是256*256像素，但是我们可以设置它成任何我们想要的值。大切片尺寸意外着更小的请求，但是服务器需要更长的时间来生成大图片。相反，切片大小更小的话意味着更多的服务器请求和更小的计算时间 

  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.                 allOverlays:true,
  15.                 tileSize:new OpenLayers.Size(256,256)
  16.                 });
  17.      var wms1=new OpenLayers.Layer.WMS(
  18.         'OpenLayers WMS',
  19.         'http://vmap0.tiles.osgeo.org/wms/vmap0',
  20.         {layers:'basic'}
  21.       );
  22.      map.addLayer(wms1);
  23.      var wms2=new OpenLayers.Layer.WMS("Coast Line",
  24.             "http://vmap0.tiles.osgeo.org/wms/vmap0",
  25.             {
  26.                 layers:'coastline_01,coastline_02'
  27.             },
  28.             {
  29.                 tileSize:new OpenLayers.Size(512,512),
  30.                 opacity:0.65
  31.             });
  32.      map.addLayer(wms2);
  35.      map.addControl(new OpenLayers.Control.LayerSwitcher({}));
  36.      map.setCenter(new OpenLayers.LonLat(-85,40),3);
  37.     }
  39. </script>
  40. </head>
  41. <body onload='init();' >
  43.     <div id="map" style=" z-index:0;left:0px;top:0px;height:100%;width:100%">
  44.     </div>
  45. </body>
  46. </html>

pic

pic

虽然像素大小不一样，但是在地图上确是贴合完全的。而256*256的图像请求数是19，而512*512图像请求书仅为9

There is not much mystery in this recipe. The tileSize property is available both for OpenLayers.Map and OpenLayers.Layer.Grid subclasses.

The tileSize must be an instance of OpenLayers.Size class, indicating the width and height in pixels.

When the tile size is set in the map instance all layers use this value unless you specify
another value for each individual layer.
By default, the OpenLayers.Map instance is configured to use 256 x 256 size tiles. Because
of this, the first layer makes requests to the WMS server using a tile size of 256 x 256 pixels.
On the other hand, we have specified a 512 x 512 tile size value for the second layer, so the
requests against the WMS are made waiting for tiles with 512 x 512 size.

For tiled services, such as Google Maps or OpenStreetMap, the tileSize property is simply
ignored because these services have precomputed the images in a fixed 256 x 256 size.
The reason for the tile size value being 256 x 256 pixels is because the size (in bytes) of each
image file is optimum for bandwidth use.

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