openlayers 学习笔记（一）

【来源：http://nwaybygreifen.spaces.live.com/blog/cns!6220A29AE9D7B87!227.entry】

1          开始使用openlayers

1.1       设置

先到它的官方网站http://www.openlayers.org下载他的压缩包，解压。

拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一目录中即可）。 然后，创建一个****.html作为查看地图的页面。

2          试验openlayers

环境：geoserver1.7

                   Openlayers2.4

                            Dreamviever8

2.1       第一个地图窗口

目标：用openlayers加载geoserver wms。

步骤：

（1）       空白html文件

（2）       插入div-map

（3）       为div付风格

以上为未加载地图的静态页面

代码为：

 

效果为：

 

 

（4）       插入openlayers代码引用

<link rel="stylesheet" type="text/css" href="../theme/default/style.css"/>

<script src="OpenLayers.js" type="text/javascript"></script>

（5）       写js代码，主要是init（）

 

第一个地图窗口就完成了

 

注1．      js中defer的作用是页面加载完成后，执行脚本。

注2．       222

2.2       控制地图与div的占据区域

目标：让地图默认占满展现区

方法：

设置map的options，由其中两个因素决定：maxExtent－最大地图边界；maxResolution－最大解析度。

当maxExtent设置为地图的最大边界后，maxResolution设置为auto，那地图就占满DIV。

var options = {                         controls: [],

                                               maxExtent: bounds,

                                               maxResolution: "auto",

                                               projection: "EPSG:4326",

                                               numZoomLevels: 7,                                     

                                               units: 'degrees'

                                     };

                                     map = new OpenLayers.Map('map',options);

2.3       地图控制－尺度缩放

目标：填加尺度缩放控件

 

步骤：

（1）       map初始化赋参数

var options = {

                                        controls: [],

                                        //scales: [50000000, 30000000, 10000000, 5000000],

                                        maxExtent: bounds,

                                        maxResolution: "auto",

                                        projection: "EPSG:4326",

                                        numZoomLevels: 7,          （表示有几个缩放级别）             

                                        units: 'degrees'

                               };

            map = new OpenLayers.Map('map',options);

（2）       填加控件，代码

map.addControl(new OpenLayers.Control.PanZoomBar({

                    position: new OpenLayers.Pixel(2, 15)（右边距，上边距）

                }));

思考：级别的计算，个人推测由(maxResolution- minResolution)/ numZoomLevels，但是默认值是书面日后再细究。

2.4       地图控制－鼠标坐标拾取

目标：地图上鼠标移动拾取

步骤：

map.addControl(new OpenLayers.Control.MousePosition());

 

注1．      Control的构造函数可以带参数，var control = new OpenLayers.Control({div: myDiv});例如：map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

就是制定在页面的location元素位置显示坐标。

注2．      2

注3．      2

2.5       地图控制－其他几个常用控件初次、初级使用

初次使用，就只写下代码与作用，至于参数以后用到进行研究。

（1）       鼠标拖动、滚轴放大缩小，自带一个拉框放大。

map.addControl(new OpenLayers.Control.MouseToolbar());

（2）       图层控制

map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));

（3）       填加永久链接

map.addControl(new OpenLayers.Control.Permalink());

（4）       鹰眼窗口

map.addControl(new OpenLayers.Control.OverviewMap());

（5）       默认的键盘操作支持，比如pageup、à等

map.addControl(new OpenLayers.Control.KeyboardDefaults());