<<上篇 | 首页 | 下篇>>

OpenLayers中地图缩放级别的设置方法 - 心帆 - 博客园

一、概述

在OpenLayers中，地图必须具有一个缩放级别的范围，缩放级别可以用比例尺（scale）或者分辨率（resolution）表示。

比例尺——屏幕上1米代表多少地图坐标单位；分辨率——屏幕上一个像素代表多少地图坐标单位。
两者的转换关系是：scale = resolution * 72 * 39.3701（1米=39.3701英寸，1英寸=72像素）

地图具有一个总的缩放级别，每个图层可以有各自的缩放级别，这样可以控制图层只在合适的级别上显示。

二、缩放级别范围的确定方法

1、比例尺数组或者分辨率数组来确定（相邻两级之间不一定是2倍的关系，可以是任意值）。示例：

resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125]
scales: [50000000, 30000000, 10000000, 5000000]

 

2、用最大分辨率（maxResolution）和缩放级别总数（numZoomLevels）确定，相邻两级是2倍关系

2.1最大分辨率的确定方法：

a. 直接指定maxResolution，例如：

maxResolution: 0.17578125

b. 直接指定minScale，例如：

minScale: 50000000

c. 由maxExtent确定（maxResolution需设置为‘auto’），例如：

maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
maxResolution: "auto"

2.2 缩放级别总数的确定方法：

a.  直接指定numZoomLevels，例如：numZoomLevels: 5
b.  由最大分辨率和最小分辨率的比值确定，最小分辨率同2.1有三种方法可以确定：

    b.1 直接指定minResolution
    b.2 直接指定maxScale
    b.3 由minExtent确定（minResolution需设置为‘auto’）

 

如果指定的参数过多，导致缩放级别范围不一致时，上述方法顺序决定了OpenLayers确定缩放级别范围的优先级。

阅读全文……

标签 : , ,
发表评论 RSS feed for responses to this blog entry
IT瘾于2013年10月3日 上午10时10分00秒发布 #

配置Openlayers中的缩放级别 - JenMinZhang - 博客园

OpenLayers Map可以在不同的比例尺或解析度下显示他的每一个layer
map对象含有缩放级别的引用，即ZoomLevels，而且允许他的每一个layer去自定义他们自己的缩放级别，使之看起来合适
可以通过在构造函数中设置options属性来配置openlayers layer的缩放级别

== 正常图层==
对于基于openlayers.layer的正常layer，和能够在任何解析度下显示的layer，存在多种不同的方式去配置缩放级别和他们各自的比例尺和解析度

“解析度数组”:
要是转化缩放级别成为解析度，需要一个{{{resolutions}}}数组，他是这个图层所支持的不同解析度的列表，缩放级别就仅仅是一个解析度数组的索引，解析度数组始于0终于缩放级别-1

比如:
一个图层的解析度为[a,b,c],那么缩放级别的0就是a ,1就是b。。。


=== 配置解析度数组的方式 ===

可选项：
{{{scales}}} - ''Array'' -- 预先设置比例尺值的数组
{{{resolutions}}} - ''Array'' -- 预先设置解析度值的数组
{{{minScale}}} - ''float'' --layer能够显示的最小比例尺
{{{maxScale}}} - ''float'' --layer能够显示的最大比例尺
{{{maxResolution}}} - ''float'' --layer能够显示的最大解析度
{{{minResolution}}} - ''float'' -- layer能够显示的最小解析度
{{{minExtent}}} - ''!OpenLayers.Bounds'' --layer能显示出的最小范围
{{{maxExtent}}} - ''!OpenLayers.Bounds'' -- layer能显示出的最大范围
{{{numZoomLevels}}} - ''int'' -- 缩放级别的总数
{{{units}}} - ''String'' - layer显示的单位，作用于比例尺-解析度换算

Example Declarations:
{{{
    var options = { scales: [50000000, 30000000, 10000000, 5000000],
                    resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125],
                    minScale: 50000000,
                    maxResolution: "auto",
                    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
                    maxResolution: 0.17578125,
                    maxScale: 10000000,
                    minResolution: "auto",
                    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
                    minResolution: 0.0439453125,
                    numZoomLevels: 5,
                    units: "degrees"
                  };
    map = new OpenLayers.Map( $('map') , options);
}}}


显然所有的配置项不能在一次设置中全都用上，因为他们可能相互冲突，他们会按照下面的优先级起作用:

[A]【预设的缩放级别列表】缩放级别由预先设置的比例尺或解析度决定

{{{scales}}} -解析度的数组由这些比例尺直接转化而来
{{{resolutions}}} - 解析度数组直接从初始化函数的option参数中带来
Examples:
{{{
    var options = { scales: [50000000, 30000000, 10000000, 5000000] };
    map = new OpenLayers.Map( $('map') , options);
}}}

{{{
    var options = { resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125] };
    map = new OpenLayers.Map( $('map') , options);
}}}

* '''maxResolution and numZoomLevels''' - ''!ZoomLevels are determined based on a maximum resolution and the number of desired !ZoomLevels''


[B]【最大解析度 &缩放级别的总数】缩放级别在最大解析度和缩放级别的总数上被决定
B1 最大解析度的确定
{{{minScale}}} --解析度的值从比例尺由单位{{{units}}}转化来
{{{maxExtent}}} AND {{{maxResolution == "auto"}}} --解析度由地图的div尺寸和maxExtent属性计算而来。若maxExtent属性未指定，默认从map继承，即全世界
{{{maxResolution}}}--解析度的值直接从layer的options参数中带来，若没指定，则默认为从map的options中带来
B2 缩放级别的总数确定
    B2_a基于最大和最小解析度的比值来计算--确定最小解析度：
{{{maxScale}}} --解析度的值从比例尺由单位{{{units}}}转化来
{{{minExtent}}} AND {{{minResolution == "auto"}}}--解析度的值基于地图div尺寸和minExtent属性来计算。minExtent属性必须被指定，默认不从map继承
{{{minResolution}}} --解析度的值从layer指定的option参数中直接带来，若没指定，最小解析度保持为空，缩放级别数直接接受
    B2_b {{{numZoomLevels}}}缩放级别数直接从layer指定的option参数带来，若没有指定默认从map的option带来

Examples:

||maxResolution||Converted from minScale using specified units||
||numZoomLevels||Default from map||
{{{
    var options = { minScale: 50000000,
                    units: "degrees"
                  };
    map = new OpenLayers.Map( $('map') , options);
}}}
[[BR]]

||maxResolution||Calculated based on div size and default maxExtent from map||基于div的尺寸和地图最大范围计算
||numZoomLevels||Calculated using ratio of maxResolution/minResolution||用最大最小分辨率的比值计算
{{{
    var options = { maxResolution: "auto",
                    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
                    minResolution: 0.0439453125
                  };
    map = new OpenLayers.Map( $('map') , options);
}}}
[[BR]]

||maxResolution||Specified||
||numZoomLevels||Specified||
{{{
    var options = { maxResolution: 0.17578125,
                    numZoomLevels: 15
                  };
            map = new OpenLayers.Map( $('map') , options);
}}}
[[BR]]

||maxResolution||Default from map||
||numZoomLevels||Converted maxScale (using default units from map) to minResolution, then uses ratio of maxResolution/minResolution to calculate numZoomLevels||
{{{
    var options = { maxScale: 10000000 };
    map = new OpenLayers.Map( $('map') , options);
}}}
[[BR]]

||maxResolution||Specified||
||numZoomLevels||Calculated minResolution based on div size and default minExtent from map, then uses ratio of maxResolution/minResolution to calculate numZoomLevels||
{{{
    var options = { maxResolution: 0.17578125,
                    minResolution: "auto",
                    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
                  };
    map = new OpenLayers.Map( $('map') , options);
}}}

 

 

阅读全文……

标签 : , ,
发表评论 RSS feed for responses to this blog entry
IT瘾于2013年10月3日 上午10时09分00秒发布 #

OpenLayers系列(2)——多个图层 - bob007abc的专栏 - 博客频道 - CSDN.NET

 

下面例子包含了多个图层构成，可设置最小显示比例，只有在当地图在缩放的这个最小比例时才显示该图层信息。

多图层的地图由两种图层构成：base layer 和overlay layer 。

    Base layer: 任何一个地图中都存在至少一个图层，否则你的应用将呈现空白，我们把最基本的一个图层称为base layer。Base layer不止一种或一个，你可以选择任意一个图层作为应用的base layer，但是任何时候base layer都只能有一个是turn on的，如果程序在打开一个base layer时发现已经存在另一个打开着的base layer，则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio button)一个单选按钮。

 

    Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer，你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。

  1. <!DOCTYPE html>  
  2. <html lang='en'>  
  3. <head>  
  4.     <meta charset='utf-8' />  
  5.    <title>My OpenLayers Map</title>  
  6.     <script type='text/javascript' src='OpenLayers.js'></script>  
  7.     <script type='text/javascript'>  
  8.   
  9.         var map;  
  10.   
  11.        function init() {  
  12.           map = new OpenLayers.Map('map_element', {});  
  13.           var wms_layer_map = new OpenLayers.Layer.WMS(//base layer  
  14.               'Base layer',  
  15.               'http://vmap0.tiles.osgeo.org/wms/vmap0',  
  16.               {layers: 'basic'},  
  17.               {isBaseLayer: true}  
  18.             );  
  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',  
  24.               transparent: true},  
  25.               {visibility: false, opacity:0.5}//默认不显示该层(但可以图层切换器中打开)  
  26.             );  
  27.   
  28.          var wms_state_lines = new OpenLayers.Layer.WMS(//洲界层  
  29.               'State Line Layer',  
  30.               'http://labs.metacarta.com/wms/vmap0',  
  31.               {layers: 'stateboundary',  
  32.                 transparent: true},  
  33.               {displayInLayerSwitcher: false,  //设置该层不显示在图层切换器中  
  34.               minScale: 13841995.078125}//设置一个最小尺度，只有当地图在缩放时达到这个最小尺度时才显示该图层信息  
  35.             );  
  36.   
  37.          var wms_water_depth = new OpenLayers.Layer.WMS(  
  38.              'Water Depth',  
  39.              'http://labs.metacarta.com/wms/vmap0',  
  40.              {layers: 'depthcontour',  
  41.              transparent: true},  
  42.              {opacity:0.8}  
  43.             );  
  44.   
  45.          var wms_roads = new OpenLayers.Layer.WMS(  
  46.              'Roads',  
  47.              'http://labs.metacarta.com/wms/vmap0',  
  48.              {layers: 'priroad,secroad,rail',  
  49.              transparent: true},  
  50.              {transistionEffect:'resize'}//让该图层在缩放时呈现重新计算的效果  
  51.             );  
  52.   
  53.         map.addLayers([  
  54.           wms_layer_map,  
  55.           wms_layer_labels,  
  56.           wms_state_lines,  
  57.           wms_water_depth,  
  58.           wms_roads]);  
  59.   
  60.           map.addControl(new OpenLayers.Control.LayerSwitcher({}));  
  61.   
  62.           if(!map.getCenter()){  
  63.               map.zoomToMaxExtent();  
  64.             }  
  65.        }  
  66.   
  67.     </script>  
  68. </head>  
  69.   
  70. <body onload='init();'>  
  71.     <div id='map_element' style='width: 500px; height: 500px;'>  
  72.     </div>  
  73. </body>  
  74. </html> 

 Openlayers 鼠标点击事件不响应注意：（

  marker.events.register('mousedown', marker, function(evt) { alert(evt); OpenLayers.Event.stop(evt); });

）

把 map.addLayers([ol_wms, markers, drawlayer]); 改为

map.addLayers([ol_wms, drawlayer, markers]);

即Vector 放在 markers 之前，可能是图层覆盖的原因，要响应的图层，应放在最后；

否则像之前那样，点击的是 drawlayer 图层；

阅读全文……

标签 : , ,
发表评论 RSS feed for responses to this blog entry
IT瘾于2013年9月30日 上午11时33分00秒发布 #