《现代测绘科学与技术》课程作业作业题目：成都市基础地理信息公共服务平台指导教师：小组名单：姓名：姓名：姓名：姓名：姓名：目录目录1 网站概要设计 (1)1.1 系统体系结构 (1)1.2 系统实现软件与技术 (1)2 网站详细设计 (3)2.1 数据处理与发布 (3)2.2 地图服务制作 (5)2.3 地图加载显示与基本操作 (6)2.4 查询流程设计 (8)2.5 工程发布 (10)3 网站显示功能展示 (11)3.1 打印 (11)3.2 清空： (12)3.3 标注： (12)3.4 漫游： (13)3.5 测距： (13)3.6 图层： (14)4 网站查询功能展示 (19)4.1 关键字查询 (19)4.2 拉框查询 (20)4.3 多边形查询 (22)4.4 缓冲区查询 (23)5 项目过程管理 (25)5.1 项目进程 (25)5.2 系统性能评估 (25)5.3 任务分工： (25)5.4 工作总结： (26)5.5 小组情况： (26)1网站概要设计1.1 系统体系结构基于作业要求，本系统选择B/S模式，采用MVC结构，系统功能全部在服务器端实现。
系统结构如图1-1所示：PostgreSQL+PostGIS TomcatGeoserver图1-1 系统结构图MVC结构实现了WEB系统的职能分工，Model层实现系统的业务逻辑，采用JavaBean技术实现；View层用于与用户的交互，采用JSP技术实现；Controller 层是Model与View之间沟通的桥梁，采用Servlet技术实现。
1.2 系统实现软件与技术本系统采用JavaEE开发，选用如下软件与技术来完成了系统的开发：✓JDK（版本jdk1.6.0_20）：JDK 是整个Java的核心，包括了Java运行环境，Java工具和Java基础的类库，在软件安装完毕之后，需要进行环境变量的配置，建立JAVA_HOME、CLASSPATH，并且在Path中加入JDK的库。
在“我的电脑”点右键，选择“属性”，“高级”选项卡，点击“环境变量”，点击“新建”，输入JAVA_HOME及其安装目录。
相同的方法建立CLASSPATH，修改Path。
✓TOMCAT（版本apache-tomcat-6.0.26）：本系统所采用的Tomcat是插件版的，它作为本系统的WEB服务器。
将压缩包解压到拟选目录（eclipse下的plugins 文件夹中）下面，只需重启eclipse，即可在eclipse的窗口看见小猫的图案，就表示安装成功，可以正常使用。
✓PostgreSQL：PostgreSQL是一个功能强大的开源数据库，它也支持商业产品的各种特性，可以说是目前世界上最先进，功能最强大的自由数据库管理系统。
当然在本次开发中我们安装好PostgreSQL后必须进行他的空间数据扩展，也就是安装PostGIS。
✓POSTGIS（版本PostgreSQL 8.3和postgresql-8.3-postgis ）：PostGIS利用PostgreSQL的扩展性能，提供了一个强大的空间数据库解决方案。
PL/PgSQL是PostgreSQL程序上的SQL语言。
PostGIS利用该特性添加了空间能力，该方式与在Java Classpath中添加一个JAR包不同——PostGIS与PostgreSQ联系紧密，且它的安装和配置一次性就可以设置完成。
在本系统PostGIS中安装完成后，需要手动升级：在PostGIS客户端pgAdminIII打开pgAdminIII查询窗口，导入postgis 安装目录中的lwpostgis.sql和spatial_ref_sys.sql。
✓GEOSERVER（版本geoserver1.7）：GeoServer 是基于Java Servlet的一个OGC标准的实现。
GeoServer支持WMS、WFS、WCS。
我们将利用GeoServer实现地图网站的WMS（浏览器中查看成品地图）。
GeoServer作为本系统的地图服务器，它有exe的安装形式和war包的安装形式，本系统采用的是war包，安装好JDK和Tomcat之后，将GeoServer的war包，拷贝到Tomcat的webapps文件夹下，在浏览器栏中输入http://localhost:8080/geoserver即可访问到GeoServer首页。
✓Openlayers: （版本OpenLayers-2.7）OpenLayers是一个OGC客户端，是一个Ajax地图框架，我们可以使用这个工具集仅在一个文件中通过很少的代码来生成一幅地图。
它支持WMS，默认使用的是JPEG图像格式。
✓ECLIPSE（版本galileo）Eclipse 是一个开放源代码的、基于Java 的可扩展开发平台。
就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。
✓Ajax：是一种可以创建交互式网页应用的网页开发技术。
主要优点就是能够异步请求，局部刷新。
这无疑大大提高了页面加载的速度，当用户需要新的服务的时候，不会出现整个页面都处于刷新的状态，能够让用户得到很好的体验。
本系统的Ajax技术由OGC客户端Openlayers提供。
2网站详细设计2.1 数据处理与发布我们的原数据是.table格式，使用了Qgis软件进行了数据处理，得到八个shapefile格式的矢量数据图层，包括底图：成都市区县图，一个面状要素图层：居民点，两个线状要素图层：高速公路、县道，四个点状要素图层：旅游景点、医院、银行、飞机场（仅一处）。
处理好的数据后，可以使用Qgis链接PostGIS，把数据直接导入PostGIS中新建的chengdu数据库，得到八个数据表，结果如图2-1所示：图2-1 生成数据库示意图数据导入PostGIS之后就可以在Geoserver中发布了，发布的步骤如下：1.将geoserver.war发布到tomcat中，启动Tomcat，也即启动geoserver，从http://localhost:8080/geoserver中进入geoserver主界面。
GeoServer的默认用户名是“admin”，默认密码是“geoserver”，输入后点击提交即可登录GeoServer。
如图2-2所示：图2-2 GeoServer首页2．创建新的Feature数据集，如图2-3所示，在数据描述中选择PostGIS，数据集ID中填写本项目的数据库名字chengdu，单击新建按钮弹出Feature数据集编辑器页面，如图2-4所示。
图2-3 新建Feature数据集在Feature数据集编辑器页面Database、User、Password三个文本框中填入对应的内容，然后点击提交，这样就在Geoserver中新建了一个数据样式集，用来保存地图数据库中图层的样式。
图2-4 Feature数据集编辑器3．配置数据样式，本设计采用的UDig软件来渲染地图的样式，之后将生成的文件导出为.sld文件格式，在Goeserver的FeatrueType中新建图层样式。
图2-5 新建图层样式如图2-5所示，点击浏览按钮，打开UDig生成的图层样式文件，然后单击Upload按钮提交至Geoserver即可。
4．对Geoserver中相应的图层应用刚刚生成的SLD样式，空间应用系统选SRS，应用后即可以在Geoserver自带的样式图例中浏览生成的图层效果。
到此，完成了地图在geoserver中的发布。
2.2 地图服务制作本系统中的地图服务主要有WMS请求和WFS请求。
WMS主要是：允许以统一的方式访问存储在服务器上的feature并进行渲染；使用WMS可以完成两个工作:生成地图和简单的数据查询。
WFS主要是：WFS允许以统一的方式直接访问存储在服务器上的feature；使用WFS可以完成如下工作:查询dataset 并且解析出返回的features；查找feature的定义(feature的属性、名称和类型)；向dataset中添加feature；从dataset中删除feature；更新dataset 中的；锁定feature，禁止修改。
WFS 和WMS同时使用时的交互过程，如图2-6所示：基础datasets 1&2基础datasets 3&4用户图2-6 WFS与WMS同时使用交互过程示意图2.3 地图加载显示与基本操作本网站初始加载默认仅显示一张成都市基本的区县图，而其它图层，设计成选择项，浏览者可以根据自己的意愿添加自己感兴趣的图层，本系统还设计了一个鹰眼的功能，可以让浏览者快速知道自己的位置。
本系统的文件结构见图2-7与表2-1所示：表2-1 项目包及文件介绍地图的加载显示操作主要是在mapconfig.js里面实现。
主页是index.jsp，在页面刚打开时进行初始化。
代码如下所示：<BODY onLoad="init()">然后分别插入两个JSP页面，<jsp:include page="header.jsp"/><jsp:include page="mainBody.jsp"/>其中header.jsp主要完成Logo的显示和工具条的显示及调用mainBody.jsp 完成地图窗口的显示及操作。
这里的地图基本操作功能包括：放大、缩小、漫游、鹰眼。
这些功能都是通过Openlayers.js实现，只要将地图能在Geoserver里面发布出来，然后将Openlayers.js文件拷到工程中即可。
代码如下所示：var ovlayers = new yer.WMS( "",GLOBEL_URL+"/wms?", {layers: 'topp:quxian,topp:gaosugonglu', isSuitableOverview: function() {return true;}});var optionsOVMap = {layers: [ovlayers]};map.addControl(newOpenLayers.Control.OverviewMap(optionsOVMap));2.4 查询流程设计查询和标注功能需要对数据库进行查询和插入等操作，这几项操作能体现出MVC三个层次交互的过程。
下面我们以关键字查询为例介绍查询操作的请求响应流程：网站首页由jsp文件实现，当用户访问网站时，服务器端绘制完成网页发送到浏览器打开。
当用户单击表示关键字查询的图标时会触发js函数弹出查询对话框，此功能实在客户端实现。