Transcript 三、Flex

WebGIS三部曲对OGIS应用
内容大纲
 一、WebGIS及其规范
 二、WebGIS常用前端开发技术
 三、OGIS基本原理
 四、ArcGIS Flex Viewer使用 OGIS
1、WebGIS及其规范
 一、什么是WebGIS？
 二、GIS服务规范
1.1、什么是WebGIS？
 WebGIS是利用Web技术来扩展和完善地理信息系统的
一项技术。它是基于网络的客户机/服务器系统；利用
因特网来进行客户端和服务器之间的信息交换；它是一
个分布式系统，用户和服务器可以分布在不同的地点和
不同的计算机平台上。WebGIS主要作用是进行空间数
据发布、空间查询与检索、空间模型服务、Web资源的
组织等。
 前期使用矢量数据
 现在使用瓦片为底图
1.2GIS服务规范
 Web Feature Service WFS 要素Web服务
 Web Map Service WMS 地图Web服务
 Web Map Tile Service WMTS 切片地图Web服务
1.2.1、 WMTS服务规范
WMTS，即Web Map Tile Service（网络地图瓦片服
务），由开放地理信息联盟（Open GeoSpatial Consortium，
OGC）制定，是和WMS并列的重要OGC规范之一。WMTS
不同于WMS,它最重要的特征是采用缓存技术能够缓解
WebGIS服务器端数据处理的压力，提高交互响应速度，大
幅改善在线地图应用客户端的用户体验。WMTS是OGC主推
的缓存技术规范，是目前各种缓存技术相互兼容的一种方法。
1.2.1、 WMTS服务规范
服务接口：
 1. GetCapabilities
获取服务的元信息，包括瓦片坐标系、级别信息
实例： service=WMTS&request=GetCapabilities
 2. GetTile
获取切片，根据行列号获取切片地图
实例：
service=WMTS&request=GetTile&version=1.0.0&layer=etopo2&style=default
&format=image/png&TileMatrixSet=WholeWorld_CRS_84&TileMatrix=10m
&TileRow=1&TileCol=3
 3. GetFeatureInfo
可选，获取点选的要素信息
2、WebGIS常用前端开发技术
 一、JavaScript
JavaScript是一种类C的动态语言，广泛用于网页前端编程，目前也有
运行于服务端后台的实现，如Node.js。
 二、Silverlight
由微软公司推出的跨浏览器的、跨平台的插件，为网络带来下一代基
于.NET的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模
型，并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行
在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传
递。
 三、Flex
由Macromedia公司在2004年3月发布的，基于其专有的Macromedia
Flash平台，它是涵盖了支持RIA（Rich Internet Applications）的开发和部署
的一系列技术组合。
2.1、 Flex技术
Flex 是一个高效、免费的开源框架，可用于构建
具有表现力的 Web 应用程序，这些应用程序利用
Adobe Flash Player和 Adobe AIR, 运行时跨浏览器、桌
面和操作系统实现一致的部署。
2.1、 Flex技术
Flex VS JavaScript
 一、Flex 比JavaScript界面更华丽、表现力更强。
 二、Flex对流媒体的支持更好，可支持视频文件播放，摄像头视频播
放等。
 三、Flex 需要浏览器插件支持， JavaScript不需要。
 四、 JavaScript与网页其它元素的交互更简便，集成更容易。
2.1、 Flex技术
Flex仪表控件
2.1、 Flex技术
Flex流媒体支持
2.1、 Flex技术
ArcGIS Flex Viewer 的动态标绘功能
2.1、 Flex技术
Flex VS Silverlight
 一、同样拥有华丽的界面和很好的表现力。
 二、在网页上同样需要插件支持。
 三、Flex的开发环境及语言特性更像Java，Silverlight使用C#等语言编
程更合适.Net开发人员。
 四、Flex 产品更成熟，用户装机量更大。
3、OGIS基本原理
 一、2.5D与平面地图的关系
 二、 2.5D瓦片切图方式
 三、地图热区
 四、坐标转换
3.1、2.5D图制图原理
从平面地图到2.5D步骤:
 1、顺时针旋转45度
 2、地图高度设置为：原 高度*sin(45)
3.1、2.5D图制图原理
平面图
2.5D图
3.2、地图切图方式
 将大图按6个等级切图,瓦片的尺寸是256*256。
 第一级比例尺最大，也就是原2.5D大图的缩放比。
 第二级的比例尺为第一级的1/2，剩下各等级依次类推。
3.2、地图切图方式
 某等级与其更高一级的命名规则是：
本等级的名称的行列分别乘以2，结果即为高一级的第一个瓦片的命名。
136,132.jpg
68,66.jpg
136,133.jpg
137,132.jpg
137,133.jpg
3.3、地图热区
 1、热区由2.5D图切片后
导入系统，在系统绘制
得到。
 2、为了提高热区访问
效率，将热区根据坐标
区域导出个相应的js脚
本文件中。
3.3、地图热区
 1、热区文件与坐标点对应
关系：
某点的OGIS坐标为x,y，则该点对应的热区
文件是 x/4096,y/4096.js
 2、热区文件所在文件夹命
名规则：
热区文件的x序号的前两位
3.3、地图热区
 1、热区数据规则：
亲
，
能
听
懂
不
？
4、ArcGIS Flex Viewer 使用 OGIS
 一、底图加载
 二、热区展示
4.1、底图加载
 一、当前视图窗口内的瓦片是如何算出来的？
 二、地图上某点的所在的瓦片是哪个？
 三、地图窗口内的任意一点的坐标是如何算出来的？
4.1、底图加载
什么是地图像素Resolution(分辨率)？
Resolution 是1像素代表多少地图单位。
 例子：如果地图的坐标单位是米， dpi为96

1英寸= 2.54厘米；

1英寸=96像素；

最终换算的单位是米；

如果当前地图比例尺为1: 125000000，则代表图上1米实地125000000米；

米和像素间的换算公式：

1英寸=0.0254米=96像素

1像素=0.0254/96 米

则根据1：125000000比例尺，图上1像素代表实地距离是
125000000*0.0254/96 = 33072.9166666667米。
4.1、底图加载
 像素分辨率示例
所在等级 像素分辨率
比例尺
4.1、底图加载
 地图窗口内的任意一点的坐标计算方式
1、获取该点在地图窗口中的像素坐标（pX,pY）。
2、获取左上角地理坐标(ltX,ltY)
3、该点X=ltX+pX* Resolution
该点Y=ltY+pY* Resolution
4.1、底图加载
 地图上某点的所在的瓦片计
算法：
1、设定坐标原点为0,0，某点的坐标是
x,y
2、瓦片行号：最小整数(x/ Resolution/
瓦片宽度(256))
瓦片列号：最小整数(y/ Resolution/
瓦片高度(256))
4.1、底图加载
 当前视图窗口内的瓦片行列号
 1、求出四个角的瓦片行列号
 2、从左到右，从上到下遍历求出所有瓦片行列号
4.1、底图加载
ArcGIS Flex Viewer代码实现：
一、继承自TiledMapServiceLayer类
二、设定坐标系统及像素分辨率信息
三、重写获取瓦片方法
4.2、热区展示
 如果将热区与底图吻合？
4.2、热区展示
4.2、热区展示
 一、缩放比
 二、偏移量
4.2、热区展示
4.2、热区展示
ArcGIS Flex Viewer代码实现：
一、继承自TiledMapServiceLayer类
二、侦听map控件的地图视图变化事件(EXTENT_CHANGE)
三、获取最新地图范围内的热区文件
四、加载热区文件，解析热区。
五、GraphicsLayer图层中绘制热区，并绑定事件
亲，还想知
道点哈？