描述
本例展示了如何設置地圖的范圍為地圖其中一個圖層的范圍。本例有兩個圖層:ArcGIS Online上的世界地圖圖層 ArcGISTiledMapServiceLayer和堪薩斯州的要素的圖層ArcGISDynamicMapServiceLayer。本例展示了如何設置地圖總是以堪薩斯州范圍開始。
代碼包含兩個事件監聽器,一個是為了每個圖層。這些監聽器幫助記錄多少圖層被加載。當圖層計數是2,createMapAddLayers函數被調用。這個函數創建一個地圖,設置地圖范圍是myService2(堪薩斯州服務)的范圍:
myMap = new esri.Map("mapDiv", { extent:myService2.fullExtent });
地圖被創建以后,圖層被增加。注意加載圖層和增加圖層不是一回事。在本例中,地圖被創建前圖層加載,地圖創建以后圖層被加到地圖里。
直到所有圖層被加載前要避免訪問地圖屬性。如果代碼中沒有包含事件監聽器,有可能在myService2完全加載前地圖就會嘗試去設置它的范圍,這回引起意想不到的結果。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 8 <title>Set Map Extent Using Second Service</title> 9 10 <link rel="stylesheet" type="text/css" href="styles.css" 11 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 12 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 13 <script type="text/javascript"> 14 dojo.require("esri.map"); 15 var map,myservice1,myservice2; 16 17 function init(){ 18 map=new esri.Map("map"); 19 myService1=new esri.layers.ArcGISTiledMapServiceLayer( 20 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" 21 // "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" 22 ); 23 24 var secondaryMapServiceURL = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer"; 25 //var secondaryMapServiceURL = "http://118.144.36.6:6080/arcgis/rest/services/chakan/henan530/MapServer"; 26 myService2 = new esri.layers.ArcGISDynamicMapServiceLayer(secondaryMapServiceURL,{opacity:0.65}); 27 28 var layerLoadCount=0; 29 //當兩個圖層加載時運行creatMapAddLayers 30 31 if(myService1.loded){ 32 layerLoadCount+=1; 33 if(layerLoadCount == 2){ 34 creatMapAddLayers(myService1,myService2); 35 } 36 }else{ 37 dojo.connect(myservice1,"onLoad",function(service){ 38 layerLoadCount += 1; 39 if(layerLoadCount == 2){ 40 creatMapAddLayers(myService1,myService2); 41 } 42 }); 43 } 44 if(myService2.loded){ 45 layerLoadCount+=1; 46 if(layerLoadCount == 2){ 47 creatMapAddLayers(myService1,myService2); 48 } 49 50 }else{ 51 dojo.connect(myservice2,"onLoad",function(service){ 52 layerLoadCount += 1; 53 if(layerLoadCount == 2){ 54 creatMapAddLayers(myService1,myService2); 55 } 56 57 }); 58 } 59 //創建一個地圖,設置范圍並添加到地圖服務中 60 function creatMapAddLayers(myService1,myService2){ 61 //創建地圖 62 map=new esri.Map("mapDiv",{extent:myservice2.fullExtent}); 63 map.addLayer(myService1); 64 map.addLayer(myService2); 65 dojo.connect(map,"onClick",addPoint); 66 function addPoint(event){ 67 map.infoWindow.setTitle("Coordinates-坐標"); 68 map.infoWindow.setContent("經/緯:" + event.mapPoint.x + "," + event.mapPoint.y 69 +"<br/>screen x/y: " + event.screenPoint.x + ","+event.screenPoint.y); 70 71 map.infoWindow.show(event.screenPoint,map.getInfoWindowAnchor(event.screenPoint)); 72 } 73 74 } 75 76 77 } 78 dojo.addOnLoad(init); 79 80 </script> 81 </head> 82 83 <body class="tundra"> 84 <div id="map" style="width:600px;height:400px;border:1px solid #000"></div> 85 <br> 86 This map shows two services: 87 <ul> 88 <li>An ArcGIS Online tiled service that has a world extent.</li> 89 <li>A second dynamic service with an extent of the State of Kansas. This is the extent used when the maps are first displayed. </li> 90 </ul> 91 92 Note that if you want to combine to tiled services in the same map, they must have the same tile configuration. 93 </body> 94 </html>