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>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body onload="onload()">
    <div id="map" class="map"></div>
    <script type="text/javascript">
function loadGeoJson(){
  return axios.get('https://ysbd.gzdata.com.cn:9866/xzqh-proxy/Gis/rest/services/xzqh/queryserver/Query?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ6aG91YmFuIiwiY3JlYXRlZCI6MTY0MDkxNDk3ODIxMiwiZXhwIjoxNzA0MDM4NDAwfQ.ga50eYdSDFfTtefizoSr0cDHb1PjuPEK5IzvVkxvIapUPMI2Th1FNzKwrdy-GAr00ZBFCYB5yfDZMETBzKwvVA&layerId=4&where=1=1')
}
async function onload() {
    console.log(1)
        //通过坐标系 计算各个缩放级别的分辨率
        let res = await loadGeoJson()

                console.log(2)
        let TDTYX = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                        url: 'http://t{0-7}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5853c0e92459c816623625d1c54d4593',
                    projection: "EPSG:4326",
                     zIndex:1
                    }),
                });

        let TDTYXzhuji = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                        url: 'http://t{0-7}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5853c0e92459c816623625d1c54d4593',
                    projection: "EPSG:4326",
                     zIndex:1
                    }),
                });
        let arr = [{
            type: 'Feature',
            "geometry":{ 
            "type": "Polygon",
            "coordinates": [
                            [ 
                                [180, -90], 
                                [-180, -90], 
                                [180, 90], 
                                [180, -90], 
                                [-180, -90] 
                            ], 
                            res.data.result.features[0].geometry.coordinates[0]
                           ]
            }
        }]
        let styles = new ol.style.Style({
            fill: new ol.style.Fill({
            color: 'rgba(255,255,255,0.5)',
            }),
            stroke: new ol.style.Stroke({
            width: 2,
            color:  'rgba(52, 224, 255, 1)'
            })
        })
        let  source = new ol.source.Vector({
            wrapX: true //数据是否在地图上面重复
        })
        arr.forEach((item)=>{
            source.addFeatures(new ol.format.GeoJSON().readFeatures(item))
        }); 

        let layer =  new ol.layer.Vector({
            source: source,
            style: styles,
            zIndex:99999999
        })

        var map = new ol.Map({
            target: 'map',
            layers: [
                layer,
                TDTYX,
                TDTYXzhuji,
                
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [106.42, 26.7],
                zoom: 7,
            })
        });
        
}
    </script>
  </body>
</html>