arcgis for js - 解決加載天地圖和WMTS服務,WMTS服務不顯示的問題,以及wmts服務密鑰。

1 arcgis加載天地圖和wmts服務

arcgis for js加載天地圖的例子網上有很多，這裏先不寫了，後期有空再貼代碼，這裏主要分析下WMTS服務爲什麼不顯示，怎麼解決。

條件：這裏的WMTS服務是OGC標準的，需要使用WMTSLayer類來實例化圖層。

問題：天地圖和自己的WMTS只能顯示一個，即先加載哪個，就只顯示哪個，而另外一個圖層不會顯示。
原因：天地圖服務和自己的WMTS服務的切片矩陣集不同導致。下面多點廢話詳細分析一下，因爲我對各服務瞭解的很淺，如果有錯誤請批評指正。
　　WMTS服務是切片服務，相比WMS而言，犧牲定製地圖的靈活性來提升性能，這對前端展示很有用，因爲用戶縮放或移動地圖後，很快就能將切片的影像渲染出來。引用一段百度百科的文字來說明WMTS：

WMTS提供了一種採用預定義圖塊方法發佈數字地圖服務的標準化解決方案。WMTS彌補了WMS不能提供分塊地圖的不足。WMS針對提供可定製地圖的服務，是一個動態數據或用戶定製地圖（需結合SLD標準）的理想解決辦法。WMTS犧牲了提供定製地圖的靈活性，代之以通過提供靜態數據（基礎地圖）來增強伸縮性，這些靜態數據的範圍框和比例尺被限定在各個圖塊內。這些固定的圖塊集使得對WMTS服務的實現可以使用一個僅簡單返回已有文件的Web服務器即可，同時使得可以利用一些標準的諸如分佈式緩存的網絡機制實現伸縮性。

　　而當在arcgis for js中加載esri提供的底圖或天地圖底圖時，底圖與我們自己的WMTS服務縮放級別與每塊切片大小不一致。比如底圖縮放2及時，將底圖切爲4*2的切片，比例分母是A，而此時我們的WMTS2及時比例分母不與A相等，這就導致兩個地圖服務衝突，而無法同時顯示兩個地圖服務。所以從此方面下手解決這個問題。
解決：將天地圖的WMTS服務http://t0.tianditu.com/vec_c/wmts，和自己的WMTS服務加載至ArcMap中，在右側catalog目錄中分別雙擊兩個服務，查看服務屬性如下圖

天地圖wmts服務

自己的WMTS服務

　　將這兩個服務的切片矩陣集合分對照更改到 esri.layers.TileInfooptions裏的lods屬性中即可。注意清除一下瀏覽器緩存再刷新頁面，否則很可能還展示更改前的頁面狀態。

代碼
下面貼一下自定義OGC標準的WMTS服務在arcgis4js中的加載：

var tileInfo = new esri.layers.TileInfo({
    "dpi": 90.71428571428571,    //必須，否則圖錯
    "rows": 256,
    "cols": 256,
    "compressionQuality": 0,
    "origin": {
        "x": -180,
        "y": 90
    },
    "spatialReference": {
        "wkid": 4326
    },
    "lods": [
        { "level": 1, "resolution": 0.703125, "scale": 295829355.454566 },
        { "level": 2, "resolution": 0.3515625, "scale": 147914677.727283 },
        { "level": 3, "resolution": 0.17578125, "scale": 73957338.863641 },
        { "level": 4, "resolution": 0.087890625, "scale": 36978669.431821 },
        { "level": 5, "resolution": 0.0439453125, "scale": 18489334.715910 },
        { "level": 6, "resolution": 0.02197265625, "scale": 9244667.357955 },
        { "level": 7, "resolution": 0.010986328125, "scale": 4622333.678978 },
        { "level": 8, "resolution": 0.0054931640625, "scale": 2311166.839489 },
        { "level": 9, "resolution": 0.00274658203125, "scale": 1155583.419744 },
        { "level": 10, "resolution": 0.001373291015625, "scale": 577791.709872 },
        { "level": 11, "resolution": 0.0006866455078125, "scale": 288895.854936 },
        { "level": 12, "resolution": 0.00034332275390625, "scale": 144447.927468 },
        { "level": 13, "resolution": 0.000171661376953125, "scale": 72223.963734 },
        { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36111.981867 },
        { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18055.990934 },
        { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9027.995467 },
        { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4513.997733 },
        { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2256.998867 },
        { "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.499433 }
    ]
});
var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({
   wkid: 4326
}));
var layerInfo = new WMTSLayerInfo({
  tileInfo: tileInfo,
  fullExtent: tileExtent,
  initialExtent: tileExtent,
  identifier: "name",
  tileMatrixSet: "EPSG:4326",
  format: "image/png",
  style: "_null"
});
var resourceInfo = {
  version: "1.0.0",
  layerInfos: [layerInfo],
  copyright: "open layer"
};
var options = {
  serviceMode: "KVP",
  resourceInfo: resourceInfo,
  layerInfo: layerInfo
};
wmtsLayer = new WMTSLayer(wmtsUrl, options);
map.addLayer(wmtsLayer);

注意
如果lods屬性設置不正確，還會導致底圖與自己的wmts服務座標錯亂的問題。如果發現座標系設置相同但同一個座標點無法在兩個服務中重合，按照上述解決方式更改lods屬性即可。

2 加載帶有密鑰的WMTS

初始化WMTSLayer時，在第二個參數也就是options中配置鍵customParameters的屬性即可。

demo

var options = {
    ...
    customParameters:{
        "key1":"value1",
        "key2":"value2"
    }
}
var wmtsLayer = new WMTSLayer(wmtsUrl, options);