WebGIS课程实习.doc

1 课程目的： 通过本次WebGIS课程实习，了解一些网页设计的基础知识，学会加载地图并显示地图范围，同时在地图上显示相应的信息，最后通过对地图的一些基本的操作来实现相应的功能。2 课程要求： 1.加入地图并显示当前地图范围； 2.在地图单击，以信息窗口的形式显示单击处的地理坐标； 3.设置导航工具栏（拉框放大，拉框缩小，全图范围，前一视图，后一视图， 平移地图，取消操作）； 4.设置绘图工具条（Point，MutiPoint，Line，Polyline，Freehand Polyline， Polygon，Freehand Polygon)； 5.设置比例尺；3 课程具体步骤与结果展示： 1、首先通过HTML对整个网页进行布局。 如上图所示，最顶层是课程名称，左侧是工具栏，右侧是地图显示区，最后一层是版权要求。2、加入地图并显示当前地图范围并且设置导航栏 3、在地图单击，以信息窗口的形式显示单击处的地理坐标； 4.设置绘图工具条（Point，MutiPoint，Line，Polyline，Freehand Polyline， Polygon，Freehand Polygon)；5. 设置比例尺：4 关键代码： WebGIS课程设计/网页标题/网页布局div#containerwidth:1350px div#header background-color:#99bbbb;height:50px;text-align:center; div#menu background-color:#ffff99; height:450px; width:375px; float:left; div#map background-color:#EEEEEE; height:450px; width:975px; float:left; div#footer background-color:#99bbbb;height:50px; clear:both; text-align:center; h1 margin-bottom:0; h2 margin-bottom:0; font-size:14px; ul margin:0; li list-style:none; var dojoConfig = parseOnLoad: true ; /使用 djConfig=parseOnLoad:true来指定在页面加载完成后确定执行解析功能 dojo.require(esri.map); /将资源导入到JavaScript页面中 dojo.require(esri.toolbars.navigation); /将资源导入到JavaScript页面中 dojo.require(dijit.form.Button); /将资源导入到JavaScript页面中 dojo.require(dijit.Toolbar); /将资源导入到JavaScript页面中 dojo.require(esri.layers.agstiled);/为了使用ArcGISTiledMapServiceLayer dojo.require(esri.dijit.Scalebar);/引入比例尺资源 dojo.require(esri.toolbars.draw); /draw是工具类，它支持通过画点线面生成新的几何形状的功能 var map, navToolbar,tp; var hander; function init() esriConfig.defaults.map.sliderLabel = null; /不显示地图的比例尺的刻度线 map = new esri.Map(map); /新建地图对象 map为地图容器的ID dojo.connect(map, onLoad, initToolbar);/地图载入就调用函数initToolbar map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(http:/ /ArcGIS/rest/services/ESRI_StreetMap_World_2D /MapServer); /向地图中添加图层 dojo.connect(map, onLoad, function () hander=dojo.connect(map, onClick, showCoordinates); /注册地图的单击事件 ); navToolbar = new esri.toolbars.Navigation(map); /新建地图工具栏 dojo.connect(navToolbar, onExtentHistoryChange, extentHistoryChangeHandler); /注册一个事件监听器 dojo.connect(map, onLoad, function() var scalebar = new esri.dijit.Scalebar( map: map, scalebarUnit: metric / 指定比例尺单位,有效值是english or metric.默认english表示mile,而 metric表示公里km , dojo.byId(scalebar); ); function showCoordinates(evt) var mappoint = evt.mapPoint; /设置信息窗口标题 Window.setTitle(地理坐标); /设置信息窗口内容 Window.setContent(经度： + mappoint.x + + 纬度： + mappoint.y); /设置信息窗口大小 Window.resize(240, 80); /显示地理坐标 Window.show(map.toScreen(mappoint), map.getInfoWindowAnchor(map.toScreen(mappoint); function extentHistoryChangeHandler() dijit.byId(zoomprev).disabled = navToolbar.isFirstExtent(); dijit.byId(zoomnext).disabled = navToolbar.isLastExtent(); function initToolbar(map) tb = new esri.toolbars.Draw(map);/添加toolbar用于map画图 dojo.connect(tb, onDrawEnd, addGraphic);/画图完成后调用addGraphic函数 function addGraphic(geometry) var symbol = dojo.byId(symbol).value;/取得下拉列表中用户的选择项 if (symbol) symbol = eval(symbol); /如果用户已选择，则将其所选作为symbol else var type = geometry.type; if (type = point | type = multipoint) symbol = tb.markerSymbol;/标记符号 else if (type = line | type = polyline) symbol = tb.lineSymbol;/线段符号 else symbol = tb.fillSymbol;/填充符号 map.graphics.add(new esri.Graphic(geometry, symbol);/添加图形 dojo.addOnLoad(init); /在页面完成加载时注册一个初始化函数 WebGIS课程设计 导航 拉框放大 拉框缩小全图范围前一视图后一视图平移地图取消操作 绘图PointMultipointExtentPolylineFreehand PolylinePolygonFreehand PolygonLineDeactivate- Select Symbol - Simple Marker Symbols -Default 比例尺 版权所有 盗版必究五课程总结： 通过对本次WebGIS课程设计的学习，我了解