Arcgis js API使用wmts方式加载GeoWebCache中的切片地图（转载）

使用GeoWebCache的主要目的是其独立安装版能够发布arcgis的切片。我们知道，使用openlayer是调用geoserver最方便的方法，那么在发布完arcgis的切片后，怎么用arcgis API来调用呢？

1、重写TiledMapServiceLayer的方式。

不断寻找，终于找到了一个arcgis官网的加载geoserver的wmts的例子，而geoserver和GeoWebCache是支持wmts的。所以这个方法是可行的。我将这个例子改了一下，最后调用成功。

例子如下：

 function creatGeoWebCacheObject() {

     //地图

     dojo.declare("GeoWebCacheLayer", esri.layers.TiledMapServiceLayer, {

         constructor: function () {

             this.spatialReference = new esri.SpatialReference({ wkid: 4326 });

             this.initialExtent = this.fullExtent =

                   new esri.geometry.Extent(116, 40, 118, 41, this.spatialReference);

             this.tileInfo = new esri.layers.TileInfo({

                 "rows": 256,

                 "cols": 256,

                 "compressionQuality": 0,

                 "origin": { "x": -180, "y": 90 },

                 "spatialReference": { "wkid": 4326 },

                 "lods": [{ "level": 0, "resolution": 0.703125, "scale": 295497593.05875 },

                              { "level": 1, "resolution": 0.3515625, "scale": 147748796.529375 },

                              { "level": 2, "resolution": 0.17578125, "scale": 73874398.264688 },

                              { "level": 3, "resolution": 0.087890625, "scale": 36937199.132344 },

                              { "level": 4, "resolution": 0.0439453125, "scale": 18468599.566172 },

                              { "level": 5, "resolution": 0.02197265625, "scale": 9234299.783086 },

                              { "level": 6, "resolution": 0.010986328125, "scale": 4617149.891543 },

                              { "level": 7, "resolution": 0.0054931640625, "scale": 2308574.945771 },

                              { "level": 8, "resolution": 0.00274658203125, "scale": 1154287.472886 },

                              { "level": 9, "resolution": 0.001373291015625, "scale": 577143.736443 },

                              { "level": 10, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },

                              { "level": 11, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },

                              { "level": 12, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },

                              { "level": 13, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },

                              { "level": 14, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },

                              { "level": 15, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },

                              { "level": 16, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },

                              { "level": 17, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }]

             });

             this.loaded = true;

             this.onLoad(this);

         },

         getTileUrl: function (level, row, col) {

             var levelMap = "";

             levelMap = "http://localhost:8090/geoserver/gwc/service/wmts" + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"

                 + "&LAYER=Maps:beijing" + "&STYLE=_null" + "&FORMAT=image/png" + "&TILEMATRIXSET=EPSG:4326"

                 + "&TILEMATRIX=EPSG:4326:" + level + "&TILEROW=" + row + "&TILECOL=" + col;

             return levelMap;

         }

     });

 }

2、主要修改地方

这个函数中主要修改几个地方，这些大部分都可以从wmts文件中获取，在点击getcapabilities document后会获取一个wmts文件，打开该文件，可以在对应的layer中获取对应的参数。

 

fullExtent：就是图层发布的extent，后面跟坐标系。

 

Origin：原点，世界地图用-180,90。一般在geoserver中发布的地图也是这个。但是如果是发布的Arcgis切片，可以在Arcgis server中发布的服务中看到，打开服务地址，json中的地图可以直接来用。另外在切片文件的conf.xml文件中也有相关配置。

Lods：这个是地图level和比例尺、像素之间的关系，与原点之间的配合可以使getTileUrl时获取正确的级别、行列号对应关系。Arcgis可以直接从json中获取，geoserver和GeoWebCache发布的服务可以根据坐标系直接用对应的lods。

EPSG：坐标系统编码。值得注意的是：在发布的Arcgis切片中，你的EPSG后面并不是4326这样正规的编码，一般是4326_beijing这样的编码。具体可参考发布的gwc中的显示。

 

其他配置在wmts或者Arcgis服务配置文件中都可以找到或者获取提示。

这另外我的GeoWebCache一开始没有装好，wmts不支持，后来卸掉tomcat重装了一下，配置好java环境，终于搞定。

主要参考文章：

https://developers.arcgis.com/javascript/jssamples/layers_wmts.html