上海海洋大学_WebGIS原理与方法_期末作业.doc

上海海洋大学 “WebGIS原理与方法”课程报告WebGIS原理与方法课程报告 小组组长： 褚佳琪 小组组员： 安大略 2013 年 4 月 29 日目录1.课程内容介绍11.1 WebGIS的定义11.2 WebGIS的特点12.课程设计思路22.1、系统功能分析22.2、设计实践方法23.课程实践部分23.1、坐标显示23.2、加载提示33.3、导航工具栏43.4、画图工具栏63.5、查询功能84.小结105.参考文献101.课程内容介绍1.1 WebGIS的定义WebGIS是GIS 与万维网的有机结合，是GIS在广域网环境下的一种应用，最终目标是实现空间信息网络化。GIS通过万维网使功能得到了扩展(实际是互为扩展)，真正成为一种大众使用的信息工具，从万维网的任意一个节点，人们可以浏览万维网上的各种分布式的、具有超媒体特性的地理空间数据及属性数据，进行地理空间分析、查询，以支持智能辅助决策。通过对空间信息网络化和超媒体技术的集成，WebGIS提供给用户的信息不仅仅是矢量化的空间信息，还有遥感影像、动态视频、文字说明等多种信息。1.2 WebGIS的特点与传统的地理信息系统比较，万维网地理信息系统它具有四个特点：A更广泛的客户访问范围 客户可以同时访问多个位于不同地方的服务器上的最新数据，而这一Internet/Intranet所特有的优势大大扩展了GIS的数据管理能力，增强了对空间数据管理的时效性。B客户端平台独立性 无论客户机是何种操作系统，只要支持通用的Web浏览器，用户就可以访问WebGIS数据。C更简单的操作 要推广GIS，使GIS系统为广大的普通用户所接受，而不仅仅局限于少数受过专业培训的专业用户，就要降低对系统的操作难度。通用的Web浏览器无疑是降低操作复杂度的最好选择。D平衡高效的计算负载 传统的GIS大都使用文件服务器结构的处理方式，其处理能力完全依赖于客户端,，效率较低。而当今一些高级的WebGIS能充分利用网络资源,将复杂的处理交由服务器执行,，而对简单的操作则由客户端直接完成。这种计算模式能灵活在服务器端和客户端之间合理分配处理任务，从而提高网络计算资源的利用效率。2.课程设计思路2.1、系统功能分析“上海海洋大学地理信息系统”把校园内的图形、属性结合在一起，在可视环境下解决与校园空间信息有关的信息查询、空间规划、信息管理等实际问题，从而便于全校师生以及家长查询、检索所需信息，更为各级领导对校园进行可视化的管理、分析与决策带来了极大的方便。“上海海洋大学地理信息系统”实现的主要功能如下：(1)各种图形数据查询。为用户提供校园内的空间信息查询，主要为各建筑物、各办公室和各部门等信息查询。(2)一般电子地图功能：包括缩放、自由缩放、漫游、全图显示(3) 各种图形数据显示与输出(4)常用网站链接。方便同学进入常用校内网站查询(5)问题反馈。收集各用户在使用过程中的意见或建议。2.2、设计实践方法(1) 先运用在w3school上学到的网页建设基础，架设网页框架。(2) 在ESRI官方教学网页上学习并利用Javascript API创建WebGIS应用(3) 完善网页css样式，美化布局3.课程实践部分3.1、坐标显示功能介绍：此功能用于报告当前用户鼠标悬停的位置和当前位置的地理坐标。地图下方的信息栏会显示鼠标所在的位置的地理坐标和屏幕坐标。关键代码：dojo.connect(map, onLoad, function() dojo.connect(map, onMouseMove, showCoordinates); dojo.connect(map, onMouseDrag, showCoordinates); );function showCoordinates(evt) var geoPt = esri.geometry.webMercatorToGeographic(evt.mapPoint); dojo.byId(infoDiv).innerHTML = 地理坐标: + geoPt.y.toFixed(3) + , + geoPt.x.toFixed(3) + 屏幕坐标 x/y : + evt.screenPoint.x + , + evt.screenPoint.y; 效果截图：3.2、加载提示功能介绍：此功能用于加载、更新地图时的提示，加载、更新地图时，在地图的右上角会有“加载中”的字样出现。关键代码： #mapDiv border: 1px solid #666; #status background-color: black; color: white; padding: 3px; border: solid 3px white; border-radius: 5px; dojo.connect(map, onUpdateStart, function() esri.show(dojo.byId(status); ); dojo.connect(map, onUpdateEnd, function() esri.hide(dojo.byId(status); ); 加载中. 效果截图：3.3、导航工具栏功能介绍：这是基于ArcGIS JavaScript API创建的平移、缩放导航工具栏，支持对地图的放大、缩小、全屏显示、后退、前进、平移等操作。关键代码： import /jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css; .zoominIcon background-image:url(images/nav_zoomin.png); width:16px; height:16px; .zoomoutIcon background-image:url(images/nav_zoomout.png); width:16px; height:16px; .zoomfullextIcon background-image:url(images/nav_fullextent.png); width:16px; height:16px; .zoomprevIcon background-image:url(images/nav_previous.png); width:16px; height:16px; .zoomnextIcon background-image:url(images/nav_next.png); width:16px; height:16px; .panIcon background-image:url(images/nav_pan.png); width:16px; height:16px; .deactivateIcon background-image:url(images/nav_decline.png); width:16px; height:16px; var dojoConfig = parseOnLoad:true ;dojo.require(esri.toolbars.navigation); dojo.require(dijit.form.Button); dojo.require(dijit.Toolbar);function init() map = new esri.Map(mapDiv);myDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(http:/localhost:6080/arcgis/rest/services/shou/MapServer);map.addLayer(myDynamicMapServiceLayer);navToolbar = new esri.toolbars.Navigation(map); dojo.connect(navToolbar, onExtentHistoryChange, extentHistoryChangeHandler); function extentHistoryChangeHandler() dijit.byId(zoomprev).disabled = navToolbar.isFirstExtent(); dijit.byId(zoomnext).disabled = navToolbar.isLastExtent(); 放大 缩小 全屏 后退 前进 平移 去除效果效果截图：3.4、画图工具栏功能介绍：此功能用于在地图上选取任意图形。画图工具栏里提供了多种画图方式，供用户对不同图形的需求。在今后的扩展功能中，以利用本工具栏对地图属性信息查询。关键代码：var dojoConfig = parseOnLoad: true ; dojo.require(esri.toolbars.draw); dojo.require(dijit.layout.BorderContainer); dojo.require(dijit.layout.ContentPane);function init() map = new esri.Map(map);myDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(http:/localhost:6080/arcgis/rest/services/shou/MapServer);map.addLayer(myDynamicMapServiceLayer);dojo.connect(map, onLoad, createToolbar); function createToolbar(themap) toolbar = new esri.toolbars.Draw(map); dojo.connect(toolbar, onDrawEnd, addToMap); function addToMap(geometry) toolbar.deactivate(); map.showZoomSlider(); switch (geometry.type) case point: var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color(255, 0, 0), 1), new dojo.Color(0, 255, 0, 0.25); break; case polyline: var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color(255, 0, 0), 1); break; case polygon: var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color(255, 0, 0), 2), new dojo.Color(255, 255, 0, 0.25); break; case extent: var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color(255, 0, 0), 2), new dojo.Color(255, 255, 0, 0.25); break; case multipoint: var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color(0, 0, 0), 1), new dojo.Color(255, 255, 0, 0.5); break; var graphic = new esri.Graphic(geometry, symbol); map.graphics.add(graphic); 画图工具: 单点 多点 直线 折线 多边形 手绘折线 手绘多边形 箭头 三角形 圆形 椭圆 效果截图：3.5、查询功能功能介绍：这是一个提供用户查询图形属性信息的功能。I当用户第一次点击鼠标时，被点击的图形被突出；II第二次单击鼠标捕获默认情况下，当用户点击高亮显示的图形。显示出该图形与信息属性相对应的信息窗口。关键代码：function init() map = new esri.Map(mapDiv); var layer = new esri.layers.ArcGISDynamicMapServiceLayer(/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer); map.addLayer(layer); dojo.connect(map, onClick, executeQueryTask); queryTask = new esri.tasks.QueryTask(/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1); query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = STATE_NAME, STATE_FIPS, STATE_ABBR, AREA; infoTemplate = new esri.InfoTemplate($STATE_NAME, 州编号: $STATE_FIPS缩写: $STATE_ABBR面积: $AREA); symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color(255,0,0), 2), new dojo.Color(255,255,0,0.5); function executeQueryTask(evt) query.geometry = evt.mapPoint; queryTask.execute(query, showResul