SOURCE

import Map from 'ol/Map';
import View from 'ol/View';
import { getWidth, getTopLeft } from 'ol/extent';
import TileLayer from 'ol/layer/Tile';
import { get as getProjection } from 'ol/proj';
import OSM from 'ol/source/OSM';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';

var matrixSet = 'EPSG:4326';
var projection = getProjection(matrixSet);
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
var maxValue = matrixSet == "EPSG:4326" ? 21 : 30;
var resolutions = [];
var matrixIds = [];
for (var i = 0; i <= maxValue; i++) {
    matrixIds[i] = matrixSet + ":" + i;
    this.resolutions[i] =
        size /
        Math.pow(2, matrixSet == "EPSG:4326" ? i + 1 : i);
}
var map = new Map({
    layers: [
        new TileLayer({
            source: new OSM(),
            opacity: 0.7
        }),
        new TileLayer({
            opacity: 0.7,
            source: new WMTS({
                url: 'https://192.168.3.157:8080/freexserver/htc/service/wmts',
                layer: 'bou2_4p',
                matrixSet: matrixSet,
                format: 'application/x-protobuf;type=mapbox-vector',
                projection: projection,
                tileGrid: new WMTSTileGrid({
                    origin: getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                style: 'default',
                wrapX: true
            })
        })
    ],
    target: 'map',
    view: new View({
        projection: projection,
        resolutions: resolutions,
        extent: '73.44696044921875,6.318641185760555,135.08583068847656,53.557926177978516',
        center: [0,0],
        zoom: 3
    }),
    wrapX: true
});

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

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