SuperMap iClient如何使用WMTS地圖服務

SuperMap iClient如何使用WMTS地圖服務

什么是WMTS服務

       WMTS，切片地圖Web服務（Web Map Tile Service）當前版本是1.0.0。該服務符合 OGC（Open Geospatial Consortium，開放地理信息聯盟）制定的 WMTS 實現規范。

WMTS 是 OGC 提出的緩存技術標准，即在服務器端緩存被切割成一定大小瓦片的地圖，對客戶端只提供這些預先定義好的單個瓦片的服務，將更多的數據處理操作如圖層疊加等放在客戶端，從而緩解 GIS 服務器端數據處理的壓力，改善用戶體驗。

如何使用WMTS地圖服務

　　本文將對iServer的WMTS服務, 天地圖的WMTS服務, ArcGIS的WMTS服務進行剖析

1.針對iServer發布的WMTS服務

　　針對iServer Java 6R發布的WMTS,我們在使用iClinet對接時,需要注意以下幾個參數,這里我用iClinet for JavaScript代碼作為示范:

layer = new SuperMap.Layer.WMTS({name: "World",

          url: http://localhost:8090/iserver/services/map-world/wmts100   //WMTS服務地址

          layer: "World",  //圖層名稱

          style: "default",  //圖層樣式

          matrixSet: "GlobalCRS84Scale_World",  //發布的標識符矩陣集

          format: "image/png", //圖像的MIME類型，默認為 "image/png"

          resolutions:resolutions, //地圖分辨率

          opacity: 1,

          requestEncoding:"KVP"}); //請求編碼 ,一般默認都是KVP

 綜合上面紅色字體的部分,我們可以得出,如果是iServer發布的地圖,除地圖url外,我們需要獲取以上5個屬性,那么究竟如何獲取這5個屬性呢?　

 獲取方法:

　　1. 首先,啟動iServer6R

　　2. 其次瀏覽器中輸入: http://localhost:8090/iserver/services/map-world/wmts100 然后回車

　　3. 搜索Contents節點,我們可以獲取所需4個屬性

<Contents>

<Layer>

<ows:Title>World</ows:Title>

<ows:Identifier>World</ows:Identifier>

<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">

<ows:LowerCorner>-180.0 -90.0</ows:LowerCorner>

<ows:UpperCorner>180.0 90.0</ows:UpperCorner>

</ows:WGS84BoundingBox>

<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">

<ows:LowerCorner>-2.0037508342789244E7 -2.0037508342789236E7</ows:LowerCorner>

<ows:UpperCorner>2.0037508342789244E7 2.0037508342789244E7</ows:UpperCorner>

</ows:BoundingBox>

<Style isDefault="true">

<ows:Identifier>default</ows:Identifier>

</Style>

<Format>image/png</Format>

<TileMatrixSetLink>

<TileMatrixSet>Custom_World</TileMatrixSet>

</TileMatrixSetLink>

<TileMatrixSetLink>

<TileMatrixSet>GlobalCRS84Scale_World</TileMatrixSet>

</TileMatrixSetLink>

<TileMatrixSetLink>

<TileMatrixSet>GoogleMapsCompatible_World</TileMatrixSet>

</TileMatrixSetLink>

<ResourceURL format="image/png"

resourceType="tile" template="http://localhost:8090/iserver/services/map-world/wmts100/

World/default/Custom_World/{TileMatrix}/{TileRow}/{TileCol}.png"/>

<ResourceURL format="image/png"

resourceType="tile" template="http://localhost:8090/iserver/services/map-world/wmts100/

World/default/GlobalCRS84Scale_World/{TileMatrix}/{TileRow}/{TileCol}.png"/>

<ResourceURL format="image/png"

resourceType="tile" template="http://localhost:8090/iserver/services/map-world/wmts100/

\World/default/GoogleMapsCompatible_World/{TileMatrix}/{TileRow}/{TileCol}.png"/>

</Layer>

從高亮的部分,可以得出以下對應情況

WMTS服務參數	iClinet for JavaScript代碼
<ows:Title>World</ows:Title>	layer: "World"
<ows:Identifier>default</ows:Identifier>	style: "default"
<TileMatrixSet>GlobalCRS84Scale_World</TileMatrixSet>	matrixSet: "GlobalCRS84Scale_World"
format="image/png"	format: "image/png"

 

4. 最后在根據自己地圖,計算當前圖層的分辨率數組信息.如本范例分辨率數組是:

 var resolutions = [1.25764139776733,0.628820698883665,0.251528279553466,

                0.125764139776733,0.0628820698883665,0.0251528279553466,

                0.0125764139776733,0.00628820698883665,0.00251528279553466,

                0.00125764139776733,0.000628820698883665,0.000251528279553466,

                0.000125764139776733,0.0000628820698883665,0.0000251528279553466,

                0.0000125764139776733, 0.00000628820698883665,0.00000251528279553466,

                0.00000125764139776733,0.000000628820698883665,0.000000251528279553466];

 最終效果圖:

　　　　 

2.針對天地圖官網發布的WMTS服務

　　針對天地圖官網發布的WMTS服務,我們在使用iClinet對接時,需要注意以下幾個參數,這里我用iClinet for JavaScript代碼作為示范:

　　1. 天地圖官網公布的WMTS服務地址,請查看http://www.tianditu.cn/guide/index.html

　　　　 

　　2. 我選取http://t0.tianditu.com/vec_c/wmts為服務地址, 搜索Contents節點,獲取4個重要信息:

<Contents>

<Layer>

<ows:Title>cva</ows:Title>

<ows:Abstract>cva</ows:Abstract>

<ows:Identifier>cva</ows:Identifier>

<ows:WGS84BoundingBox>

<ows:LowerCorner>-180.0 -90.0</ows:LowerCorner>

<ows:UpperCorner>180.0 90.0</ows:UpperCorner>

</ows:WGS84BoundingBox>

<ows:BoundingBox>

<ows:LowerCorner>-180.0 -90.0</ows:LowerCorner>

<ows:UpperCorner>180.0 90.0</ows:UpperCorner>

</ows:BoundingBox>

<Style>

<ows:Identifier>default</ows:Identifier>

</Style>

<Format>tiles</Format>

<TileMatrixSetLink>

<TileMatrixSet>c</TileMatrixSet>

</TileMatrixSetLink>

</Layer>

<TileMatrixSet>

<ows:Identifier>c</ows:Identifier>

<ows:SupportedCRS>urn:ogc:def:crs:EPSG::4490</ows:SupportedCRS>

  　　

從高亮的部分,可以得出以下對應情況

天地圖官網WMTS服務參數	iClinet for JavaScript代碼
<ows:Title>cva</ows:Title>	layer: "vec"
<ows:Identifier>default</ows:Identifier>	style: "default"
<TileMatrixSet>c</TileMatrixSet>	matrixSet: "c"
<Format>tiles</Format>	format: "tiles"

 

     由於此天地圖官網提供的WMTS服務,為全球經緯度范圍(東西經±180度,南北緯±90度),則不需要設置原點和全副范圍.

　　那么在iClinet for JavaScript代碼中可以這樣寫:

layer = new SuperMap.Layer.WMTS({name: "vec",

                url: "http://t0.tianditu.com/vec_c/wmts",

                layer: "vec",

                style: "default",

                matrixSet: "c",

                format: "tiles",

                opacity: 1,

                requestEncoding:"KVP"});

 

　　最終效果圖:

　　　　　　

　  當然如果再疊加一幅中文標記wmts地圖(該步驟同上述步驟相似,請開發人員自己嘗試),最終效果:

　　　　　　 　  

3.針對ArcGIS發布的WMTS服務

　　針對ArcGIS發布的WMTS,我們在使用iClinet對接時,需要注意以下幾個參數,這里我用iClinet for JavaScript代碼作為示范:

　　 　　1. 使用ArcGIS發布地圖服務,切緩存 (此步驟略) 出圖正常

　　　　　

　　

　　　　2. 得到ArcGIS的WMTS服務地址, (http://localhost:6080/arcgis/rest/services/china/MapServer/wmts)搜索Contents節點,獲取6個重要信息: 

<Contents>

<!-- Layer -->

<Layer>

<ows:Title>china</ows:Title>

<ows:Identifier>china</ows:Identifier>

<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::0">

<ows:LowerCorner>73.62004852294922 3.8537260781998635</ows:LowerCorner>

<ows:UpperCorner>134.76846313476562 53.553741455078125</ows:UpperCorner>

</ows:BoundingBox>

<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">

<ows:LowerCorner>73.62004852294922 3.8537260781998635</ows:LowerCorner>

<ows:UpperCorner>134.76846313476562 53.553741455078125</ows:UpperCorner>

</ows:WGS84BoundingBox>

<Style isDefault="true">

<ows:Title>Default Style</ows:Title>

<ows:Identifier>default</ows:Identifier>

</Style>

<Format>image/png</Format>

<TileMatrixSetLink>

<TileMatrixSet>default028mm</TileMatrixSet>

</TileMatrixSetLink>

<TileMatrixSetLink>

<TileMatrixSet>nativeTileMatrixSet</TileMatrixSet>

</TileMatrixSetLink>

<ResourceURL

format="image/png"

resourceType="tile" template="http://localhost:6080/arcgis/rest/services/china/MapServer/WMTS

/tile/1.0.0/china/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"/>

</Layer>

以及矩陣原點屬性

<TileMatrix>

<ows:Identifier>0</ows:Identifier>

<ScaleDenominator>6.047619047619047E7</ScaleDenominator>

<TopLeftCorner>-400.0 400.0</TopLeftCorner>

<TileWidth>256</TileWidth>

<TileHeight>256</TileHeight>

<MatrixWidth>2</MatrixWidth>

<MatrixHeight>3</MatrixHeight>

　　從高亮的部分,可以得出以下對應情況

ArcGIS WMTS服務參數	iClinet for JavaScript代碼
<ows:Title>china</ows:Title>	layer: "china"
<ows:Identifier>default</ows:Identifier>	style: "default"
<TileMatrixSet>default028mm</TileMatrixSet>	matrixSet: "default028mm"
<Format>image/png</Format>	format: "image/png"
<ows:LowerCorner>73.62004852294922 3.8537260781998635</ows:LowerCorner> <ows:UpperCorner>134.76846313476562 53.553741455078125</ows:UpperCorner>	tileFullExtent: new SuperMap.Bounds( 73.62004852294922, 3.8537260781998635, 134.76846313476562, 53.553741455078125)
<TopLeftCorner>-400.0 400.0</TopLeftCorner>	tileOrigin:new SuperMap.LonLat(-400,400)

 

　　3. 獲取ArcGIS所切圖層的分辨率,訪問地圖rest服務(http://localhost:6080/arcgis/rest/services/china/MapServer )我們可以獲取resolutions

　　　　　　　　　　　　　　

　　那么在iClinet for JavaScript中完整代碼可以這樣寫

var resolutions = [0.15228550437351568,0.07614275218675784,0.03807137609337892,0.01903568804668946,0.00951784402334473]; //分辨率

var maxExtent = new SuperMap.Bounds(73.62004852294922,3.8537260781998635,134.76846313476562,53.553741455078125); //全副范圍

layer = new SuperMap.Layer.WMTS({name: "china",

    url: "http://localhost:6080/arcgis/rest/services/china/MapServer/wmts"

    layer: "china",

    style: "default",

    matrixSet: "default028mm",

    format: "image/png",

    resolutions:resolutions,

    opacity: 1,

    tileFullExtent:maxExtent,     //瓦片設置的最大范圍

    tileOrigin:new SuperMap.LonLat(-400,400),   //瓦片矩陣左上角

    requestEncoding:"KVP"

   });

 　最終效果圖:

　　　　　　　　

　　　　

　　　　注意:在對接ArcGIS wmts服務時:

　　　　　　1. 需要設置瓦片設置的最大范圍(全副范圍)

　　　　　　2. 需要設置瓦片矩陣左上角 (如果不出圖,有時候需要根據請求瓦片行列號,微調這個值)

　　　　　　3. 需要設置分辨率

 　　　　（轉貼請注明出處：http://www.cnblogs.com/zhangyongli2011/    如發現有錯，請留言 謝謝）