ArcGIS_9.3_Javascript_API

这几天在学arcgis js开发,开发资料太少了,只能看文档,写了示例,作为参考!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Simple Map</title>
		<link rel="stylesheet" type="text/css"
			href="http://172.7.24.230/arcgis_js_api/library/2.6/jsapi/js/dojo/dijit/themes/tundra/tundra.css">
		<script type="text/javascript">        var djConfig = { parseOnLoad: true, url: "172.7.24.230" };</script>
		<script type="text/javascript"
			src="http://172.7.24.230/arcgis_js_api/library/2.6/jsapi/" charset="utf-8"></script>
		<script type="text/javascript">
		try{
			//dojo.require("dijit.layout.BorderContainer");
			//dojo.require("dijit.layout.ContentPane");
			dojo.require("esri.dijit.InfoWindow");
			dojo.require("esri.dijit.InfoWindow");
			dojo.require("esri.map"); //类似引入命名空间
			dojo.require("esri.tasks.query");//添加query任务
			dojo.require("esri.tasks.geometry");
			dojo.require("esri.toolbars.draw");
			}catch(e){
				alert("ARCGIS API加载失败!");
			}

		var myMap,geometryService,businessGraphicsLayer,queryTask,query;
		//初始化加载地图的方法
		function init() { 
			var startExtent = new esri.geometry.Extent(120.1044117860087,30.24444042330439, 120.25890702814839,30.347437251397523,esri.SpatialReference({wkid:32662})); 
			//构造函数esriMap(divId,options?),options?参数总结如下: nav:true/false 是否在地图边上显示 8 个方向移动的功能按钮。 slider:true/false 是否显示比例滚动条。 extent:Extent 设置地图控件的初始地图范围 var map = new esri.Map("map",{ nav:true,slider:true,extent:startExtent}); 
			//howInfoWindowOnClick:true/false 点击的时候是否显示infowindow。  displayGraphicsOnPan:true/false 设置地图上的图形在移动时是否显示,这个是对esri.toolbars.Draw画出来的图形的设置,默认为true,当需要提供浏览器的效率可以设置成false这样就不会消耗过多的cpu资源。

			myMap = new esri.Map("mapDiv",{ nav:true,slider:true,extent:startExtent,logo:false}); 
			//note that if you do not have public Internet access then you will need to point this url to your own locally accesible cached service. 
			//用于支持cache的Tile地图
			var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://172.7.24.230/ArcGIS/rest/services/MapServices/MapServer");
			var myDynMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://172.7.24.230/ArcGIS/rest/services/MapServices/MapServer");
			//把myTiledMapServiceLayer添加到地图控件中(ArcGISDynamicMapServiceLayer用于支持Dynamic地图)
			myMap.addLayer(myTiledMapServiceLayer); 
			myMap.addLayer(myDynMapServiceLayer);
			//自己添加的业务层,可以在此层上面添加各种元素
			businessGraphicsLayer = new esri.layers.GraphicsLayer();
			myMap.addLayer(businessGraphicsLayer);

			geometryService = new esri.tasks.GeometryService("http://172.7.24.230/ArcGIS/rest/services/Geometry/GeometryServer");//GeometryService服务
			//设置slider条的位置大小
			esriConfig.defaults.map.slider =  {left : "30px",top : "20px",width : null,height : "120px"};
			/*var lods = Layer.tileInfo.lods;
			//记录各级比例信息
			 for (var i=0, il=lods.length; i<il; i++)
			 {
				  labels[i] = lods[i].scale;
			 }*/
			esriConfig.defaults.map.sliderLabel = 
			{
				  tick: 2,//横刻度线大小
				  labels: "",//显示信息
				  //slider条信息文字样式设置,字体、字大小、字颜色、字离左边的距离
				  style: "width:2em; font-family:Verdana; font-size:12px; color:#fff; padding-left:2px;"
			};
			//分别设置地图放大缩小的持续时间和刷新时间设置
			esriConfig.defaults.map.zoomDuration = 1000;//默认250
			esriConfig.defaults.map.zoomRate = 50;//默认25
			//分别设置地图移动的持续时间和刷新时间设置
			esriConfig.defaults.map.panDuration = 10000;//默认250
			esriConfig.defaults.map.panRate  = 50;//默认25
			


			//esriConfig.defaults.map.sliderLabel = null;设置不显示sliderLabel 

			//ToolBar功能按钮 esri.toolbars.Navigation(map)
			navToolbar = new esri.toolbars.Navigation(myMap);
			draToolbar = new esri.toolbars.Draw(myMap);
			dojo.connect(draToolbar,"onDrawEnd",doDraw);//绘制完成后调用doDraw

			dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);//为Navigation绑定事件监听

			//给地图控件添加视图变化监听事件
			dojo.connect(myMap,"onExtentChange",showExtent);
			//给地图控件添加载入完成(onload)监听事件
			//在onload监听事件里在去添加对鼠标移动和拖拽的监听了
			dojo.connect(myMap,"onLoad",function(){
				//给地图控件添加鼠标移动监听事件
				dojo.connect(myMap,"onMouseMove",showCoordinates);
				//给地图控件添加鼠标拖拽监听事件
				dojo.connect(myMap,"onMouseDrag",showCoordinates);
			});

			//获取元素信息窗口
			dojo.connect(businessGraphicsLayer, "onClick", addPoint);
			//businessGraphicsLayer右键处理(删除)
			dojo.connect(businessGraphicsLayer, "onMouseDown", removePoint);

			dojo.connect(businessGraphicsLayer,"onMouseDrag",changePoint);
		}
		//画图
		function doDraw(geometry){
			//根据图形的类型定义显示样式
			switch(geometry.type){
				case "point":
					//var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0]),1),new dojo.Color([0,255,0,0.25]));
					var symbol = new esri.symbol.PictureMarkerSymbol('E:/地图/部署/images/crossing-alarm.png', 25, 40);//esri.symbol.PictureMarkerSymbol(url, width, height)
					break;
				case "line":
					var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new new dojo.Color([255,0,0]),1);
					break;
				case "polygon":
					var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0,0,0]),1), new dojo.Color([255,0,0,0.25]));
					break;
			}
			//把绘制的图形添加到businessGraphicsLayer上显示
			var graphic = new esri.Graphic(geometry,symbol);
			//myMap.graphics.clear();//清除上次画的内容
			businessGraphicsLayer.add(graphic);//myMap.graphics.add(graphic);
		}
		//显示地图范围
		function showExtent(extent)
		{
			var s="地图范围:<br/>XMin:"+extent.xmin+"<br/>YMin:"+extent.ymin+"<br/>XMax:"+extent.xmax+"<br/>YMax:"+extent.ymax;
			dojo.byId("info").innerHTML=s;
		}
		//显示鼠标坐标
		function showCoordinates(event){
			var mp=event.mapPoint;
			var mp2=event.screenPoint;
			dojo.byId("info2").innerHTML="地理坐标:"+mp.x+","+mp.y+"<br/>屏幕坐标:"+mp2.x+","+mp2.y;
		}
		//地图范围变化的事件
		  function extentHistoryChangeHandler(){
			document.getElementById("preview").disabled=navToolbar.isFirstExtent();//前一视图按钮不可用
			document.getElementById("nextview").disabled=navToolbar.isLastExtent();//后一视图按钮不可用
		  }
		  //绘制图形控制函数按钮相应事件
		  function Draw(type){
			switch(type){
			  case "showzoom":{//漫游
				  draToolbar.deactivate();
				  navToolbar.deactivate();
				  myMap.showZoomSlider();
				  break;
			  }
			  case "point":{//画点
				  draToolbar.activate(esri.toolbars.Draw.POINT);
				  myMap.hideZoomSlider();
				  break;
			  }
			  case "line":{//画线
				  draToolbar.activate(esri.toolbars.Draw.LINE);
				  myMap.hideZoomSlider();
				  break;
			  }
			  case "polygon":{//画面
				  draToolbar.activate(esri.toolbars.Draw.POLYGON);
				  myMap.hideZoomSlider();
				  break;
			  }
			}
		}
		//地图浏览控制函数,按钮相应事件
      function Navigation(tool){
		  switch(tool){
			  case "zoomin":{//放大
				  navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
				  break;
			  }
			  case "zoomout":{//缩小 
				  navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
				  break;
			  }
			  case "pan":{//平移
				  navToolbar.activate(esri.toolbars.Navigation.PAN);
				  break;
			  }
			  case "preview":{//上一视图
				 navToolbar.zoomToPrevExtent(); 
				 break;
			  }	
			  case "nextview":{//下一视图
				  navToolbar.zoomToNextExtent();
				  break;
			  }
			  case "fullextent":{//全图显示
				  navToolbar.zoomToFullExtent();
				  break;
			  }
		  }
		}
		//弹窗
		function addPoint(evt) { 
			myMap.infoWindow.resize(200,100);//设置窗口大小
			myMap.infoWindow.setTitle("Coordinates"); //设置窗口标题
			//Need to convert the coordinates from the map's spatial reference (web mercator) to geographic to display lat/lon values 
			var geoPt = esri.geometry.webMercatorToGeographic(evt.mapPoint); 
			myMap.infoWindow.setContent("lat/lon : " + geoPt.y.toFixed(2) + ", " + geoPt.x.toFixed(2) + 
			  "<br />screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y); 
			myMap.infoWindow.show(evt.mapPoint,myMap.getInfoWindowAnchor(evt.screenPoint)); //为获取系统建议的显示位置
      } 
	  //删除点
		function removePoint(evt){
			if(evt.button==2){//检查其event.button的值是不是2(代表右键)。
				businessGraphicsLayer.remove(evt.graphic);
			}
		}
		//拖拽改变点的位置
		function changePoint(evt){
			//alert(evt.x+","+evt.y);
		}
		//用dojo的addOnload方法初始化地图
		dojo.addOnLoad(init); 
		</script>
	</head>
	<body class="tundra">
	<table>
		<tr>
			<td>
				<div id="mapDiv"style="width: 1200px; height: 800px; border: 1px solid #000;"></div>
			</td>
			<td valign="top">
				<div id="info"></div><div id="info2""></div>
			</td>
		</tr>
		</table>
		<input id="showzoom" type="button" value="漫游" onclick="Draw(this.id)"/>
		<input id="point" type="button" value="画点" onclick="Draw(this.id)"/>
		<input id="line" type="button" value="画线" onclick="Draw(this.id)"/>
		<input id="polygon" type="button" value="画面" onclick="Draw(this.id)"/>
		<input id="zoomin" type="button" value="放大" onclick="Navigation(this.id)"/>
         <input id="zoomout" type="button" value="缩小" onclick="Navigation(this.id)"/>
         <input id="pan" type="button" value="平移" onclick="Navigation(this.id)"/>
         <input id="preview" type="button" value="上一视图" onclick="Navigation(this.id)"/>
         <input id="nextview" type="button" value="下一视图" onclick="Navigation(this.id)"/>
         <input id="fullextent" type="button" value="全图" onclick="Navigation(this.id)"/>
	</body>
</html>

你可能感兴趣的:(JavaScript,function,input,button,图形,stylesheet)