SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!doctype html>
<html lang="en">
 <head>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
	<style>
		html,
		body,
		.map {
			height: 100%;
			width: 100%;
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js">

	</script>
	<title>WMTS加载</title>
</head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        //通过坐标系 计算各个缩放级别的分辨率
        var projection = ol.proj.get('EPSG:4326'); // 坐标系
        var projectionExtent = projection.getExtent(); // 坐标系四至
        var tileWidth = 256 // 瓦片宽度，一般都是256
        var projectionWidth = ol.extent.getWidth(projectionExtent) / tileWidth;  // 坐标系的宽度
        var resolutions = new Array(18); // 分辨率组
        var matrixIds = new Array(18); // 缩放级别组
        var maxZoom = 21
        for (var z = 0; z < maxZoom; ++z) {
            //分辨率和matrixIds数组
            resolutions[z] = projectionWidth / Math.pow(2, z);
            matrixIds[z] = z - 1;
        }

        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url:'https://gatewayproxy-jcpt.mwr.cn/riverv/wmts100?k=r8O8WtvCRhIzRo48WI1sqw==',
                        layer: 'river_v',  
                        matrixSet: 'Custom_river_v', 
                        style:'default',
                        format: "image/png",
                        tileGrid: new ol.tilegrid.WMTS({
                            origin: ol.extent.getTopLeft(projectionExtent),// 从服务说明中获取
                            resolutions: resolutions,
                            matrixIds: matrixIds,
                        }),
                        wrapX: true
                    })
                }),
            ],
            view: new ol.View({
                projection: projection,
                center: [106.42, 26.35],
                zoom: 7
            })
        });
    </script>
  </body>
</html>