网络地理信息服务开发技术-朱欣焰

1、网络地理信息服务开发技术朱欣焰、佘冰第 2 页主要内容n 富客户端技术介绍n 基于Flash技术的社会经济空间信息服务平台构建n HTML5技术及其在Web GIS中的应用第 3 页Silverlight是微软所开发的 Web 前端应用程序开发解决方案，是微软富互联网应用策略的主要应用程序开发平台之一。Flash 最初是作为一种二维矢量动画制作软件。后来被应用于互联网，现在已成为了最普及的RIA实现技术。JavaFX是SUN公司推出的RIA解决技术。由于需要运行与JVM之上，在目前的PC客户端上并不普及，在移动领域有着更好的前景。http:/ 4 页Flash GIS应用第 5 页Flash

2、GIS应用第 6 页HTML5HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。HTML5 是互联网的下一代标准 ， 是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。n不是一项新的技术，而是一组特性的集合n已有的元素都不用改变n升级容易第 7 页矢量地图Cartagen第 8 页Nokia WebGL Maps第 9 页基于Flash技术的社会经济空间信息服务平台构建n 平台介绍及架构n 矢量绘制n 报表及专题图服务n 空间分析模块开发第 10 页问题和挑战问题: 数据源的分离 不同领域间信息的分离 不同团体研究工作的分离挑战: 数据

3、共享 (海量异源异构数据集的访问与互操作) 数据分析方法的共享 知识的共享第 11 页统计数据和GIS的集成GIS GIS B-IDPOP10012000100230001003500010046000A-IDB-ID10012000100230001003500010046000B-IDTempreture10012000100230001003500010046000B-IDGDP10012000100230001003500010046000B-IDLand10012000100230001003500010046000政府统计数据政府统计数据人口调查数据人口调查数据经济调查数据经济调查

4、数据境界地图境界地图街区地图街区地图城市地图城市地图第 12 页空间智能)()()(2 ninjijninjjiijwSxxxxwdIDATARSGIS信息信息+方法方法+知识知识空间技术空间技术信息，方法与知识在空间技术支撑下的集成第 13 页China Geo-Explorer提供一个在线的数据集成与分析的平台利用新的方法促进多学科学习和应用促进知识共享高效的空间及非空间数据集成快速精确的空间位置分析及评估识别空间模式和趋势省时、易用、格式化且可自定义的多种报表以及动态专题图及各种可视化图表第 14 页开发实例China Geo-Explorer第 15 页China Geo-Explor

5、er架构第 16 页多源数据集成第 17 页GraphicsGraphics类不能实例化，但支持矢量绘制的其他类会自动生成Graphics实例，并可通过graphics属性对其进行访问。ShapeSpriteMovieClipObjectEventDispatcherDisplayObjectInteractiveObjectDisplayObjectContainerShapeSprite第 18 页空间分析模块1999-2008年选择集国内生产总值的相关性分析 第 19 页n GMLn GeoJSONn GeoRSS第 20 页AMF支持类型支持类型undefinenullfalsetru

6、eintdoublestringxmldatearrayobjectxml-makerbyteArray第 21 页第 22 页BlazeDSByteArrayreadObject第 23 页第 24 页是否第 25 页大量矢量数据示例第 26 页ObjObjObjObjObj第 27 页动态交互数据选择第 28 页动态交互数据选择第 29 页报表服务- 开源库JasperReportsn 报表模板与程序逻辑分离n 样式，排版和数据的填充是分离的n 良好的可视化报表编辑工具支持（ireport）n 支持多种数据源以及自定义数据源n JDBC，JavaBean，XML, CSV，Hibernat

7、eCustom Datasourcen 多种格式导出n Pdf, rtf, excel, odt, csv, xml, html, jpegn 免费的Lesser GNU Public License (LGPL)第 30 页JasperReports 架构第 31 页平台实现n 实现JRDataSource接口进行WFS数据的读取，实现报表服务和OGC标准服务的集成第 32 页专题图服务-瓦片专题图n 客户端动态生成样式表SLD文件n 样式表上传服务器端n GeoServer请求专题图（引用样式表地址）第 33 页专题图的导出n 结合报表服务实现各种格式的导出第 34 页专题图服务-客户端专

8、题图第 35 页空间分析模块开发n 动态参数化界面n 统计图库集成n 动画效果搜索探索性分析建模预处理第 36 页统一参数选择界面n 自定义的描述规范和动态参数生成界面 n 方法的参数有复杂关联关系n 前台验证第 37 页流程第 38 页结果 参数选择空间自相关指数结果可视化第 39 页时空重心模型结果 时空探索性分析时空重力模型n继承TweenEffect实现颜色、形状、透明度的渐变第 40 页统计图大数据量优化n 划分网格索引n 实例化少数点n 以Raster绘制替代Sprite舞台添加第 41 页Flash 局限性l Adobe Flash是100%的私有产品。它仅在Adobe有售，Ad

9、obe也是决定Flash未来发展、定价等的唯一机构。尽管Adobe的Flash产品非常普及，但这并不意味着它是开放的，因为它完全被Adobe控制，也仅仅来自Adobe。从任何角度来看，Flash都是一套封闭系统。l Flash的在移动设备上优化不足，性能不高。同时对于移动设备，需要保证足够长的连续工作时间，而Flash的特点是耗电大，预载时间长。l Flash是为PC使用鼠标控制设计的，而不是为使用手指操作的触摸屏设计的，无法适应当前触摸屏流行的趋势。第 42 页HTML5技术及其在Web GIS中的应用n HTML5的概念、发展历史n HTML5的新特性n 基于HTML5的Web GIS解决

10、方案n 发展前景第 43 页实现 v.s. 规范?n 实现和规范相辅相成n 现行很多成功的规范很多是复古规范n 1993 HTML+ 从未实现n 1994 HTML 2.0 引入tables等特性n 1995 HTML 3.0 从未实现n 1996 HTML 3.2 引入applets 等特性n 1997 HTML 4.0 引入Frameset等特性n 从来没有出现一个干净的、统一的HTML规范第 44 页从HTML4.0 到 HTML 5.0n 1998年，W3C研讨会“塑造HTML的未来”：n 扩展HTML 4.0 到XML的规范会很困难, 重新开始制定一套规范n 2001年， XHTML

11、1.0发布 n MIME：application/xhtml+xmln 事实是：99%的HTML网页至少含有一个错误n 后果：XHTML 1.1和XHTML 2.0很少被开发人员使用n 2004年， WHAT工作组成立 - 进化HTML表单n 2006年，Tim Berners-Lee倡导两个组织开始协作n 2007年， W3C 关闭XHTML 2工作组第 45 页3、HTML5环境下的新特性环境下的新特性n语义n多媒体n离线存储*n设备及应用n地理位置*n多线程*不属于HTML5规范第 46 页语义语义化标签HTML5的一个重要特性，就是引入了结构化的语义标签，使得HTML5在文档结构上较H

12、TML4.01更加清晰和易读。HTML4页面页面HTML5页面页面第 47 页语义微数据MicrodataHTML5微数据是一种标记内容以描述特定类型的信息，每种信息都描述特定类型的项。 h1 itemprop=“name itemreviewed 小观园（田园店） 地址： 评分：四星商户 271条评论 第 48 页语义智能表单表单是网页中常见的控件(集)，担负了用户和网页后台数据更新交互的任务HTML5对表单的功能进行了大幅度的提升包括以下内容：n 众多的新增input类型，在input的type类型中，新增了color、Email、date、number、range、search、teI、

13、url等类型。n 新增的input属性，包括required、autofoucus、pattern、list、autocomplete、placehold、form等。n 新增的表单标签，包括datalist、keygen、output、meter、progress等。第 49 页多媒体音视频、标签，用来在Web网页中嵌入音视频播放功能，而无须FLASH和其他嵌入式插件的支持。n 音频支持Ogg Vorbis、MP3、AAC和WebM四种格式n 视频支持Ogg Theora、MPEG4、H.264和WebM四种格式第 50 页绘制Canvas画布n Canvas元素在Web页面上创建了一个矩形

14、的绘图表面。n Canvas应用编程接口提供了数十个方法或函数，以绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，操作图像和视频以及其他有趣的活动。 var canvas= document.getElementById(canvas).getContext(2d); 第 51 页1、绘制基本形状fillRect lineTo arc bezierCurveTo第 52 页2、运用样式与颜色fillStyle strokeStyle globalAlpha createLinearGradient lineWidth lineCap lineJoin miterLimit第 53

15、 页3、图形变形和组合translaterotatescale第 54 页4、图形裁剪、像素处理和字体drawImageclipputImageDataShadowsfillText第 55 页绘制 - SVGn 可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。在HTML4时代就已经存在，但跟Canvas有互补关系因此会继续存在第 56 页SVG滤镜 第 57 页矢量在线编辑 -SVGn 支持大规模矢量数据的高效编辑； n 支持节点的动态添加、删除； n 支持节点优先级的设置。第 58 页矢量在线编

16、辑 -SVG第 59 页Canvas 与 SVGCanvasSVG基于像素基于形状单个HTML元素多个图形元素，这些元素成为 DOM 的一部分仅通过脚本修改通过脚本和 CSS 修改事件模型/用户交互颗粒化 (x,y)事件模型/用户交互抽象化 (rect, path)图面较小时、对象数量较大 (10k)（或同时满足这二者）时性能更佳对象数量较小 (10k)、图面更大（或同时满足这二者）时性能更佳织图织图第 60 页多媒体WebGLWebGL地解决了现有的Web交互式三维动画的两个问题：n 它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;n 它利用底层的图形硬件加速功

17、能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。基于OpenGL ES 2.0。提供可编程管线，包含顶点着色器和片元着色器。http:/ 61 页 attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; varying vec2 vTextureCoord; void main(void) gl_Position = aVertexPosition; vTextureCoord =aTextureCoord; varying vec2 vTextureCoord;uniform sampler2D uS

18、ampler; void main(void) gl_FragColor=texture2D(uSampler , vTextureCoord);坐标第 62 页three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。3D引擎Three.js第 63 页离线存储Web StorageHTML5提供了与HTTP session cookies相似的稳健的Web存储属性n sessionStorage用以存储浏览最顶层环境生存周期内的数据。如浏览器Tab或窗口持续打开周期内的数据；n localSto

19、rage用以存储周期较长、多页面以及多浏览器session内的数据这些数据可以一直保存甚至持续到重启浏览器或者电啮。cookieWeb storage大小4K10M传输服务器-浏览器本地速度慢快存储非独立独立安全性低高第 64 页离线存储Indexed DBn Indexed DB是HTML5中的另外一种数据存储方式，用来帮助应用在本地存储结构比较复杂的数据。第 65 页离线存储Application Cachen HTML5定义了当用户的网络被断开后，如何让它们继续与网页程序和文档进行交互。n 优势： 离线浏览用户在不能联网的时候依然能浏览整个站点 高速缓存资源是存储在本地的，因此能更快加载

20、。 更小的服务器负载浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载。 第 66 页通信Web Socketn HTML5 web socket规范定义了Web socket API，支持页面使用web socket协议与远程主机进行全双工的通信。n HTML5 Web socket以最小的开销高效地提供Web连接。相较于经常需要使用推送实时数据到客户端甚至通过维护两个HTTP连接来模拟全双工连接的旧的轮询或长轮询(Comet)来说，极大地减少了不必要的网络流量与延迟。var socket = new WebSocket(location); socket.onopen =

21、function(event) socket.postMessage(“Hello, WebSocket”); socket.onmessage = function(event) alert(event.data); socket.onclose = function(event) alert(“closed”); 第 67 页通信Web NotificationHTML5 Web Notification技术提供了一种可以跨越沙盒的通知API，可以使得用户在浏览任何网页，甚至在浏览器最小化的状态下都可收到来自Web应用的桌面通知。nAmbient notificationnInteract

22、ive notificationnPersistent notificationnNotification platformnSimple notificationnWeb notification第 68 页设备及应用APIDrag&Drop、File APIn 目前许多网页程序，如Gmail、QQ邮箱已经支持通过拖拽方式将档案作为邮件附件。这个业务功能的实现就是使用了Drag&Drop以及File API。document.addEventListener(dragstart, function(event) event.dataTransfer.setData(text,

23、 Customized text); event.dataTransfer.effectAllowed = copy; , false);第 69 页if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(position) var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMar

24、ker(new GLatLng(lat, lng); ); 设备及应用APIGeolocation APIuIP地址uGPS地理定位数据uWiFi地理定位数据u手机地理定位数据u用户自定义的地理数据位置信息来源Geolocation应用详细的位置信息n HTML5的定位AH可以综合使用GPS、Wi-Fi、手机等多种定位方式。定位更为精准、灵活。定位API和离线存储的结合，可实现丰富的地图应用。第 70 页多线程 在HTML5中提出了工作线程(Web Worker)的概念，并且规范出工作线程的三大主要特征：n 能够长时间运行(响应)。n 理想的启动性能。n 理想的内存消耗。main.js: va

25、r worker = new Worker(extra_work.js); worker.onmessage = function (event) alert(event.data); ; extra_work.js: / do some work; when done post message. postMessage(some_data);第 71 页检测HTML5特性n Modernizr 开源库，方便的支持各种HTML5特性检测./detect.htmlif (Modernizr.canvas) / 支持canvas绘制！ else /

26、不支持canvas绘制 第 72 页4、浏览器的支持情况n PC端的支持情况n 移动端的支持情况第 73 页移动端支持第 74 页基于HTML5的Web GIS解决方案n 基于HTML5的Web GIS方案介绍n 二维地图n 三维地图n 基于OpenWebGlobe的开发实例第 75 页NOKIA-Map 3D WebGL第 76 页WebGL Earth第 77 页openwebglobe第 78 页Google-MapsGL第 79 页cartagen第 80 页openlayers第 81 页Maps 3D WebGLWebGL EarthOpen Web GlobeOpenLayers

27、 3.0开发商NOKIA Klokan TechnologiesUniversity of Applied Sciences Northwestern SwitzerlandOpen Source Geospatial Foundation是否开源否是是是影像来源nokiaOSM/bingOSM/owg/本地数据Google /Yahoo /OSM矢量绘制否否点NA地形否是是NA三维模型表面模型否JSONNA速度快一般一般NA场景类型2D3D2D、3D flat、3DNA项目进展测试版测试版0.9.14进展中网址http:/ 82 页二维场景地图对比Maps GLOpenLayersCarta

28、gen开发商GoogleOpen Source Geospatial FoundationMIT Media Lab开源否是是影像来源GoogleGoogle /Yahoo /OSMOSM矢量绘制否否是速度快快一般进展测试版2.1.2进行中网址http:///第 83 页基于OpenWebGlobe的开发实例n 开发环境n OpenWebGlobe架构n OpenWebGlobe示例开发第 84 页n 自动提示自动提示n 代码主题代码主题n 调试调试n 支持流行框架支持流行框架n Node.js, extn 插件支持插

29、件支持运行环境第 85 页Openwebglobe是一个开源的虚拟地球环境，能够处理TB级地形数据，图像、地图、三维点云数据，并且能够加载三维模型数据。3DGIS引擎openwebglobe第 86 页第 87 页第 88 页 openwebglobe function main() var ctx = ogCreateContextFromCanvas(canvas, true); var globe = ogCreateGlobe(ctx); 第 89 页Image Data Layers & Elevation Data var imgBlueMarble500 = url : /data/img, layer : World500, service : i3d ; var el