06 使用WMTSLayer来实例化一个图层

问题描述：

现有一个支持WMTS的服务地址，地址具体信息如下：

以上信息展示此服务是一个地图服务，即MapServer结尾，然后此服务支持WMTS实例化。现有需求将此地图服务通过WMTSLayer实例化为一个图层，在前端渲染，下面介绍详细的操作步骤。

大概思路：

既然是实例化一个图层，其实大致流程和实例化其他类型图层都一致，就是通过相应的函数来实例化图层，然后通过map的add方法添加至前端显示。

操作步骤：

1、了解此服务的具体信息，包括url地址、是否支持WMTS、是否在前端正常查看等；

2、编写代码，实例化图层。代码参考4.11版本的demo代码，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>WMTSLayer - 4.11</title>
    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-layer-list {
            width: 310px;
        }
    </style>

    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
        var map, view;

        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WMTSLayer",
            "esri/widgets/LayerList"
        ], function(Map, MapView, WMTSLayer, LayerList) {
            layer = new WMTSLayer({
                url: "http://10.10.10.211:6080/arcgis/rest/services/demoservice/cd/MapServer/WMTS",
                activeLayer: {
                    id: "demoservice_cd"
                }
            });

            map = new Map({
                layers: [layer]
            });
            view = new MapView({
                container: "viewDiv",
                map: map
            });
            view.when(function() {
                view.extent = layer.fullExtent;
                var layerList = new LayerList({
                    view: view
                });
                view.ui.add(layerList, "bottom-left");
            });
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

上述代码中的以下部分是操作步骤的重点，接下来将详细讲解：