本例使用一个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=" 1024px; height:512px; border:1px solid #000;"></div> 82 </body> 83 </html> 84 85 86 87