OpenLayers教程

1          开始使用openlayers

1.1       设置

先到它的官方网站下载他的压缩包，解压。

拷贝目录下的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代码引用

（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());

1          Openlayers关于数据加载

1.1       GML

目标：加载GML图层

步骤：

gmlLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml",{isBaseLayer: true} );

                               //map.addLayers([untiled,gmlLayer]);

                               map.addLayer(gmlLayer);

注1．      isBaseLayer属性确定该图层是否是基础图 层。

1.2       其他类型数据加载

目前还不需要深究，暂不研究。

2          要素编辑

关于openlayers里的要素编辑，就是客户端的操作，因此分为操作和保存两个环节研究。

2.1       关于矢量要素的填加

分为点、线、多边形

以一段例子来说明要素的填加。

 

    ……

   

   

 

 

   

OpenLayers Select Feature Example

   

      Select a feature on hover or click with the Control.SelectFeature on a

      vector layer.

   

 

   

   

       

•            

                     onclick="toggleControl(this);" checked="checked" />

              navigate

         

       

•            

                     onclick="toggleControl(this);" />

              draw point

         

        。。。。。。

 

总结：对于要素填加基本可以理解为以下几步。

①  定义 control:OpenLayers.Control. SelectFeature

②  Map.addControl

③  Control.active()

解释几个方法。

l  OpenLayers.Control.DrawFeature（layer{OpenLayers.Layer.Vector}，handler {OpenLayers.Handler} ，options {Object}）

l  为图层填加风格

var myStyles = new OpenLayers.StyleMap({

                "default": new OpenLayers.Style({

                    pointRadius: "${type}", // sized according to type attribute

                    fillColor: "#000000",

                    strokeColor: "#ff9933",

                    strokeWidth: 2

                }),

                "select": new OpenLayers.Style({

                    fillColor: "#66ccff",

                    strokeColor: "#3399ff"

                })

            });           

            // Create a vector layer and give it your style map.

            var points = new OpenLayers.Layer.Vector(

                'Points', {styleMap: myStyles}

            );




1.1       矢量要素选择

在4.1节的源码中已经涉及

对于要素选择基本可以理解为以下几步。

①  定义 control:OpenLayers.Control.DrawFeature

分为hover和非hover

select: new OpenLayers.Control.SelectFeature(

                    vectors,

                    {

                        clickout: false, toggle: false,

                        multiple: false, hover: false,

                        toggleKey: "ctrlKey", // ctrl key removes from selection

                        multipleKey: "shiftKey", // shift key adds to selection

                        box: true

                    }

                ),

                selecthover: new OpenLayers.Control.SelectFeature(

                    vectors,

                    {

                        multiple: false, hover: true,

                        toggleKey: "ctrlKey", // ctrl key removes from selection

                        multipleKey: "shiftKey" // shift key adds to selection

                    }

                )

②  Map.addControl

③  Control.active()

1.2       矢量要素拖动

对于要素拖动基本可以理解为以下几步。

①  定义 control: OpenLayers.Control.DragFeature(图层名称)

②  Map.addControl

③  Control.active()

1.3       获取矢量要素信息

对于获取要素信息基本可以理解为以下几步。

①  选中要素，就获取了Feature对象。对于填加要素的同时，也 是选中的一种情况。

②  应用Feature的有关属性获取几何或属性信 息。

一个比较综合的例子，编辑 要素、获取GML要素属性信息

注：feature.attributes.name:获取gml中要素的属性值。

 

   

   

   

   

   

   

 

 

   

Open Popup on Layer.Vector

   

      Using a Control.SelectFeature, open a popup on click.

   

   

   

       

•            

                     onclick="toggleControl(this);" checked="checked" />

              navigate

         

       

•            

                     onclick="toggleControl(this);" />

              draw polygon

         

       

•            

                     onclick="toggleControl(this);" />

              select polygon on click

         

   

      

   

It is possible to use the onSelect/onUnselect hooks on the SelectFeature

       to do fun things -- like open a popup.

   

  

 










1          研究GML命名空间

目前个人认为，gml命名空间中的有关内容是空间数据的定义标准，地位重要。

经过网上的学习与代码测试，有关GML的Schema应用，其实是通常XML中Schema的应用schema规则都是需要专门的代码检验的。

而在目前openlayers中的GML属性定义可以自己定义，故暂且不考虑schema的问题。










1          项目实例

开始用GeoServer+Openlayers做一个实例项目。需要说明的是由于本人是规划部门的信息化从业者，所以实例是规划管理方面的。

1.1       需求描述

（1）       项目名称：用地许可地图发布工具

（2）       简单描述：将用地许可基本信息与 示意位置在定位图上发布出来，并提供查询功能。以下开始明确有关细节内容。

（3）       许可基本信息包括名称、建设单 位、证号、发证日期、JPG证书。其他信息没必要，因为JPG证书其实已经比较够用。

（4）       查询首先提供属性的查询。

（5）       示意位置采用点位表示。

（6）       定位图首先采用区县图，在工具开 发到位的情况下，填加道路、镇、村、街道等数据。

（7）       编辑功能、地图查询是以后的事 情。

1.2       软件体系结构

（1）       B/S

（2）       地图Server采用Geoserver WMS，定位图采用shape文件，示意点与属性用GML文件，B端采用openlayers。

（3）       体系结构示意图

1.3       开发分解

（1）       定位图的实现

（2）       示意点与属性GML文件标准的制定

Openlayers展现的实现