• 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=" 1024px; height:512px; border:1px solid #000;"></div>
    82   </body>
    83 </html>
    84  
    85 
    86   
    87   
  • 相关阅读:
    wireshark抓包 TCP 字段详解
    youget使用教程
    JavaScript操作Oracle数据库
    WinForm导出文件,你懂的……
    Docker数据存储原理
    Dockerfile之CMD与ENTRYPOINT使用要点
    DevOps实战(Docker+Jenkins+Git)
    Python和Django web开发工具pycharm介绍
    连出两次
    python2.7发邮件小程序
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6542011.html
Copyright © 2020-2023  润新知