当前位置：文档之家› WebGIS课程实习

WebGIS课程实习

一．课程目的：通过本次WebGIS课程实习，了解一些网页设计的基础知识，学会加载地图并显示地图范围，同时在地图上显示相应的信息，最后通过对地图的一些基本的操作来实现相应的功能。

二．课程要求：1.加入地图并显示当前地图范围；2.在地图单击，以信息窗口的形式显示单击处的地理坐标；3.设置导航工具栏（拉框放大，拉框缩小，全图范围，前一视图，后一视图，平移地图，取消操作）；4.设置绘图工具条（Point，MutiPoint，Line，Polyline，Freehand Polyline，Polygon，Freehand Polygon)；5.设置比例尺；三．课程具体步骤与结果展示：1、首先通过HTML对整个网页进行布局。

如上图所示，最顶层是课程名称，左侧是工具栏，右侧是地图显示区，最后一层是版权要求。

2、加入地图并显示当前地图范围并且设置导航栏3、在地图单击，以信息窗口的形式显示单击处的地理坐标；4.设置绘图工具条（Point，MutiPoint，Line，Polyline，Freehand Polyline，Polygon，Freehand Polygon)；5.设置比例尺：四．关键代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>WebGIS课程设计</title>//网页标题<style type="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;}</style><script>var dojoConfig = { parseOnLoad: true };//使用djConfig="parseOnLoad:true"来指定在页面加载完成后确定执行解析功能</script><script src="/jsapi/arcgis/3.5/"></script><link rel="stylesheet" href="/jsapi/arcgis/3.5/js/dojo/dijit/themes/tundra/tundra.css" /><link rel="stylesheet" href="/jsapi/arcgis/3.5/js/esri/css/esri.css"><script>dojo.require("esri.map"); //将资源导入到JavaScript页面中dojo.require("esri.toolbars.navigation"); //将资源导入到JavaScript页面中dojo.require("dijit.form.Button"); //将资源导入到JavaScript页面中dojo.require("dijit.Toolbar"); //将资源导入到JavaScript页面中dojo.require("yers.agstiled");//为了使用ArcGISTiledMapServiceLayerdojo.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"为地图容器的IDdojo.connect(map, "onLoad", initToolbar);//地图载入就调用函数initToolbarmap.addLayer(new yers.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 + "<br/>" + "纬度：" + 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);}//如果用户已选择，则将其所选作为symbolelse {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); //在页面完成加载时注册一个初始化函数</script></head><div id="container"><div id="header"><h1>WebGIS课程设计</h1></div><div id="menu"><li><h2>导航</h2><div dojotype="dijit.form.Button" id="zoomin" iconclass="zoominIcon"onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">拉框放大</div> <div dojotype="dijit.form.Button" id="zoomout" iconclass="zoomoutIcon"onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);"> 拉框缩小</div> <div dojotype="dijit.form.Button" id="zoomfullext" iconclass="zoomfullextIcon" onclick="navToolbar.zoomToFullExtent();">全图范围</div><div dojotype="dijit.form.Button" id="zoomprev" iconclass="zoomprevIcon"onclick="navToolbar.zoomToPrevExtent();">前一视图</div><div dojotype="dijit.form.Button" id="zoomnext" iconclass="zoomnextIcon"onclick="navToolbar.zoomToNextExtent();">后一视图</div><div dojotype="dijit.form.Button" id="pan" iconclass="panIcon"onclick="navToolbar.activate(esri.toolbars.Navigation.PAN);">平移地图</div><div dojotype="dijit.form.Button" id="deactivate" iconclass="deactivateIcon"onclick="navToolbar.deactivate()">取消操作</div></li><li><h2>绘图</h2><button onclick="tb.activate(esri.toolbars.Draw.POINT);dojo.disconnect(hander);"> Point</button><button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button><button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button><button onclick="tb.activate(esri.toolbars.Draw.POL YLINE);">Polyline</button><button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POL YLINE);"> Freehand Polyline</button><button onclick="tb.activate(esri.toolbars.Draw.POL YGON);">Polygon</button><button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POL YGON);"> Freehand Polygon</button><button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button><button onclick="tb.deactivate()">Deactivate</button><select id="symbol"><option value="">--- Select Symbol ---</option><option value="">--- Simple Marker Symbols ---</option><option value="new esri.symbol.SimpleMarkerSymbol();">Default</option></select></li><li><h2>比例尺</h2><div id="scalebar" style="position:absolute;"></div></li></div><div id="map"></div><div id="footer">版权所有盗版必究</div></div></body></html>五．课程总结：通过对本次WebGIS课程设计的学习，我了解了HTML，Javascript等标记语言的基本语法，以及对网页的基本布局，与此同时我对ESRI等的API有了初步的认识，我发现我们可以通过使用别人做好的组件来简化我们的开发过程，大大减轻我们的编程负担。

e商务文档

WebGIS课程实习

相关文档推荐：