首页 > 代码库 > ArcGIS_9.3_Javascript_API

ArcGIS_9.3_Javascript_API

2024-07-12 08:27:28   243人阅读

这几天在学arcgis js开发，开发资料太少了，只能看文档，写了示例，作为参考！  
 
[html] view plaincopyprint?
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>Simple Map</title>  
  6.         <link rel="stylesheet" type="text/css"  
  7.             href=http://www.mamicode.com/"http://172.7.24.230/arcgis_js_api/library/2.6/jsapi/js/dojo/dijit/themes/tundra/tundra.css">  
  8.         <script type="text/javascript">        var djConfig = { parseOnLoad: true, url: "172.7.24.230" };</script>  
  9.         <script type="text/javascript"  
  10.             src=http://www.mamicode.com/"http://172.7.24.230/arcgis_js_api/library/2.6/jsapi/" charset="utf-8"></script>  
  11.         <script type="text/javascript">  
  12.         try{  
  13.             //dojo.require("dijit.layout.BorderContainer");  
  14.             //dojo.require("dijit.layout.ContentPane");  
  15.             dojo.require("esri.dijit.InfoWindow");  
  16.             dojo.require("esri.dijit.InfoWindow");  
  17.             dojo.require("esri.map"); //类似引入命名空间  
  18.             dojo.require("esri.tasks.query");//添加query任务  
  19.             dojo.require("esri.tasks.geometry");  
  20.             dojo.require("esri.toolbars.draw");  
  21.             }catch(e){  
  22.                 alert("ARCGIS API加载失败！");  
  23.             }  
  24.   
  25.         var myMap,geometryService,businessGraphicsLayer,queryTask,query;  
  26.         //初始化加载地图的方法  
  27.         function init() {   
  28.             var startExtent = new esri.geometry.Extent(120.1044117860087,30.24444042330439, 120.25890702814839,30.347437251397523,esri.SpatialReference({wkid:32662}));   
  29.             //构造函数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});   
  30.             //howInfoWindowOnClick：true/false 点击的时候是否显示infowindow。  displayGraphicsOnPan:true/false 设置地图上的图形在移动时是否显示，这个是对esri.toolbars.Draw画出来的图形的设置，默认为true，当需要提供浏览器的效率可以设置成false这样就不会消耗过多的cpu资源。  
  31.   
  32.             myMap = new esri.Map("mapDiv",{ nav:true,slider:true,extent:startExtent,logo:false});   
  33.             //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.   
  34.             //用于支持cache的Tile地图  
  35.             var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://172.7.24.230/ArcGIS/rest/services/MapServices/MapServer");  
  36.             var myDynMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://172.7.24.230/ArcGIS/rest/services/MapServices/MapServer");  
  37.             //把myTiledMapServiceLayer添加到地图控件中（ArcGISDynamicMapServiceLayer用于支持Dynamic地图）  
  38.             myMap.addLayer(myTiledMapServiceLayer);   
  39.             myMap.addLayer(myDynMapServiceLayer);  
  40.             //自己添加的业务层，可以在此层上面添加各种元素  
  41.             businessGraphicsLayer = new esri.layers.GraphicsLayer();  
  42.             myMap.addLayer(businessGraphicsLayer);  
  43.   
  44.             geometryService = new esri.tasks.GeometryService("http://172.7.24.230/ArcGIS/rest/services/Geometry/GeometryServer");//GeometryService服务  
  45.             //设置slider条的位置大小  
  46.             esriConfig.defaults.map.slider =  {left : "30px",top : "20px",width : null,height : "120px"};  
  47.             /*var lods = Layer.tileInfo.lods;  
  48.             //记录各级比例信息  
  49.              for (var i=0, il=lods.length; i<il; i++)  
  50.              {  
  51.                   labels[i] = lods[i].scale;  
  52.              }*/  
  53.             esriConfig.defaults.map.sliderLabel =   
  54.             {  
  55.                   tick: 2,//横刻度线大小  
  56.                   labels: "",//显示信息  
  57.                   //slider条信息文字样式设置，字体、字大小、字颜色、字离左边的距离  
  58.                   style: "width:2em; font-family:Verdana; font-size:12px; color:#fff; padding-left:2px;"  
  59.             };  
  60.             //分别设置地图放大缩小的持续时间和刷新时间设置  
  61.             esriConfig.defaults.map.zoomDuration = 1000;//默认250  
  62.             esriConfig.defaults.map.zoomRate = 50;//默认25  
  63.             //分别设置地图移动的持续时间和刷新时间设置  
  64.             esriConfig.defaults.map.panDuration = 10000;//默认250  
  65.             esriConfig.defaults.map.panRate  = 50;//默认25  
  66.               
  67.   
  68.   
  69.             //esriConfig.defaults.map.sliderLabel = null;设置不显示sliderLabel   
  70.   
  71.             //ToolBar功能按钮 esri.toolbars.Navigation(map)  
  72.             navToolbar = new esri.toolbars.Navigation(myMap);  
  73.             draToolbar = new esri.toolbars.Draw(myMap);  
  74.             dojo.connect(draToolbar,"onDrawEnd",doDraw);//绘制完成后调用doDraw  
  75.   
  76.             dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);//为Navigation绑定事件监听  
  77.   
  78.             //给地图控件添加视图变化监听事件  
  79.             dojo.connect(myMap,"onExtentChange",showExtent);  
  80.             //给地图控件添加载入完成（onload）监听事件  
  81.             //在onload监听事件里在去添加对鼠标移动和拖拽的监听了  
  82.             dojo.connect(myMap,"onLoad",function(){  
  83.                 //给地图控件添加鼠标移动监听事件  
  84.                 dojo.connect(myMap,"onMouseMove",showCoordinates);  
  85.                 //给地图控件添加鼠标拖拽监听事件  
  86.                 dojo.connect(myMap,"onMouseDrag",showCoordinates);  
  87.             });  
  88.   
  89.             //获取元素信息窗口  
  90.             dojo.connect(businessGraphicsLayer, "onClick", addPoint);  
  91.             //businessGraphicsLayer右键处理（删除）  
  92.             dojo.connect(businessGraphicsLayer, "onMouseDown", removePoint);  
  93.   
  94.             dojo.connect(businessGraphicsLayer,"onMouseDrag",changePoint);  
  95.         }  
  96.         //画图  
  97.         function doDraw(geometry){  
  98.             //根据图形的类型定义显示样式  
  99.             switch(geometry.type){  
  100.                 case "point":  
  101.                     //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]));  
  102.                     var symbol = new esri.symbol.PictureMarkerSymbol(‘E:/地图/部署/images/crossing-alarm.png‘, 25, 40);//esri.symbol.PictureMarkerSymbol(url, width, height)  
  103.                     break;  
  104.                 case "line":  
  105.                     var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new new dojo.Color([255,0,0]),1);  
  106.                     break;  
  107.                 case "polygon":  
  108.                     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]));  
  109.                     break;  
  110.             }  
  111.             //把绘制的图形添加到businessGraphicsLayer上显示  
  112.             var graphic = new esri.Graphic(geometry,symbol);  
  113.             //myMap.graphics.clear();//清除上次画的内容  
  114.             businessGraphicsLayer.add(graphic);//myMap.graphics.add(graphic);  
  115.         }  
  116.         //显示地图范围  
  117.         function showExtent(extent)  
  118.         {  
  119.             var s="地图范围：<br/>XMin:"+extent.xmin+"<br/>YMin:"+extent.ymin+"<br/>XMax:"+extent.xmax+"<br/>YMax:"+extent.ymax;  
  120.             dojo.byId("info").innerHTML=s;  
  121.         }  
  122.         //显示鼠标坐标  
  123.         function showCoordinates(event){  
  124.             var mp=event.mapPoint;  
  125.             var mp2=event.screenPoint;  
  126.             dojo.byId("info2").innerHTML="地理坐标："+mp.x+","+mp.y+"<br/>屏幕坐标："+mp2.x+","+mp2.y;  
  127.         }  
  128.         //地图范围变化的事件  
  129.           function extentHistoryChangeHandler(){  
  130.             document.getElementById("preview").disabled=navToolbar.isFirstExtent();//前一视图按钮不可用  
  131.             document.getElementById("nextview").disabled=navToolbar.isLastExtent();//后一视图按钮不可用  
  132.           }  
  133.           //绘制图形控制函数按钮相应事件  
  134.           function Draw(type){  
  135.             switch(type){  
  136.               case "showzoom":{//漫游  
  137.                   draToolbar.deactivate();  
  138.                   navToolbar.deactivate();  
  139.                   myMap.showZoomSlider();  
  140.                   break;  
  141.               }  
  142.               case "point":{//画点  
  143.                   draToolbar.activate(esri.toolbars.Draw.POINT);  
  144.                   myMap.hideZoomSlider();  
  145.                   break;  
  146.               }  
  147.               case "line":{//画线  
  148.                   draToolbar.activate(esri.toolbars.Draw.LINE);  
  149.                   myMap.hideZoomSlider();  
  150.                   break;  
  151.               }  
  152.               case "polygon":{//画面  
  153.                   draToolbar.activate(esri.toolbars.Draw.POLYGON);  
  154.                   myMap.hideZoomSlider();  
  155.                   break;  
  156.               }  
  157.             }  
  158.         }  
  159.         //地图浏览控制函数，按钮相应事件  
  160.       function Navigation(tool){  
  161.           switch(tool){  
  162.               case "zoomin":{//放大  
  163.                   navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);  
  164.                   break;  
  165.               }  
  166.               case "zoomout":{//缩小   
  167.                   navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);  
  168.                   break;  
  169.               }  
  170.               case "pan":{//平移  
  171.                   navToolbar.activate(esri.toolbars.Navigation.PAN);  
  172.                   break;  
  173.               }  
  174.               case "preview":{//上一视图  
  175.                  navToolbar.zoomToPrevExtent();   
  176.                  break;  
  177.               }   
  178.               case "nextview":{//下一视图  
  179.                   navToolbar.zoomToNextExtent();  
  180.                   break;  
  181.               }  
  182.               case "fullextent":{//全图显示  
  183.                   navToolbar.zoomToFullExtent();  
  184.                   break;  
  185.               }  
  186.           }  
  187.         }  
  188.         //弹窗  
  189.         function addPoint(evt) {   
  190.             myMap.infoWindow.resize(200,100);//设置窗口大小  
  191.             myMap.infoWindow.setTitle("Coordinates"); //设置窗口标题  
  192.             //Need to convert the coordinates from the map‘s spatial reference (web mercator) to geographic to display lat/lon values   
  193.             var geoPt = esri.geometry.webMercatorToGeographic(evt.mapPoint);   
  194.             myMap.infoWindow.setContent("lat/lon : " + geoPt.y.toFixed(2) + ", " + geoPt.x.toFixed(2) +   
  195.               "<br />screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y);   
  196.             myMap.infoWindow.show(evt.mapPoint,myMap.getInfoWindowAnchor(evt.screenPoint)); //为获取系统建议的显示位置  
  197.       }   
  198.       //删除点  
  199.         function removePoint(evt){  
  200.             if(evt.button==2){//检查其event.button的值是不是2（代表右键）。  
  201.                 businessGraphicsLayer.remove(evt.graphic);  
  202.             }  
  203.         }  
  204.         //拖拽改变点的位置  
  205.         function changePoint(evt){  
  206.             //alert(evt.x+","+evt.y);  
  207.         }  
  208.         //用dojo的addOnload方法初始化地图  
  209.         dojo.addOnLoad(init);   
  210.         </script>  
  211.     </head>  
  212.     <body class="tundra">  
  213.     <table>  
  214.         <tr>  
  215.             <td>  
  216.                 <div id="mapDiv"style="width: 1200px; height: 800px; border: 1px solid #000;"></div>  
  217.             </td>  
  218.             <td valign="top">  
  219.                 <div id="info"></div><div id="info2""></div>  
  220.             </td>  
  221.         </tr>  
  222.         </table>  
  223.         <input id="showzoom" type="button" value=http://www.mamicode.com/"漫游" onclick="Draw(this.id)"/>  
  224.         <input id="point" type="button" value=http://www.mamicode.com/"画点" onclick="Draw(this.id)"/>  
  225.         <input id="line" type="button" value=http://www.mamicode.com/"画线" onclick="Draw(this.id)"/>  
  226.         <input id="polygon" type="button" value=http://www.mamicode.com/"画面" onclick="Draw(this.id)"/>  
  227.         <input id="zoomin" type="button" value=http://www.mamicode.com/"放大" onclick="Navigation(this.id)"/>  
  228.          <input id="zoomout" type="button" value=http://www.mamicode.com/"缩小" onclick="Navigation(this.id)"/>  
  229.          <input id="pan" type="button" value=http://www.mamicode.com/"平移" onclick="Navigation(this.id)"/>  
  230.          <input id="preview" type="button" value=http://www.mamicode.com/"上一视图" onclick="Navigation(this.id)"/>  
  231.          <input id="nextview" type="button" value=http://www.mamicode.com/"下一视图" onclick="Navigation(this.id)"/>  
  232.          <input id="fullextent" type="button" value=http://www.mamicode.com/"全图" onclick="Navigation(this.id)"/>  
  233.     </body>  
  234. </html>  


联系
我们