本例使用一個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