地图显示与基本操作(放大、缩小、移动、坐标显示)是Javascript API的基本功能,也是一个WebGIS应用的基本内容,Javascript提供了非常便捷的开发方法,当然在线浏览需要Ags服务器支持,如果自己电脑上没有配置Server服务,可以使用ArcGIS Online在线服务。
内容目录:
1.Cache和非Cache地图展示
2.地图基本操作,如放大、缩小、移动,并和鼠标键盘按键关联
3.客户端显示鼠标当前地理位置
直接使用在线地图查看最终效果:
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Map/AddMapShowXYCoords.html
使用过Dojo的开发人员应该很熟悉整个页面结构:
1.使用dojo提供的样式表
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css";
</style>
2.引用脚本文件
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1">
</script>
这里可能会有一个疑问,为什么是这样的目录结构,里面包含了dojo和javascript api所需要的js库吗?其实部署javascript api时,针对不同类型服务器端代码(Java、.Net、php)会有不同的Default页面,以.Net为例,Default.ashx引用了三个文件:
context.Response.WriteFile(context.Server.MapPath("js""esri""esri.js"));
context.Response.WriteFile(context.Server.MapPath("js""dojo""dojo""dojo.xd.js"));
context.Response.WriteFile(context.Server.MapPath("js""esri""jsapi.js"));
3.接下来,就要对页面中所添加的地图元素与功能进行定制,同样是在脚本中完成,使用javascript api
<script type="text/javascript">
dojo.require("esri.map");
var myMap, myTiledMapServiceLayer;
function init() {
myMap = new esri.Map("mapDiv");
myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
dojo.require引入所需的包,其中的esri.Map类实现了图层、Graphics、消息窗口(查询属 性)、其他导航控制的方法,这里在指定的div中创建了一个地图。esri.layers.ArcGISTiledMapServiceLayer的作用 是获取REST API所提供的cache地图服务,这是一个在线服务,REST所能提供的其他服务可以查看REST API文档。esri.layers.ArcGISTiledMapServiceLayer继承于 esri.layers.ArcGISMapServiceLayer,该父类下还有另外一个子类 ArcGISDynamicMapServiceLayer,用于获取非cache地图服务。
最后通过esri.Map的addLayer方法将该服务中的图层添加到当前地图中显示。
dojo.addOnLoad(init)等价于<body onload=init>,页面加载的时候将执行init()脚本。
4.页面body区域