nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Request for WMTS example accessing a ArcGIS 10.1 WMTS service

CoreyAlix

I believe the ArcGIS Javascript WMTS examples is missing an example of accessing ArcGIS 10.1 WMTS tiles and I would benefit from such an example.

Finde mehr Beiträge mit dem Tag

Accepted answers

SiqiLi

Here is the example with 10.1 sample WorldTimeZones service.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior     of the samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"     />     <title>       Add WMTS Layer     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       .esriScalebar{         padding: 20px 20px;       }       #map{         padding:0;       }       #citationInfo{         position:absolute;         color:black;         font-weight:bold;         font-size:12pt;         left:10px;         bottom:10px;         z-Index:999;       }     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.layers.wmts");       dojo.require("esri.dijit.Scalebar");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");             function init() {           esri.config.defaults.io.proxyUrl = "http://<server name>/proxy.ashx";        var initExtent = new esri.geometry.Extent({"xmin":-20037508.343,"ymin":-8861125.013,"xmax":20037508.343,"ymax":8861125.013,"spatialReference":{"wkid":3587}});        var map = new esri.Map("map", {           wrapAround180: true,     extent: initExtent          });         var layerInfo = new esri.layers.WMTSLayerInfo({           identifier: "WorldTimeZones",           tileMatrixSet: "nativeTileMatrixSet",           format: "png"         });         var options = {           serviceMode: "RESTful",           layerInfo: layerInfo         };         var wmtsLayer = new esri.layers.WMTSLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS",options);         map.addLayer(wmtsLayer);       }       dojo.addOnLoad(init);     </script>   </head>     <body class="claro">     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" >       </div>     </div>   </body>  </html>

FYI: Please remember to change the proxy url to yours.

All comments

derekswingley1

Have you tried modifying one of the WMTS samples from the SDK to use your ArcGIS Server service? I do not know of a public AGS 10.1 WMTS service.

SiqiLi

Here is the example with 10.1 sample WorldTimeZones service.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior     of the samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"     />     <title>       Add WMTS Layer     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       .esriScalebar{         padding: 20px 20px;       }       #map{         padding:0;       }       #citationInfo{         position:absolute;         color:black;         font-weight:bold;         font-size:12pt;         left:10px;         bottom:10px;         z-Index:999;       }     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.layers.wmts");       dojo.require("esri.dijit.Scalebar");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");             function init() {           esri.config.defaults.io.proxyUrl = "http://<server name>/proxy.ashx";        var initExtent = new esri.geometry.Extent({"xmin":-20037508.343,"ymin":-8861125.013,"xmax":20037508.343,"ymax":8861125.013,"spatialReference":{"wkid":3587}});        var map = new esri.Map("map", {           wrapAround180: true,     extent: initExtent          });         var layerInfo = new esri.layers.WMTSLayerInfo({           identifier: "WorldTimeZones",           tileMatrixSet: "nativeTileMatrixSet",           format: "png"         });         var options = {           serviceMode: "RESTful",           layerInfo: layerInfo         };         var wmtsLayer = new esri.layers.WMTSLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS",options);         map.addLayer(wmtsLayer);       }       dojo.addOnLoad(init);     </script>   </head>     <body class="claro">     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" >       </div>     </div>   </body>  </html>

FYI: Please remember to change the proxy url to yours.

derekswingley1

Here is the example with 10.1 sample WorldTimeZones service.

Thanks for posting that. My only note would be to use sampleserver6 as opposed to servicesbeta4 as sampleserver6 is a 10.1 final AGS instance while servicesbeta4 is a 10.1 beta 2 instance: http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS

CoreyAlix

Thank you for that example. If you extend the example by adding the following layer to the map you'll find that there is misalignment:

esri.layers.ArcGISTiledMapServiceLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer", {
    opacity: 0.5
});

I believe this is because the WMTS resolutions are calculated based on 0.28mm/pixel instead of 96 DPI even though the services abstract states, "the tile matrix set that has scale values calculated based on the dpi defined by ArcGIS Server tiled map service. The current tile dpi is 96":

layer.tileInfo.dpi 96
wmtsLayer.tileInfo.dpi 90.71428571428571

Is there a solution to this problem?

I've posted the code here (doesn't run because of the proxy requirement):

http://jsfiddle.net/F2p76/1/

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.