（转）OL记载Arcgis Server切片

by · 2019-04-03

http://blog.csdn.net/gisshixisheng/article/details/47955787

概述：

本文讲述如何在OpenLayers中调用Arcgis Server切片并显示。

 

思路：

在OpenLayers中加载Arcgis Server切片用XYZ图层，Arcgis Server的切片调用地址我们可以看到如下：

可以看到，切片的请求地址为http://localhost:6080/arcgis/rest/services/china/MapServer/z/y/x，其中，z为缩放级别，x，y分别为改切片距离tileOrigin的行列号，其计算方式为：

 

[javascript] view plain copy

 

 print?

  1. var res = this.getResolution();  
  2. var originTileX = (this.tileOrigin.lon + (res * this.tileSize.w/2));  
  3. var originTileY = (this.tileOrigin.lat – (res * this.tileSize.h/2));  
  4. var center = bounds.getCenterLonLat();  
  5. var point = { x: center.lon, y: center.lat };  
  6. var x = (Math.round(Math.abs((center.lon – originTileX) / (res * this.tileSize.w))));   
  7. var y = (Math.round(Math.abs((originTileY – center.lat) / (res * this.tileSize.h))));   
  8. var z = this.map.getZoom();  

将之封装为一个OpenLayers扩展类OpenLayers.Layer.AgsTileLayer，该类的代码方式为：

 

 

[javascript] view plain copy

 

 print?

  1. OpenLayers.Layer.AgsTileLayer = OpenLayers.Class(OpenLayers.Layer.XYZ, {  
  2.     url: null,  
  3.     tileOrigin: null,  
  4.     tileSize: new OpenLayers.Size(256, 256),  
  5.     type: ‘png’,  
  6.     useScales: false,  
  7.     overrideDPI: false,  
  8.     initialize: function(name, url, options) {   
  9.         OpenLayers.Layer.XYZ.prototype.initialize.apply(this, arguments);  
  10.     },  
  11.     getURL: function (bounds) {  
  12.         var res = this.getResolution();  
  13.         var originTileX = (this.tileOrigin.lon + (res * this.tileSize.w/2));  
  14.         var originTileY = (this.tileOrigin.lat – (res * this.tileSize.h/2));  
  15.         var center = bounds.getCenterLonLat();  
  16.         var point = { x: center.lon, y: center.lat };  
  17.         var x = (Math.round(Math.abs((center.lon – originTileX) / (res * this.tileSize.w))));   
  18.         var y = (Math.round(Math.abs((originTileY – center.lat) / (res * this.tileSize.h))));   
  19.         var z = this.map.getZoom();  
  20.         var url = this.url;  
  21.         var s = ” + x + y + z;  
  22.         if (OpenLayers.Util.isArray(url)) {  
  23.             url = this.selectUrl(s, url);  
  24.         }  
  25.         url = url + ‘/tile/${z}/${y}/${x}’;  
  26.         url = OpenLayers.String.format(url, {‘x’: x, ‘y’: y, ‘z’: z});  
  27.         return OpenLayers.Util.urlAppend(  
  28.             url, OpenLayers.Util.getParameterString(this.params)  
  29.         );  
  30.     },  
  31.   
  32.     CLASS_NAME: ‘OpenLayers.Layer.AgsTileLayer’  
  33. });   


调用方式为：

 

 

[html] view plain copy

 

 print?

  1. <script src=“AgsTileLayer.js”></script>  

 

[javascript] view plain copy

 

 print?

  1. var tiled = new OpenLayers.Layer.AgsTileLayer( “AGSCache”,  
  2.         “http://localhost:6080/arcgis/rest/services/china/MapServer”, {  
  3.             isBaseLayer: true,  
  4.             tileSize: new OpenLayers.Size(256, 256),  
  5.             resolutions: [  
  6.                 0.07614275218656896,  
  7.                 0.03807137609328448,  
  8.                 0.01903568804664224,  
  9.                 0.00951784402332112,  
  10.                 0.00475892201166056  
  11.             ],  
  12.             tileOrigin: new OpenLayers.LonLat(-400 , 400),  
  13.             maxExtent: bounds,  
  14.             projection: ‘EPSG:4326’  
  15.         });  
  16. map.addLayers([tiled]);  


代码中涉及到的参数可以从http://localhost:6080/arcgis/rest/services/china/MapServer?f=pjson返回的JSON数据中获取，如下：

 

 

[javascript] view plain copy

 

 print?

    1. {  
    2.    “capabilities” : “Map,Query,Data”,  
    3.    “copyrightText” : “”,  
    4.    “currentVersion” : 10.110,  
    5.    “description” : “”,  
    6.    “documentInfo” : {  
    7.       “AntialiasingMode” : “None”,  
    8.       “Author” : “”,  
    9.       “Category” : “”,  
    10.       “Comments” : “”,  
    11.       “Keywords” : “”,  
    12.       “Subject” : “”,  
    13.       “TextAntialiasingMode” : “Force”,  
    14.       “Title” : “”  
    15.    },  
    16.    “fullExtent” : {  
    17.       “spatialReference” : {  
    18.          “latestWkid” : 4326,  
    19.          “wkid” : 4326  
    20.       },  
    21.       “xmax” : 134.9767976465060,  
    22.       “xmin” : 73.45100463562233,  
    23.       “ymax” : 53.53194315222358,  
    24.       “ymin” : 18.16324718764174  
    25.    },  
    26.    “initialExtent” : {  
    27.       “spatialReference” : {  
    28.          “latestWkid” : 4326,  
    29.          “wkid” : 4326  
    30.       },  
    31.       “xmax” : 138.0530872970502,  
    32.       “xmin” : 70.37471498507816,  
    33.       “ymax” : 55.85657468506156,  
    34.       “ymin” : 35.30335092712114  
    35.    },  
    36.    “layers” : [  
    37.       {  
    38.          “defaultVisibility” : true,  
    39.          “id” : 0,  
    40.          “maxScale” : 0,  
    41.          “minScale” : 0,  
    42.          “name” : “province”,  
    43.          “parentLayerId” : -1,  
    44.          “subLayerIds” : null  
    45.       },  
    46.       {  
    47.          “defaultVisibility” : true,  
    48.          “id” : 1,  
    49.          “maxScale” : 0,  
    50.          “minScale” : 0,  
    51.          “name” : “bcity”,  
    52.          “parentLayerId” : -1,  
    53.          “subLayerIds” : null  
    54.       },  
    55.       {  
    56.          “defaultVisibility” : true,  
    57.          “id” : 2,  
    58.          “maxScale” : 0,  
    59.          “minScale” : 0,  
    60.          “name” : “bcounty”,  
    61.          “parentLayerId” : -1,  
    62.          “subLayerIds” : null  
    63.       }  
    64.    ],  
    65.    “mapName” : “Layers”,  
    66.    “maxImageHeight” : 2048,  
    67.    “maxImageWidth” : 2048,  
    68.    “maxRecordCount” : 1000,  
    69.    “maxScale” : 1000000,  
    70.    “minScale” : 32000000,  
    71.    “serviceDescription” : “”,  
    72.    “singleFusedMapCache” : true,  
    73.    “spatialReference” : {  
    74.       “latestWkid” : 4326,  
    75.       “wkid” : 4326  
    76.    },  
    77.    “supportedImageFormatTypes” : “PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP”,  
    78.    “supportedQueryFormats” : “JSON, AMF”,  
    79.    “supportsDynamicLayers” : false,  
    80.    “tables” : [],  
    81.    “tileInfo” : {  
    82.       “cols” : 256,  
    83.       “compressionQuality” : 0,  
    84.       “dpi” : 96,  
    85.       “format” : “PNG”,  
    86.       “lods” : [  
    87.          {  
    88.             “level” : 0,  
    89.             “resolution” : 0.07614275218656896,  
    90.             “scale” : 32000000  
    91.          },  
    92.          {  
    93.             “level” : 1,  
    94.             “resolution” : 0.03807137609328448,  
    95.             “scale” : 16000000  
    96.          },  
    97.          {  
    98.             “level” : 2,  
    99.             “resolution” : 0.01903568804664224,  
    100.             “scale” : 8000000  
    101.          },  
    102.          {  
    103.             “level” : 3,  
    104.             “resolution” : 0.009517844023321120,  
    105.             “scale” : 4000000  
    106.          },  
    107.          {  
    108.             “level” : 4,  
    109.             “resolution” : 0.004758922011660560,  
    110.             “scale” : 2000000  
    111.          },  
    112.          {  
    113.             “level” : 5,  
    114.             “resolution” : 0.002379461005830280,  
    115.             “scale” : 1000000  
    116.          }  
    117.       ],  
    118.       “origin” : {  
    119.          “x” : -400,  
    120.          “y” : 400  
    121.       },  
    122.       “rows” : 256,  
    123.       “spatialReference” : {  
    124.          “latestWkid” : 4326,  
    125.          “wkid” : 4326  
    126.       }  
    127.    },  
    128.    “units” : “esriDecimalDegrees”  
    129. }  

转载自：https://blog.csdn.net/weixin_34361881/article/details/85901174

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序