OpenLayers3

OpenLayers

sf2gis@163.com

2015年6月9日

 

1  目标：在页面端展示地图，能够利用WMS、TMS、WFS等完成地图操作。能够完成与业务的融合。

2 原理：前端组织WebService请求，调用后端服务。

3 方法：OpenLayers

目标:作为GIS服务的gui。

OpenLayers是基于Rico和ProtoType框架开发的开源js包， OpenLayers3使用Closure Complier压缩代码。相比OpenLayers2，版本3在2的功能之上，添加了旋转和动画功能，并逐步增加3D功能。

4 方法：OpenLayers库结构

参考：http://openlayers.org/en/v3.6.0/apidoc/?stableonly=true

4.1 命名规则：命名空间小写，类大写。

顶级Namespace：ol。

子命名空间：如ol.layer。一般子命名空间下会有一个同名类，此类为抽象类。

静态类：如ol.animation。

一般类：如ol.Map。

数组类：如ol.Extent。

4.2 组织：MVC

按照MVC模式设置。

Model：Map(代表地图数据)，由layers组成。

View：View展示Map。interactions用户交互。控件：Controls。

Controller：通过消息交互。

4.2.1地图操作控件：地图窗口，页面展示的控件

目标：地图操作控件。

方法：ol.Map

连接div:target，指定div的id

图层：layers，表示图层数组。

显示：view，表示地图视图。

5 方法：页面组织

参考：http://openlayers.org/en/v3.6.0/doc/quickstart.html

5.1 加载openlayers库。

使用指定位置的js库，可以使用CDN。

示例：

<scriptsrc="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>

5.2 设置地图div的属性、样式等。

示例：

<divid="map" class="map"></div>

    <style>

      .map {

        height: 400px;

        width: 100%;

      }

    </style>

5.3 设置地图内部逻辑。

使用JavaScript构建map对象。

6 应用

参见：OpenLayers3应用.docx

7 参考：API

参见：OpenLayers3参考API.docx