WebGIS原理与实践112课件

WebGIS原理与实践

—WebGIS技术基础Tel:主要内容WebGIS常用的开发技术服务器端开发技术客户端开发技术TCP/IP、HTTP协议与URLHTML基础地图网页的制作与发布WebGIS应用通用构架WebGIS开发技术分类服务器端为主的开发技术客户端为主的开发技术服务器端为主的开发技术CGI（通用网关接口）技术 ServerAPI技术ASP,JSP,PHP服务器端脚本CGI开发技术CGI是用Web服务器与服务器端应用程序通讯的接口。通过CGI技术，应用程序开发者可以扩展Web服务器的功能，从而生成可供交互的动态的Web应用，而不仅仅是静态Web网页。客户端浏览器使用HTML将客户的请求传给Web服务器，Web服务器通过CGI程序(脚本)调用GIS程序(GIS引擎)。GIS程序承担所有的GIS查询、分析工作，并将结果(如地图图片)以html文档(片断)的形式反馈给Web服务器，然后由Web服务器再传递给客户端。WWW浏览器服务器WWW(HTTP)服务器CGI程序GIS服务器URL请求传输结果客户机Internet服务器应用程序接口(ServerAPI)WWW浏览器服务器WWW(IIS)服务器ISAPI程序URL请求传输结果客户机InternetGIS引擎服务器端脚本编程——ASPASP是ActiveServerPages的缩写，即活动的服务器（端的网）页，是微软开发的服务器端脚本环境。通过ASP可以结合VBScript（或JScript)脚本命令、ASP内建对象以及ActiveX组件等建立动态、交互的Web服务器应用程序。特点：ASP页的扩展名为asp，ASP运行环境内含于IIS服务器中。可以充分利用各种服务器端组件（ActiveX等）来扩展服务器端功能。

服务器端脚本编程——JSPJSP（JavaServerPages）是SunMicrosystems公司倡导、许多公司参与建立的一种动态网页技术标准。它通过在HTML代码中插入JSP标记（tag）及Java程序片段,构成JSP页面，扩展名为.jsp。JSP实际上是构建在Servlet之上的高层次的动态网页标准。JavaServlet是一个用于编写Java网络服务器应用程序的接口。由Java服务器端容器编译后(Serverlet)执行，可以充分利用各种服务器端Java资源如javaBean.服务器端脚本编程-PHPPHP以前是PersonalHomePage的简称，现在正式称为“PHP:HypertextPreprocessor”，即PHP是超文本预处理器。PHP(php.exe)是一种被广泛使用的源码开放的多用途脚本语言。广泛运用于动态网页的制作。 PHP发展很快，既支持以CGI的形式开发Web应用，同时也支持ISAPI以及ApacheDSO（动态共享对象）模式的应用开发。客户端为主的开发技术 瘦客户：HTML(Form表单) 胖客户：Plug-in模式、JavaApplet、ActiveX等。 富客户：AJAX(Web2.0)

=JavaScript+XHTML+CSS+xmlHttpRequest基于Java小程序的WebGIS技术JavaApplet(小程序)是由面向对象语言Java开发的小应用程序，是在程序运行时，从服务器动态下载到客户机运行的可执行代码。Java小程序与Web浏览器紧密结合，以扩展Web浏览器的功能。Java小程序最初为驻留在Web服务器端的可执行代码。在通常情况下，Java小程序包容在html代码中，并通过<applet>标签来引用。利用GISJava小程序可以在客户端完成GIS数据显示和简单的分析功能。但是，对于大型的GIS分析任务(如叠置、资源分配等)的处理能力，无法与服务器端技术(CGI/ISAPI)相比。GISActiveX的工作原理ActiveX是微软的一种组件形态（称为控件）。客户端安装的ActiveX组件可以扩展Web浏览器的功能。发出GIS数据显示操作请求；

Web服务器接受到用户的请求，进行处理，并将用户所要的GIS数据返回给Web浏览器；Web浏览器接受到服务器传来的GIS数据，启动预先安装的GISActiveX控件，对GIS数据进行处理和分析显示，完成GIS功能。目前，只有IE浏览器支持ActiveX技术。基于ActiveX的客户端WebGISINTERNETGIS数据对象请求客户机Web浏览器GIS控件GIS操作和数据显示服务器WWW服务器下载ActiveX控件和GIS数据对象文件服务器插件（Plug-in）式GIS的工作原理插件本来是网景（NetScape）公司的技术标准，用来扩展Web浏览器的功能，广义的插件包括Java小程序和ActiveX控件。Plug-in作为一种技术标准，现在得到广泛支持；Web服务器接受到用户的请求，进行处理，并将用户所要的GIS数据传送给Web浏览器；客户机端接受Web服务器传来的GIS数据，并将GIS数据类型进行理解；浏览器在本地系统查找和加载与GIS数据相关的Plug-in。如果没有，则需要安装相应的GISPlug-in，来显示GIS数据。GIS的操作如放大、缩小、漫游、查询、分析皆由相应的GISPlug-in来完成。WEBGIS系统开发技术对比开发技术优点不足CGI技术客户端小；处理大型GIS操作分析的功能强；充分利用服务器现有资源。网络传输和服务器的负担重；同步并发请求问题；传输静态地图图片，客户端交互功能有限。ServerAPI技术不需要每次请求都重新启动GIS服务器，响应速度较CGI快。需要依附于特定的Web服务器和计算机平台。GIS插件服务器和网络传输的负担轻；可直接操作GIS数据，速度快。需要先下载安装到客户机上；与平台和操作系统相关；存在安全和管理上的问题。ActiveX控件执行速度快；可以方便地与本地其他应用互操作，并在本地保存数据和处理结果。与操作系统相关；需要预先下载安装；安全性较差；Java小程序与平台和操作系统无关；实时下载运行，无需预先安装；服务器和网络传输的负担轻，安全性较好。GIS数据的和分析结果的本地存储能力有限。Ajax技术Ajax本质上是一种客户端技术，它综合运用了浏览器JavaScript脚本、DOM模型、异步请求对象等技术，提高了WebGIS客户端请求响应速度，改善了用户体验。由于主要采用客户cookie来保存用户请求过程中的一些状态等信息，因而可能会带来一些安全上的问题。Http协议与HTMLTCP/IP协议HTTP协议URLHTML用CSS控制网页外观TCP/IP四层模型TCP/IP协议即传输控制协议/网际协议(TransmissionControlProtocol/InternetProtocol)是世界标准的协议组，它是为跨越局域网和广域网环境的大规模互联网络而设计的。HTTP协议WWW服务器使用的主要协议是HTTP协议，即超文体传输协议。HTTP是一个属于应用层的面向对象的协议，一种基于TCP/IP的C/S协议；由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.1。HTTP协议的主要特点1.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而速度很快。2.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。3.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。4.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。Http请求响应——请求方法请求行中的方法描述指定资源中应该执行的动作，常用的方法有GET、HEAD和POST。每种方法规定了客户与服务器联系的类型不同。HEAD——要求服务器查找某对象的元信息，而不是对象本身。 POST——从客户机向服务器传送数据，在要求服务器和CGI做进一步处理时会用到POST方法。POST主要用于发送HTML文本中FORM的内容，让CGI程序处理。

一个请求的例子为：

GET

一个典型的请求消息GET

Host:download.microtool.de

Accept:*/*

Pragma:no-cache

Cache-Control:no-cache

Referer:

User-Agent:Mozilla/4.04[en](Win95;I;Nav)

Range:bytes=554554-Http请求响应——响应信息服务器在处理完客户的请求之后，要向客户机发送响应消息。

HTTP/1.0的响应消息格式如下：

响应消息=状态行(通用信息头|响应头|实体头)CRLF〔实体内容〕

状态行=HTTP版本号状态码原因叙述

状态码表示响应类型

1××保留

2××表示请求成功地接收

3××为完成请求客户需进一步细化请求

4××客户错误

5××服务器错误

响应头的信息包括：服务程序名，通知客户请求的URL需要认证，请求的资源何时能使用。一个典型的响应消息HTTP/1.0200OK

Date:Mon,31Dec200104:25:57GMT

Server:Apache/1.3.14(Unix)

Content-type:text/html

Last-modified:Tue,17Apr200106:46:28GMT

Etag:"a030f020ac7c01:1e9f"

Content-length:39725426

Content-range:bytes559/40279980

浏览器中的http请求——URL要链接Web中不同计算机上的文档，需要定义一个统一的格式来描述互联网上的文件、文档片断或服务资源的地址，即URL（UniformResourceLocator）。URL是因特网上标准的资源的地址。在Web世界中，URL随处可见，如，.等。要访问本机上的文件可以这样写：URL格式URL地址格式为：scheme://host:port/path或：URL=协议名称＋宿主名＋目录与文件名URL总是包含协议名（http或ftp等）和主机名。协议名后面跟“：//+主机名”；可以通过访问一台主机。主机名（Host）可以是一个IP地址或Web页所在的服务器域名；Port即端口号。通过端口号可以进一步区分各个具体的应用程序，如80是http服务默认的端口号。可以为不同的Web应用系统配置不同的端口号。路径(path):指明服务器上资源的具体位置，以及文件中信息块的偏移量或锚点。通常由目录/子目录/文件名这样结构组成。浏览器中的http响应——htmlhtml的产生全称：超文本标记语言（HyperTextMarkupLanguage）目的：设计制作Web页面方法：通过标记和属性对超文本语义进行全面描述发明者：TimBerners-Lee1989年基础：SGML（StanddardGeneralizedMarkupLanguage）html的产生与发展HTML自诞生后不断发展。HTML2.0增加了在Web文档中放置表单的功能（FORM）。HTML3.2中引入了样式单（CSS1），增加了表格标记并支持JavaScript和Java标记。HTML4是最新的正式版本，支持国际化文本，更大的访问能力，更灵活的表格，对象，打印和更进一步的样式单（CSS2）支持；另外，随着浏览器技术的发展，不同的Web浏览器对HTML语言都有自己的扩展，从而使Web页（HTML文档，简称网页）更加丰富多彩，但这些非标准的扩展同时也为Web开发人员和访问者带来了麻烦。开发工具和运行环境用来开发网页的工具很多，比较著名的可视化的开发工具有微软的FrontPage，Adobe公司的Dreamweaver等。为了更有助于我们理解HTML的基本结构，建议初学者用记事本之类的文字编辑工具手工编写Web页，编写好Web页后使用Web浏览器来查看并测试其正确性。目前，比较普遍使用的Web浏览器是微软的IE、Firfox以及Opera等。对于ASP、JSP和PHP之类的活动服务器网页，我们需要通过合适的Web服务器发布后才能正确浏览。一个简单的HTML<head/>标记中包括文档的标题、文档使用的脚本、样式的定义以及其他关于文档的补充信息等，<head>标记还可以包含搜索工具和索引程序所需要的相关信息。<head>标记嵌套于<html/>标记内。<title/>标记嵌于<head/>标记内，用来包括简述文档内容的标题，标题并不显示在浏览器窗口中，而是出现在浏览器的标题栏中。<body/>标记也嵌套于<html/>标记内，并且紧随</head>标记之后，用来放置浏览器中需要显示的所有信息（标记和属性），是文档的主体。Html中的标记，属性和内容HTML文档是由标记（tag）、属性（attribute）和文本内容组成的，一起用于标识文档的各组成部分（信息块）。所有标记都是由尖括号(<>)及其中的关键字构成。大多数标记都是成对出现的，称为起始标记(<tag>)和结束标记(</tag>)，结束标记内的关键字由一个斜线开始。起始标记和结束标记之间是信息块的内容（文本内容），内容是HTML的核心。要对一块信息采用多个标记，可以采用标记嵌套。嵌套就是把一组标记放在另一组标记之内。例如，为了对文本同时采用黑体和斜体格式，可以嵌套标记如下：<b><i>这行文字应用了黑体和斜体格式</i></b>标记嵌套时，起始标记和结束标记要中心对称。Html中的标记，属性和内容属性是标记的选项，用来对标记作补充说明，以进一步指定信息块的特性如颜色、对齐方式，高度和宽度等。例如，如果在文本中采用标题标记<h1>,则可以用属性进一步指定标题的对齐方式，例如：<h1align=“center”>这是一个居中显示的一级标题</h1>属性的格式为：属性名=“属性值”，所有属性都放在起始标记的尖括号内，作为一种好的习惯，属性值应放在引号内。一个标记中可以放置多个属性，相互之间用空格分开，如：<h1align=“center”size=“+2”color=“#00FF00”>自定义颜色和字号的居中显示的一级标题</h1>HTML标记的分类——结构标记根据标记的功能，可以将HTML标记分为结构标记、布局类标记、格式化文本类标记、功能类标记和扩展类标记等。HTML的基本结构通过结构标记来定义。结构标记用来向浏览器提供关于文档特性的信息。结构标记不在浏览器中显示，而是指示浏览器显示哪些元素（信息块）以及如何显示这些元素。所有的HTML文档应包含五个部分的结构标记，其顺序和嵌套关系如下：<!DOCTYPE>主要用来向浏览器（和验证服务）说明HTML文档所遵循的版本，因此，位于HTML文档的开始部分。<html/>标记紧随<!DOCTYPE>标记之后，用来说明这是一个HTML文档，从技术上看，显得有些多余，但是对兼容不支持<!DOCTYPE>的旧式浏览器是必要的，同时，有助于增强HTML文档的可读性。HTML标记的分类——布局类标记这类标记主要用来设计整个页面的布局。一个典型的网页通常分为页头、页脚、导航栏和主体区域（左右分栏）等。早期的网页设计者主要使用表格（table）和框架（frameset）来布局。frameset是用来设计框架网页的，框架网页用于将多个网页集成在一个浏览器中。通常沿浏览器的顶部或左边提供一个静态导航栏，主体部分是一个随导航栏动态切换的内容。frame通过属性rows和cols水平和垂直分割的框架（frame）的大小和数量。每个frame通过name属性指定名称，通过src属性指定该框架所装入的网页内容。框架网页有些浏览器可能不支持框架网页，这时可以通过noframe标记将用户链接到一个不依赖于框架的站点。<Div>和<span><div>和<span>是现代网页布局中常用的两个标记。<div>是XHTML中指定的专门用来布局设计的容器类对象。div是一个块状（block）标记，可以放入文本或其他标记，用来合理的划分页面区域。span标记也是一个容器类对象，与div一起用来进行网页布局和排版设计。span标记默认显示方式是行间（in-line）显示，因而常用来配合div进行小范围内的布局设计。使用div和span进行网页布局设计时，必须充分使用样式来精确控制其属性，如大小，浮动方式，背景等，才能获得理想的效果（图2-3）。下面是<div>结合<table>布局的一个例子：网页布局示例网页布局示例HTML标记的分类——功能类标记这类标记用来帮助浏览器实现一些特定的功能。主要包括链接（<a/>）标记、表单（form）和meta标记等。<a/>标记用来实现一个超链接，用法示例如下：<ahref=“myMapServer.asp”>我的地图服务器</a>其中href表示一个URL或指向一个锚点（#），即文档内部的一个位置。<meta/>标记用于向服务器和客户端浏览器说明关于文档的相关信息，meta元素同时嵌入了某些搜索引擎用于索引并分类万维网上的文档时所用的文档信息。此元素只能在<head/>元素内使用。下面的例子告诉浏览器，服务器返回的文档类型是text/html，使用的字符集是中文简体(gb2312)。<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>而下面的例子则告诉浏览器每隔2秒刷新一次网页：<metahttp-equiv=”refresh”content=2>功能类标记表单及表单元素是传统网页中实现Web页交互的主要形式。用户通过给表单元素赋值，然后提交（submit）表单，就可以向Web服务器发出请求，并等待返回结果。表单有name、id、method和action等属性。其中method属性用来表示提交表单的方式，如POST或GET等，action属性用来表示表单提交的URL，即让Web服务器上的哪一个应用程序或脚本来处理表单。通过表单请求的参数通常是由表单元素来传递的，所有表单元素都封装在<input/>标签内。有许多类型的表单元素，如radio、checkbox、select/option、textfield、fieldArea以及image等。下面的代码表示的是一个地图交互页面，为了合理组织页面，我们将表单元素放到表格的单元格式中进行布局：表单元素用法示例其中表单元素<image/>用来显示地图，并作为用户与地图进行交互，如放大，缩小和平移等操作。<image/>标记有一个src属性，用来指示图片的来源，实际上是一个URL。另外，<image/>标记还有width和height等属性。HTML标记的分类——扩展类标记这里所谓的扩展类标记主要是指<script/>、<style/>、<link/>、<object/>等用来进一步扩展HTML页的表现和功能的标记。其中<script/>标记用来向Web页中插入一段Javascript脚本。<style/>和<link/>标记用来向网页中插入相关的样式定义，而<object/>标记用来向网页中插入Java小程序、plugin插件或ActiveX控件等插入件，以增强Web页的交互性。用CSS控制网页外观CSS是级联样式单(CascadingStylesheets)的简称，是一种用来对网页页外观进行控制的机制。传统的网页外观是通过标记的属性控制标记内容的显示方式，从而进一步来控制网页的表现。使用CSS有许多好处：使样式代码独立于HTML页面，从而有利于进行站点外观的统一控制；外部引入的样式文件可在网页间共享，并可以在浏览器中缓存，从而节省带宽，提高网页加载速度；有利于分工合作，提高开发效率。可以把有关网页内容的设计交给业务人员或程序员，而把样式设计交给专业的美工人员。用CSS控制网页外观要将CSS应用到网页中，关键是设计和选择合适的选择器。选择器是CSS用来定义样式以及控制Web页外观的基本方式，它用来告诉浏览器某段样式将如何应用到Web页的哪个元素上。选择器的基本语法如下：选择器{属性名：属性值[；属性名：属性值[；……]]}在下面的样式定义中，td{ Background-Color:#eceae8; text-align:center; font:normal14px"宋体";}用CSS控制网页外观td是选择器的名称，表示将{}内定义的样式应用到HTML网页中所有标签名为<td>的元素上。{}内以name/value对的形式定义了一个或多个样式。其中，属性名对应于标签属性的名称；属性值是该属性所代表的样式的取值。该选择器中定义了表格单元格的背景颜色、文字的对齐方式以及字体样式。可以针对网页中某一类或某一个特定的元素定义样式。在下面的样式定义中：用CSS控制网页外观“.tabletooltd”表示该选择器中所定义的样式应用到所有class属性为tabletool的表格的单元格上。而”#tblTitletd”表示该选择器中定义的样式应用到id为“tblTitle”的表格的单元格上。其中，“.tblTool”又称为类型选择器。而“.tblTooltd”和“#tblTitletd”都称为包含选择器。几乎所有的标记都有id和class两个属性，从而可以方便地引用样式定义。用CSS控制网页外观从上面的代码可以看出样式的定义包含在<style/>标记内，而<style/>标记必须位于在网页的<head/>标记内，以便浏览器在载入网页内容之前就已经加载了相关的样式定义。也可以将样式的定义放在一个扩展名为.css的样式文件中，然后用<link/>标记引入该文件：<linkrel=“stylesheet”type=“text/css”href=“mystyle.css”/>应用了CSS样式后，我们的地图网页看起来大致如图2-4所示：用IIS发布Web页IIS（InternetInformationServer）是微软公司开发的运行于Windows操作系统的Web服务