console 命令行工具 X clear
console
<!-- tianditu4490.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>WMTS(天地图) </title>

  <style type="text/css">
    html,body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    .mapContainer{
      width: 100%;
      height: 100%;
    }
  </style>

  <!--Styles-->
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.6/dijit/themes/soria/soria.css">
  <script type="text/javascript" src="https://js.arcgis.com/4.6/"></script>
</head>
<body class="soria">

<div id="map" class="mapContainer">
</div>

<script type="text/javascript">
  require(["dojo/dom",
      "dojo/on",
      "dojo/_base/declare",
      "dojo/json",
      "dojo/_base/lang",
      "dojo/_base/url",
      "dojo/string",
      "dojo/dom-construct",
      "dojo/number",
      "esri/Map",
      "esri/geometry/Extent",
      "esri/layers/support/TileInfo",
      "esri/layers/support/LOD",
      "esri/geometry/SpatialReference",
      "esri/geometry/Point",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/layers/WebTileLayer",
      "esri/layers/TileLayer",
      "esri/layers/MapImageLayer",
      "esri/core/urlUtils",
      "esri/core/JSONSupport",
      "dojo/domReady!"
    ],
    function (dom, on, declare, JSON, lang,url,string, domConstruct, number,
              Map,Extent,TileInfo,LOD,SpatialReference,Point,
              MapView,SceneView,WebTileLayer,TileLayer,MapImageLayer,urlUtils,JSONSupport) {
      // Create ogc.WMTSLayer custom layer
    //   var TiandituWMTSLayer = WebTileLayer.createSubclass([JSONSupport], {
    //     declaredClass: "TiandituWMTSLayer",
    //   });
    //   var options1 = {
    //     "urlTemplate": "https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=bca311832890921213735aa41ff0958e",
    //   };
    //   var layer1 = new TiandituWMTSLayer(options1);
      var layer2 = new WebTileLayer({//天地图影像
        "urlTemplate": "https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=bca311832890921213735aa41ff0958e",
        "copyright": "天地图影像"
      });
      var map = new Map({
        layers: [layer2]
      });
       var ext = new Extent({
              spatialReference: new SpatialReference({ wkid: 4326 })
            });
      var view = new MapView({
        container: "map",
        zoom: 5,
        center: [116.23, 39.57],
        map: map,
        extent: ext
      });
    //   map.add(layer2)
    });
</script>
</body>
</html>