OpenLayers3
2015-06-30 23:31
288 查看
OpenLayers
sf2gis@163.com
2015年6月9日
OpenLayers是基于Rico和ProtoType框架开发的开源js包, OpenLayers3使用Closure Complier压缩代码。相比OpenLayers2,版本3在2的功能之上,添加了旋转和动画功能,并逐步增加3D功能。
子命名空间:如ol.layer。一般子命名空间下会有一个同名类,此类为抽象类。
静态类:如ol.animation。
一般类:如ol.Map。
数组类:如ol.Extent。
Model:Map(代表地图数据),由layers组成。
View:View展示Map。interactions用户交互。控件:Controls。
Controller:通过消息交互。
方法:ol.Map
连接div:target,指定div的id
图层:layers,表示图层数组。
显示:view,表示地图视图。
示例:
<scriptsrc="http://openlayers.org/en/v3.6.0/build/ol.js"type="text/javascript"></script>
<divid="map" class="map"></div>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
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=true4.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.html5.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应用.docx7 参考:API
参见:OpenLayers3参考API.docx相关文章推荐
- 百万级PHP网站架构工具箱
- nginx负载均衡配置的几种策略
- Linux Screen命令
- Centos 安装Hbase-1.0.1.1
- 访问jsp页面报java.lang.NullPointerException at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22)
- github for window 中 git shell 设置代理方法和解决ssl证书错误的问题
- Top10Servlet
- Red Hat Linux6:postfix邮件系统
- linux下ftp搭建的两种方式(个人笔记)
- 初探 Openstack Neutron DVR(转)
- CentOS安装、使用VNC
- CentOS安装、使用VNC
- Android 架构图
- opencv学习日常之“Saturation Casting“转换saturate_cast<>()
- 虚拟机下 修改Linux系统的MAC
- linux下nginx+php-fpm运行用户以及资源目录的权限
- RMAN性能监控
- Zero-Copy&sendfile浅析
- Ubuntu14.04下安装配置apache2.4
- 2015.6.30 第二堂 property