码迷，mamicode.com
首页 > 编程语言 > 详细

ArcGIS_9.3_Javascript_API

时间：2014-07-22 22:55:53      阅读：328      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   java   color   os   

这几天在学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://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://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="漫游" onclick="Draw(this.id)"/>  
  224.         <input id="point" type="button" value="画点" onclick="Draw(this.id)"/>  
  225.         <input id="line" type="button" value="画线" onclick="Draw(this.id)"/>  
  226.         <input id="polygon" type="button" value="画面" onclick="Draw(this.id)"/>  
  227.         <input id="zoomin" type="button" value="放大" onclick="Navigation(this.id)"/>  
  228.          <input id="zoomout" type="button" value="缩小" onclick="Navigation(this.id)"/>  
  229.          <input id="pan" type="button" value="平移" onclick="Navigation(this.id)"/>  
  230.          <input id="preview" type="button" value="上一视图" onclick="Navigation(this.id)"/>  
  231.          <input id="nextview" type="button" value="下一视图" onclick="Navigation(this.id)"/>  
  232.          <input id="fullextent" type="button" value="全图" onclick="Navigation(this.id)"/>  
  233.     </body>  
  234. </html>  

ArcGIS_9.3_Javascript_API,布布扣,bubuko.com

ArcGIS_9.3_Javascript_API

标签：style   blog   http   java   color   os   

原文地址：http://www.cnblogs.com/henuyuxiang/p/3849024.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！