WebGIS课程实习
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
一.课程目的:
通过本次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.设置比例尺:
四.关键代码:
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");//为了使用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 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 + "
" + "纬度:" + mappoint.y);