一.课程目的:
通过本次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("https://www.wendangku.net/doc/363870935.html,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 https://www.wendangku.net/doc/363870935.html,yers.ArcGISTiledMapServiceLayer("http://
https://www.wendangku.net/doc/363870935.html,/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;
//设置信息窗口标题
https://www.wendangku.net/doc/363870935.html,Window.setTitle("地理坐标");
//设置信息窗口内容
https://www.wendangku.net/doc/363870935.html,Window.setContent("经度:" + mappoint.x + "
" + "纬度:" + mappoint.y);
//设置信息窗口大小
https://www.wendangku.net/doc/363870935.html,Window.resize(240, 80);
//显示地理坐标
https://www.wendangku.net/doc/363870935.html,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); //在页面完成加载时注册一个初始化函数