SlideShare ist ein Scribd-Unternehmen logo
1 von 20
OpenLayers
1.1 what is openlayers?
• OpenLayers, is an open source, client side JavaScript web
mapping library.
1.2 why is openlayers?
像Google,Yahoo,Bing,百度,高德等都允许我们连接它们的地图服
务,同时也都提供client side的接口,但是这些商业地图服务提供商,存
在的问题是:
• 无法定制化(map client side, map server backend)
• 商业限制,使用成本
• 一些专业化的地图操作不满足,例如:
–
–
–
–

http://openlayers.org/dev/examples/editingtoolbar.html
http://openlayers.org/dev/examples/drag-feature.html
http://openlayers.org/dev/examples/modify-feature-bysegment.html
intersetc(),distanceto()
2.1 (first.html)
2.2 debug in console panel
2.3 坐标系
GIS领域,坐标系通过“EPSG”码来确定。通常使用的“EPSG:4326”坐标
系通过经纬度X/Y来描绘地图,而球面墨卡托坐标系采用
“EPSG:900913”(实际官方定义为EPSG:3857,但是事实标准为
900913),他是通过米x/y来描绘地图。
Spherical Mercator 球面墨卡托坐标系,一种被多数商业GIS产品如
Google Map, Microsoft Virtual Earch, Yahoo Map等采用的坐标系。
球面墨卡托坐标系将地球看成是一个球体,而不是一个椭圆。为了准确
地叠加数据到这些商业GIS厂商提供的地图上,就必须采用这个坐标
系。这个投影基于地球的形状是球体模型的前提提供了以米测量的地球
数据。
http://openlayers.org/dev/examples/vector-formats.html
3.1 Layer
Layer是OpenLayers地图应用中最基础的组成部分,我们使用到的所有
地图,标记,矢量图形等都是建立在Layer之上的。
3.1 Layer
从类型上,在OpenLayers的map应用中,至少有一个Base Layer(通
常为加载地图的Layer,但是地图Layer也可以有很多个),其他层在它
之上,称为Overlay Layers。
从接口文档可以看到,基类(OpenLayers.Layer)以及非常多的子类,
例如:
• OpenLayers.Layer.WMS:连接WMS map server使用的layer
• OpenLayers.Layer.Google:连接Google Maps时使用
• OpenLayers.Layer.Vector:后面重点介绍
• OpenLayers.Layer.TileCache:提供与支持Tile缓存Server交互
• ...
4.1 Control
Control提供了我们与地图交互的工具,从接口文档可以看到它的子类里
包括很多经常在地图上操作工具,例如:Zoom, Pan, Overview(鹰眼),
Editoring Panle(画图)...
4.2 controls.html
5.1 vector.html
5.2 Vector Layer
通常OpenLayers的Vector类是用来在地图上显示和实时数据交互的,我
们可以从地理文件,如KML,GeoJSON文件中获取数据。
GIS中,图形文件分为栅格和矢量两种类型。较之静态的栅格图像,它
可以显示物体几何形状,同时可以携带各种数据信息,并且支持无极缩
放。
默认情况下, OpenLayers是通过svg,vml,canvas格式来渲染矢量图层
的。所以在console panel中我们可以看到svg标签。
5.3 Feature
OpenLayers在矢量图层上加载几何对象是通过Feature类来完成的。
5.4 Geometry
Geometry类是用来存储几何信息的。和Layer类一样,通常我们只是和
它的子类打交道,例如:Point,LinearRing,Polygon, Collection。
5.5 event.html
6.1 geojson.html
6.1 Format, protocol and strategy
Protocol类用来控制矢量图层如何和数据源进行交互,通常使用有两种类
型:Protocol.HTTP和Protocol.WFS。
6.2 Format, protocol and strategy
Format类用来决定输入或输出到什么格式类型的数据,我们可以用来读
入例如KML,GeoJSON格式的文件,也可以将feature对象以这些类型
反向输出。换句话说,Format用来控制feature数据的序列化和反序列
化。
6.3 Format, protocol and strategy
Strategy类用来控制请求发送和响应处理的方式,它的子类有:
• Strategy.Fixed: 最简单的一种策略,feature数据只请求一次。
• Strategy.BBOX: 一种在Protocol.WFS协议下,用来仅获取当前地图
的可视范围内数据的策略。
• Strategy.Cluster: 一种feature组合策略。
• Strategy.Grid: 一种还处于sandbox,未正式release的策略,用来获
取矢量切片的策略。
7.1 矢量切片
http://www.openlayers.cn/portal.php?mod=view&aid=33
http://www.openlayers.cn/forum.php?mod=viewthread&tid=141
http://blog.perrygeo.net/2012/02/24/utfgrids-with-openlayers-andtilestache/

Weitere ähnliche Inhalte

Ähnlich wie openlayers quick use

Tm快报201202 daqiu
Tm快报201202 daqiuTm快报201202 daqiu
Tm快报201202 daqiutbmallf2e
 
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Dexter Yang
 
大鱼架构演进
大鱼架构演进大鱼架构演进
大鱼架构演进Jun Liu
 
Zh tw introduction_to_map_reduce
Zh tw introduction_to_map_reduceZh tw introduction_to_map_reduce
Zh tw introduction_to_map_reduceTrendProgContest13
 
打动学员的3个心理规则
打动学员的3个心理规则打动学员的3个心理规则
打动学员的3个心理规则Spike Gu
 
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較Stipc Nsysu
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
Yog Framework
Yog FrameworkYog Framework
Yog Frameworkfansekey
 
Android开发概览
Android开发概览Android开发概览
Android开发概览heyfluke
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swttka
 
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结 【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结 yangdj
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路luolonghao
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node jsXuefeng Zhang
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123oemgame
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理gorillazf
 
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境drewz lin
 
美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010Jiang Zhu
 

Ähnlich wie openlayers quick use (20)

Tm快报201202 daqiu
Tm快报201202 daqiuTm快报201202 daqiu
Tm快报201202 daqiu
 
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
 
大鱼架构演进
大鱼架构演进大鱼架构演进
大鱼架构演进
 
Zh tw introduction_to_map_reduce
Zh tw introduction_to_map_reduceZh tw introduction_to_map_reduce
Zh tw introduction_to_map_reduce
 
打动学员的3个心理规则
打动学员的3个心理规则打动学员的3个心理规则
打动学员的3个心理规则
 
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較
KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
Android
AndroidAndroid
Android
 
Yog Framework
Yog FrameworkYog Framework
Yog Framework
 
Android开发概览
Android开发概览Android开发概览
Android开发概览
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
 
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结 【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
移动端跨平台技术原理
移动端跨平台技术原理移动端跨平台技术原理
移动端跨平台技术原理
 
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境
Top100summit 腾讯-周健-服务化与体系化解决大量定制小项目开发困境
 
美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010美国云计算发展现状及趋势-2010
美国云计算发展现状及趋势-2010
 
Meteor
MeteorMeteor
Meteor
 

openlayers quick use