第2章-Web GIS基础技术

WebGIS原理与应用朱进苏州科技大学环境学院2024年5月30日第2章WebGIS基础技术2024/5/30slide2WebGIS基础技术2.1Web的原理和基础技术2.2WebGIS的基本架构和组成部分2.3瘦客户端和胖客户端架构2.4用户体验设计2024/5/30slide3学习目标掌握WebGIS的原理和基础技术掌握WebGIS的基本架构和组成部分掌握WebGIS的瘦客户端、胖客户端架构了解WebGIS的用户体验设计2024/5/30slide42.1Web的原理和基础技术2024/5/30slide5Web的基本原理三层架构客户端/服务器（C/S）架构模式。三层架构：数据层、逻辑层、表现层。Web客户端（Client），Web服务器（Server）。Client端是浏览器（Browser）时，也称为浏览器/服务器（B/S）模式。2024/5/30slide6Web的基本原理WWW技术之三大基石国际标准，由W3C（世界万维网联盟）维护HTTP协议：定义了一套server与client进行请求和应答时所应遵循的规范。八种请求方式：GET、POST、HEAD、PUT、DELETE、TRACE、OPTIONS和CONNECT。（GET与POST最常用）2024/5/30slide7Web的基本原理WWW技术之三大基石HTTP特点简单：键入URL或点击链接即可执行。无记忆状态：server对client做出响应后，它们间的连接立即被撤销，减轻其负担。灵活：支持的传输内容丰富：图片、文件、audio、video。HTTPSHTTPSecure，安全超文本传输协议建立在安全套接层之上的安全版HTTP加密，传输敏感信息2024/5/30slide8Web的基本原理WWW技术之三大基石URL-描述Internet上网页和其它资源地址的一种标识方法。大家俗称的网址基本格式：Protocol://hostname[:port]/filepath?query_string协议://主机[:端口]/文件路径?查询参数2024/5/30slide9Web的基本原理WWW技术之三大基石HTML-描述网页的语言包含内容、局部、格式等信息Browser解释HTML代码，按照指定的格式显示其内容HTML是一种标记语言，由一套标签组成的文本文件外观和布局由CSS(cascadingstylesheets，层叠样式表)来定义2024/5/30slide10Web的基本原理WWW技术之三大基石最新标准-HTML5包括HTML、CSS和Javascript在内的一套技术的组合在不依赖于AdobeFlash和MSSilverlight时，实现丰富的互联网应用增添了处理多媒体和图片内容的语法支持<video>,<audio>,<canvas>标签支持SVG(scalablevectorgraphics，可缩放矢量图形)2024/5/30slide11相关技术Web开发相关技术Web服务器-Apache、Tomcat、IIS等互联网-数据交换格式XML，JSON等Web客户端Web浏览器浏览器端编程语言桌面/移动平台编程语言2024/5/30slide12相关技术服务端技术Web服务器-接收HTTP请求，对请求进行响应处理，最后返回结果到客户端。返回响应结果静态页面或图片执行动态程序：ASP.NET等，执行业务逻辑常见Web

serverApache和Tomcat，Apache软件基金会的开源Web服务器，应用广泛IIS（InternetInformationServer），主要支持.NetOracle的GlassFishIBM的WebSphere2024/5/30slide13相关技术服务端技术服务端编程语言-运行于Server中的服务端程序Java系列包括JavaEE(JavaEnterpriseEdition),JavaSE(JavaStandardEdition),Servlet,JSP和JSP(JavaServerFaces)等。.NET系列包括ASP.NET,C#和VB.NET等，包含于.NET框架中2024/5/30slide14相关技术客户端/浏览器端技术第一类：浏览器和运行于浏览器中的应用程序第二类：浏览器外运行的桌面和移动应用程序Browser获取和显示Webserver上HTML和其它程序结果，并让用户与这些文件交互的软件遵循HTTP、HTML、Javascrip规范的client浏览器知道如何与Webserver通信、如何显示HTML页面、如何解释和执行Javascript脚本常见：MSIE、谷歌Chrome、MozillaFirefox、苹果Safari2024/5/30slide15相关技术浏览器端编程技术Javascript：Netscape（网景）公司1995年推出的运行于浏览器内的脚本语言AJAX(AsynchronousJavascriptandXML，异步Javascript与XML)2005年左右开始流行不是新技术，而是对现有技术（JS和XML）的组合支持browser与server的异步通信模式，网页在后台从server上读取的同时，用户可与当前页面交互，大大提高用户的体验数据和界面相分离的设计模式(DesignPattern)也可运行于智能手机、平板电脑的Browser中2024/5/30slide16相关技术浏览器端编程技术ApacheFlex：/以前称为AdobeFlex，Adobe2011年捐赠给Apache基金会可以开发高度交互的、具有表现力、跨Browser的Web应用是富互联网（RichInternetApplications，RIA）应用开发的有力工具用MXML编写UI，用ActionScript语言编写客户端逻辑基于Flash插件，可以运行于多种browser中基于AIR运行环境，可以不依赖于browser，直接运行于多种操作系统之上2024/5/30slide17相关技术浏览器端编程技术MSSilverlight：/silverlight/与Flex类似可以开发高度交互的、具有表现力、跨Browser的Web应用使用XAML编写界面，.net语言如C#或者VB.Net编写业务逻辑基于MSSilverlight插件，可运行于主流桌面browser之中基于WPF(WindowsPresentationFoudation)运行环境，可以不依赖于browser，直接运行于Windows和WindowsPhone操作系统之上2024/5/30slide18相关技术服务端和客户端的信息交换格式一般交换模式：Client将参数放在URL中创递给server，server返回HTML除了HTML之外的其它格式XML（ExtensibleMarkupLanguage，XML）：允许用户自定义tag和属性的标记语言。不足：繁杂，文件较大，解析效率较低，不利于在JS中使用。2024/5/30slide19相关技术服务端和客户端的信息交换格式除了HTML之外的其它格式Javascript对象表示法（JavascriptObjectNotation，JSON）：轻量级的数据交换格式，比XML轻巧，解析效率高，在逐步代替XMLAMF（ActionMessageFormat）：Flex的二进制数据交换格式，Flex处理AMF效率比JSON更高。2024/5/30slide202.2WebGIS的基本框架与组成部分2024/5/30slide21基本架构WebGIS基本架构WebGIS应用是在Web应用基础上添加了GIS功能三层架构仍然分为数据层、逻辑层（即中间层）和表现层2024/5/30slide22基本架构WebGIS基本架构Web

client向Webserver发送http请求Webserver将GIS相关功能请求转发给GIS

serverGISserver从GISdatabase中读取所需数据，对请求进行处理GISserver将结果通过HTTP响应返回到client中显示2024/5/30slide23WebGISserverWebGIS服务器历史以ESRI产品为例第一代产品（1996）：ArcViewIMS（InternetMapServer）和MapOjbectsIMS，第二代产品（1998）：ArcIMS，对第一代产品增强和扩展第三代产品（2004）：ArcGISServer，功能完整。2024/5/30slide24WebGISserver是WebGIS中最重要的部分WebGISserverArcGISServer功能发布二维、三维地图浏览地图查询、检索、要素编辑、数据提取、跟踪、地址和位置查询、路径分析、几何处理（坐标系变换）、元数据检索和地理处理功能以WebService的方式发布其服务，支持主流REST接口提供OGCWMS、WFS、WCS、CSW、GML、KML等标准服务，支持数据互操作利用缓存、优化、云计算等方法提高系统效率，效率高，可扩展性强提供server端API，client端API和桌面、移动平台开发接口2024/5/30slide25地理数据库GISdatabase地理数据库是WebGIS应用的基础支撑，一个WebGIS应用的价值往往取决于其数据的质量一般可以存储矢量数据、栅格数据专业的GIS数据库还支持CAD、3D、交通网络、GPS坐标、激光雷达（lightdetectionandranging,LiDAR）等类型的数据。2024/5/30slide26WebGIS客户端WebGIS客户端的角色整个系统的最终用户界面：用户交互、发送请求、显示结果等。客户端，尤其是胖客户端，可以运行一些分析处理功能，如制作专题图，生成HeatMap（热图）等。2024/5/30slide27WebGIS客户端WebGIS客户端的类型Web浏览器客户端：运行于browser之中，如googlemaps，百度地图、地图浏览器。桌面应用程序客户端：直接运行于os之上，不受browser“沙箱”环境（sandbox，js和插件程序被严格控制的安全运行环境）限制。Client可以方便访问本地资源，适用于资源密集型的Web应用。如GoogleEarth，ArcGISExplorerDesktop，ArcGISDesktop等。移动客户端：两类基于移动浏览器基于本地APP2024/5/30slide28WebGIS客户端具有通用性WebGIS客户端的类型WebGIS客户端一般针对具体应用，不具有通用性能够显示和调用规范的Web服务和数据的WebGIS客户端具有通用性，被称为地理浏览器（Geobrowser）ArcGISExplorerDesktop：显示OGCWMS、KML/KMZ、GeoRSS和ArcGISServerservices等标准数据和服务。碳项目Gaia（CarbonProjectGaia）二维地理浏览器，访问OGCWMS、WMTS、KML、GML、OpenStreetMap等。http:///2024/5/30slide29WebGIS客户端具有通用性WebGIS客户端的类型ArcGISExplorer2024/5/30slide30WebGIS客户端具有通用性WebGIS客户端的类型Gaia2024/5/30slide31WebGIS客户端具有通用性WebGIS客户端的类型虚拟地球（VirtualGlobe）：地球或其他世界的三维软件模型，从Web上直接获取并显示数据和地图的成为在线虚拟地球（OnlineVirtualGlobe），如GoogleEarth、NASAworldwind等。2024/5/30slide32WebGIS面临的挑战面临的挑战（1）地理数据库需要支撑频繁数据读写的压力（2）GIS服务器需要支撑多用户频繁访问的压力（3）Internet需要支撑频繁传递大量数据的压力2024/5/30slide33WebGIS面临的挑战面临的挑战（4）客户端（特别是Webbrowser）GIS功能的不足（5）最终用户往往缺乏GIS专业知识经验2024/5/30slide342.3瘦客户端和胖客户端架构2024/5/30slide35客户端和服务端间的功能分配瘦、胖客户端根据WebGIS客户端和服务端之间不同的功能分配，WebGIS系统可以分为瘦客户端和胖客户端两种架构。瘦客户端架构：client承担较少的任务，主要负责向服务器发送请求；server承担大部分任务，如生成地图和执行分析处理。优点：（1）除了Webbrowser，用户不需安装任何GIS软件和插件（2）client不需配置功能强大的PC，在低端PC上也可以运行不足：（1）server端负担较重（2）交互性弱，UI使用普通HTML和部分简单的JS，表现力一般2024/5/30slide36客户端和服务端间的功能分配瘦、胖客户端胖客户端架构：client承担较多的任务，客户端上需安装相应的Web浏览器插件，或采用客户端本地（或嵌入式）应用程序来实现。优点：（1）用户交互速度快，很多数据和程序在客户端（2）server端负担较轻不足：（1）需要事先完成相应安装，下载插件或本地程序。（2）面临网络带宽和客户机计算能力的限制，传输大量数据或在client端执行高强度的地理分析计算，往往不可行。2024/5/30slide37瘦客户端和胖客户端架构最佳模式随着JS、HTML5的发展，客户端已经能够承受更加复杂的任务最佳模式分为基础底图、操作图层和任务三大组成部分。基础底图：地理位置和环境基础，在server端生成。一般是相对静态的，更新频率较低，一般预先制作成瓦块地图，以提高浏览速度。2024/5/30slide38WebGIS应用=基础底图+操作图层+任务瘦客户端和胖客户端架构最佳模式操作图层：绘制在底图之上，是最终用户浏览、查询或编辑操作的主题图层。一般被下载到client，由client管理和绘制。用户可快速与之进行交互，还可采用比例尺依赖，即只在放大到一定比例时才显示该图层。任务：若数据量小，任务计算简单，则在client端处理，否则在server端处理。2024/5/30slide39WebGIS应用=基础底图+操作图层+任务最佳模式最佳模式实例2024/5/30slide40最佳模式最佳模式实例波士顿太阳能项目-让用户了解每家屋顶的太阳能潜力。2024/5/30slide41最佳模式最佳模式实例波士顿太阳能项目-让用户了解每家屋顶的太阳能潜力。基础底图：波士顿街道底图、地形底图和航空影像底图。包含每座建筑的屋顶信息操作图层：绿色能源（太阳能、风能、水能、生物质能等）是操作图层，传输到client端。鼠标点击显示其发电瓦数和照片。任务：选择屋顶或画多边形，计算其发电量。密集型计算，需要地形等数据，在server端执行。2024/5/30slide422.4用户体验设计2024/5/30slide43用户体验概念用户体验(UserExperience，UE)是用户在使用某种产品或服务过程中所建立起来的满意程度。产品经理（ProductManager，PM）需要做的事情WebGIS用户体验设计的四个原则有用性-正确理解并实现需求、功能易用性快捷性-GIS服务器和Web服务器的性能优化趣味性2024/5/30slide44