ArcGIS api for javascript——圖層-創建WMS圖層類型的圖層


本例使用一個WMS端點創建了一個簡單的動態圖層。首先,代碼聲明一個新的類my.CityStatesRiversUSAWMSLayer,該類繼承esri.layers.DynamicMapServiceLayer

dojo.declare("my.CityStatesRiversUSAWMSLayer", DynamicMapServiceLayer, {
  ...
});

接下來定義了類的構造函數。圖層的初始化和完整的范圍和空間參考都被定義在構造函數中。代碼也設置了圖層的loaded屬性為true並調用onLoad函數。

constructor: function() {
  this.initialExtent = this.fullExtent = new esri.geometry.Extent(...);
  this.spatialReference = new esri.SpatialReference(...);
 
        
  this.loaded = true;
  this.onLoad(this);
},

最后,getImageUrl方法被執行。getImageUrl方法返回被加到地圖的圖片的URL。URL使用帶范圍,寬和高的參數的函數生成。callback函數被調用別且URL作為單一參數被傳回。

getImageUrl: function(extent, width, height, callback) {
  ...
 
        
  callback("..." + dojo.objectToQuery(params));
}

為了使用這個圖層,代碼創建一個地圖並且增加一個來自ArcGIS Online的切片圖層,然后在上面放置新建的WMS圖層。

function init() {
  var map = new esri.Map("map");
  map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("..."));
  map.addLayer(new my.CityStatesRiversUSAWMSLayer());
}


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2    "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html lang="en">
 5   <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7     <meta http-equiv="X-UA-Compatible" content="IE=7" />
 8     <title>Portland Tile Server</title>
 9 
10     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
11     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
12     <script type="text/javascript"> 
13    
14         dojo.require("esri.map");
15         
16         dojo.declare("my.PortlandTiledMapServiceLayer",esri.layers.TiledMapServiceLayer,{
17              constructor:function(){
18             
19                 this.spatialReference = new esri.SpatialReference({wkid:4326});
20                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-123.596895130725, 44.297575737946, -121.553757125519, 46.3683237161949, this.spatialReference));
21                 
22                 this.tileInfo = new esri.layers.TileInfo({
23                     "rows" :512,
24                     "cols" :512,
25                     "dpi"  :96,
26                     "format":"PNG32",
27                     "compressionQuality":0,
28                     "origin": {
29                         "x" : -180,
30                         "y" :90                    
31                     },
32                     "spatialReference" : {
33                         "wkid" : 4326
34                     },
35                     "lods" :[
36                     
37                          {"level" : 0, "resolution" : 0.351562499999999, "scale" : 147748799.285417},
38                           {"level" : 1, "resolution" : 0.17578125, "scale" : 73874399.6427087},
39                           {"level" : 2, "resolution" : 0.0878906250000001, "scale" : 36937199.8213544},
40                           {"level" : 3, "resolution" : 0.0439453125, "scale" : 18468599.9106772},
41                           {"level" : 4, "resolution" : 0.02197265625, "scale" : 9234299.95533859},
42                           {"level" : 5, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
43                            {"level" : 6, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
44                           {"level" : 7, "resolution" : 0.00274658203124999, "scale" : 1154287.49441732},
45                           {"level" : 8, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
46                            {"level" : 9, "resolution" : 0.0006866455078125, "scale" : 288571.873604331},
47                            {"level" : 10, "resolution" : 0.000343322753906249, "scale" : 144285.936802165},
48                            {"level" : 11, "resolution" : 0.000171661376953125, "scale" : 72142.9684010827},
49                            {"level" : 12, "resolution" : 8.58306884765626E-05, "scale" : 36071.4842005414},
50                            {"level" : 13, "resolution" : 4.29153442382813E-05, "scale" : 18035.7421002707},
51                            {"level" : 14, "resolution" : 2.14576721191406E-05, "scale" : 9017.87105013534},
52                           {"level" : 15, "resolution" : 1.07288360595703E-05, "scale" : 4508.93552506767}
53                     
54                     ]
55                 });
56                 
57                 this.loaded = true;
58                 this.onLoad(this);           
59             
60             }, 
61             
62        
63           getTileUrl: function(level, row, col) {
64           return "http://sampleserver1.arcgisonline.com/arcgiscache/Portland_Portland_ESRI_LandBase_AGO/Portland/_alllayers/" +
65                   "L" + dojo.string.pad(level, 2, '0') + "/" +
66                   "R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
67                   "C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
68                   "png";
69         } 
70       });
71         function init() {
72             var map = new esri.Map("map");
73         
74             map.addLayer(new my.PortlandTiledMapServiceLayer());
75         }
76         dojo.addOnLoad(init);      
77         
78     </script>
79   </head>
80    <body class="tundra">
81     <div id="map"   style=" width:1024px; height:512px; border:1px solid #000;"></div>
82   </body>
83 </html>
84  
85 
86   
87   

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM