SOURCE

const style = {
  "version": 8,
  "sprite": "https://zhejiang.tianditu.gov.cn/vtiles/icons/streets",
  "glyphs": "https://zhejiang.tianditu.gov.cn/vtiles/fonts/{fontstack}/{range}.pbf",
  "sources": {
    "img-tdt": {
      "type": "raster",
      "tiles": [
        "https://t0.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8b0ff5f7528083f5add5bee65cb97277",
      ],
      "tileSize": 256
    },
    "img-china": {
      "type": "raster",
      "tiles": [
        "https://openmap.tech/wmts/China/CGCS2000/{z}/{x}/{y}.png"
      ],
      "tileSize": 256
    },
    "img-zhejiang": {
      "type": "raster",
      "tiles": [
        "https://openmap.tech/wmts/ZheJiang/CGCS2000/{z}/{x}/{y}.png"
      ],
      "tileSize": 256,
      "maxzoom": 15
    },
    "img-hangzhou": {
      "type": "raster",
      "tiles": [
        "https://openmap.tech/wmts/HangZhou/CGCS2000/{z}/{x}/{y}.png"
      ],
      "tileSize": 256
    },
    "img-test": {
      "type": "raster",
      "tiles": [
        "http://110.42.140.71:8889/arcgis/rest/services/CGCS2000_China_test/MapServer/WMTS/tile/1.0.0/CGCS2000_China_test/default/default028mm/{z}/{y}/{x}.png"
      ],
      "tileSize": 256
    }
  },
  "layers": [
    {
      "id": "tdt",
      "type": "raster",
      "source": "img-tdt",
      "minzoom": 1,
      "maxzoom": 20
    },
    {
      "id": "china",
      "type": "raster",
      "source": "img-china",
      "minzoom": 1,
      "maxzoom": 20
    },
    {
      "id": "zhejiang",
      "type": "raster",
      "source": "img-zhejiang",
      "minzoom": 1,
      "maxzoom": 20
    },
    {
      "id": "hangzhou",
      "type": "raster",
      "source": "img-hangzhou",
      "minzoom": 1,
      "maxzoom": 20
    },
    {
      "id": "test",
      "type": "raster",
      "source": "img-test",
      "minzoom": 1,
      "maxzoom": 20
    }
  ],
  "id": "img"
}

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 9,
    center: [120.1, 30.3],
    pitch: 0,
    bearing: 0,
    style,
    hash: true,
    maxZoom: 19
});

function change(event, layerName) {
    const visible = event.checked ? 'visible' : 'none'
    map.setLayoutProperty(layerName, 'visibility', visible)
}

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

<div class="layer">
  <input type="checkbox" onclick="change(this, 'tdt')" />天地图
  <input type="checkbox" checked onclick="change(this, 'china')" />国家
  <input type="checkbox" checked onclick="change(this, 'zhejiang')">浙江
  <input type="checkbox" checked onclick="change(this, 'hangzhou')">杭州
  <input type="checkbox" checked onclick="change(this, 'test')">测试
</div>

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.layer {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 111;
    background: white;
    padding: 12px;
}