SOURCE

var url = "http://218.2.231.245//mapjs2/rest/services/MapJS/js_sldt_2017/MapServer/tile/{z}/{y}/{x}";
var url0 = "http://59.212.37.22/portal/mapserver/vmap/hn_bigdata_2018dt/getMAP?styleId=hn_bigdata_2018dtys2&token=279d3dec-e0b9-4e99-962f-3682a5f53144&x={x}&y={y}&l={z}";
var url1 = "http://59.212.37.22/portal/mapserver/label/hn_bigdata_2018dt/getData?styleId=hn_bigdata_2018dtys2&token=f85a97f6-fad4-4c04-aba3-3374064f5122&x={x}&y={y}&l={z}";
// var projection=new ol.proj.get("EPSG:4326");
var projection='EPSG:4326';

const projectionExtent = ol.proj.get(projection).getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(18);
const matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = z;
}

var projection1='EPSG:3857';
const projectionExtent1 = ol.proj.get(projection1).getExtent();
const size1 = ol.extent.getWidth(projectionExtent1) / 256;
const resolutions1 = new Array(18);
const matrixIds1 = new Array(18);
for (var z = 1; z < 19; ++z) {
    resolutions1[z] = size1 / Math.pow(2, z);
    matrixIds1[z] = z;
}
function getLayer(pro, url, layer, matrixSet) {
    const projection = pro
    const projectionExtent = ol.proj.get(projection).getExtent();
    const size = ol.extent.getWidth(projectionExtent) / 256;
    const resolutions = new Array(18);
    const matrixIds = new Array(18);
    for (var z = 1; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }
    return new ol.layer.Tile({
        opacity: 1.0,
        source: new ol.source.WMTS({
            // url: 'http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=3602668176205a735014c430d4bfd5c4',
            url,
            // layer: 'vec',
            layer,
            // matrixSet: 'c',
            matrixSet,
            format: 'tiles',
            style: 'default',
            projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            wrapX: true
        })
    })
}
function getLayer1 (pro) {
    const projection = pro
    const projectionExtent = ol.proj.get(projection).getExtent();
    const size = ol.extent.getWidth(projectionExtent) / 256;
    const resolutions = new Array(18);
    const matrixIds = new Array(18);
    for (var z = 1; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }
    return new ol.layer.Tile({
        opacity: 1.0,
        source: new ol.source.WMTS({
            url: 'http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=3602668176205a735014c430d4bfd5c4',
            layer: 'cva',
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            wrapX: true
        })
    })
}

var map = new ol.Map({
target: 'map',
layers: [
    getLayer('EPSG:3857', 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=3602668176205a735014c430d4bfd5c4', 'vec', 'w'),
    
    new ol.layer.Tile({
        source:  new ol.source.XYZ({  
            projection: projection,
            url: url
        }) 
    }),
    new ol.layer.Tile({
        opacity: 1.0,
        source: new ol.source.WMTS({
            url: 'http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=3602668176205a735014c430d4bfd5c4',
            layer: 'cva',
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            wrapX: true
        })
    }),
    // getLayer1('EPSG:4326')
    // new ol.layer.Tile({
    //     opacity: 1.0,
    //     source: new ol.source.WMTS({
    //         url: 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=3602668176205a735014c430d4bfd5c4',
    //         layer: 'cva',
    //         matrixSet: 'w',
    //         format: 'tiles',
    //         style: 'default',
    //         projection,
    //         tileGrid: new ol.tilegrid.WMTS({
    //         origin: ol.extent.getTopLeft(projectionExtent1),
    //         resolutions: resolutions1,
    //         matrixIds: matrixIds1
    //         }),
    //         wrapX: true
    //     })
    // }),
    // new ol.layer.Tile({
    //   opacity: 1.0,
    //   source: new ol.source.WMTS({
    //     url: 'http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=3602668176205a735014c430d4bfd5c4',
    //     layer: 'img',
    //     matrixSet: 'c',
    //     format: 'tiles',
    //     style: 'default',
    //     projection: projection,
    //     tileGrid: new ol.tilegrid.WMTS({
    //       origin: ol.extent.getTopLeft(projectionExtent),
    //       resolutions: resolutions,
    //       matrixIds: matrixIds
    //     }),
    //     wrapX: true
    //   }),
    //   visible: false
    // })
],
view: new ol.View({
    projection: projection1,
    center:  ol.proj.transform([119.163643,32.950944], "EPSG:4326", "EPSG:3857"),
    // center:[119.163643,32.950944],
    //  center:[109.72898,19.183274], // 海南
    //  center:[106.318775,30.113306],
    //  center : ol.proj.transform([117.229426, 39.077034], "EPSG:4326", "EPSG:3857"),
    zoom:10
    })
});

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

.map {
    height: 600px;
    width: 100%;
}