WebGIS课程实习

一．课程目的：通过本次WebGIS课程实习，了解一些网页设计的基础知识，学会加载地图并显示地图范围，同时在地图上显示相应的信息，最后通过对地图的一些基本的操作来实现相应的功能。二．课程要求：1.加入地图并显示当前地图范围；2.在地图单击，以信息窗口的形式显示单击处的地理坐标；3.设置导航工具栏（拉框放大，拉框缩小，全图范围，前一视图，后一视图，平移地图，取消操作）；4.设置绘图工具条（Point，MutiPoint，Line，Polyline，FreehandPolyline，Polygon，FreehandPolygon)；5.设置比例尺；三．课程具体步骤与结果展示：1、首先通过HTML对整个网页进行布局。如上图所示，最顶层是课程名称，左侧是工具栏，右侧是地图显示区，最后一层是版权要求。2、加入地图并显示当前地图范围并且设置导航栏3、在地图单击，以信息窗口的形式显示单击处的地理坐标；4.设置绘图工具条（Point，MutiPoint，Line，Polyline，FreehandPolyline，Polygon，FreehandPolygon)；5.设置比例尺：四．关键代码：!DOCTYPEHTMLhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=X-UA-Compatiblecontent=IE=7/titleWebGIS课程设计/title//网页标题styletype=text/css//网页布局div#container{width: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;}/stylescriptvardojoConfig={parseOnLoad:true};//使用djConfig=parseOnLoad:true来指定在页面加载完成后确定执行解析功能/scriptscriptsrc==stylesheethref==stylesheethref=(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);//为了使用ArcGISTiledMapServiceLayerdojo.require(esri.dijit.Scalebar);//引入比例尺资源dojo.require(esri.toolbars.draw);//draw是工具类，它支持通过画点线面生成新的几何形状的功能varmap,navToolbar,tp;varhander;functioninit(){esriConfig.defaults.map.sliderLabel=null;//不显示地图的比例尺的刻度线map=newesri.Map(map);//新建地图对象map为地图容器的IDdojo.connect(map,onLoad,initToolbar);//地图载入就调用函数initToolbarmap.addLayer(newesri.layers.ArcGISTiledMapServiceLayer());//向地图中添加图层dojo.connect(map,onLoad,function(){hander=dojo.connect(map,onClick,showCoordinates);//注册地图的单击事件});navToolbar=newesri.toolbars.Navigation(map);//新建地图工具栏dojo.connect(navToolbar,onExtentHistoryChange,extentHistoryChangeHandler);//注册一个事件监听器dojo.connect(map,onLoad,function(){varscalebar=newesri.dijit.Scalebar({map:map,scalebarUnit:metric//指定比例尺单位,有效值是englishormetric.默认english表示mile,而metric表示公里km},dojo.byId(scalebar));});}functionshowCoordinates(evt){varmappoint=evt.mapPoint;//设置信息窗口标题map.infoWindow.setTitle(地理坐标);//设置信息窗口内容map.infoWindow.setContent(经度：+mappoint.x+br/+纬度：+mappoint.y);//设置信息窗口大小map.infoWindow.resize(240,80);//显示地理坐标map.infoWindow.show(map.toScreen(mappoint),map.getInfoWindowAnchor(map.toScreen(mappoint)));}functionextentHistoryChangeHandler(){dijit.byId(zoomprev).disabled=navToolbar.isFirstExtent();dijit.byId(zoomnext).disabled=navToolbar.isLastExtent();}functioninitToolbar(map){tb=newesri.toolbars.Draw(map);//添加toolbar用于map画图dojo.connect(tb,onDrawEnd,addGraphic);//画图完成后调用addGraphic函数}functionaddGraphic(geometry){varsymbol=dojo.byId(symbol).value;//取得下拉列表中用户的选择项if(symbol){symbol=eval(symbol);}//如果用户已选择，则将其所选作为symbolelse{vartype=geometry.type;if(type===point||type===multipoint){symbol=tb.markerSymbol;//标记符号}elseif(type===line||type===polyline){symbol=tb.lineSymbol;//线段符号}else{symbol=tb.fillSymbol;//填充符号}}map.graphics.add(newesri.Graphic(geometry,symbol));//添加图形}dojo.addOnLoad(init);//在页面完成加载时注册一个初始化函数/script/headdivid=containerdivid=headerh1WebGIS课程设计/h1/divdivid=menulih2导航/h2divdojotype=dijit.form.Buttonid=zoominiconclass=zoominIcononclick=navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);拉框放大/divdivdojotype=dijit.form.Buttonid=zoomouticonclass=zoomoutIcononclick=navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);拉框缩小/divdivdojotype=dijit.form.Buttonid=zoomfullexticonclass=zoomfullextIcononclick=navToolbar.zoomToFullExtent();全图范围/divdivdojotype=dijit.form.Buttonid=zoompreviconclass=zoomprevIcononclick=navToolbar.zoomToPrevExtent();前一视图/divdivdojotype=dijit.form.Buttonid=zoomnexticonclass=zoomnextIcononclick=navToolbar.zoomToNextExtent();后一视图/divdivdojotype=dijit.form.Buttonid=paniconclass=panIcononclick=navToolbar.activate(esri.toolbars.Navigation.PAN);平移地图/divdivdojotype=dijit.form.Buttonid=deactivateiconclass=deactivateIcononclick=navToolbar.deactivate()取消操作/div/lilih2绘图/h2buttononclick=tb.activate(esri.toolbars.Draw.POINT);dojo.disconnect(hander);Point/button!--点击Point按钮将激活draw工具类的绘点功能--buttononclick=tb.activate(esri.toolbars.Draw.MULTI_POINT);Multipoint/buttonbuttononclick=tb.activate(esri.toolbars.Draw.EXTENT);Extent/buttonbuttononclick=tb.activate(esri.toolbars.Draw.POLYLINE);Polyline/buttonbuttononclick=tb.activate(esri.toolbars.Dra