SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';

const style = {
    version: 8,
    name: "tianditu",
    sprite : "mapbox://sprites/mapbox/streets-v8",
    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    sources: {
        arcgis: {
            type: 'raster',
            tiles: [
                'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            ],
            tileSize: 256
        },
        nantong: {
            type: 'raster',
            tiles: [
                'https://114.217.22.148:6080/arcgis/rest/services/DTVector/MapServer/tile/{z}/{y}/{x}'
            ],
            tileSize: 256
        }
    },
    layers: [
        {
            id: 'arcgis',
            type: 'raster',
            source: 'arcgis',
            minzoom: 0,
            maxzoom: 16
        },
        {
            id: 'nantong',
            type: 'raster',
            source: 'nantong',
            minzoom: 0,
            maxzoom: 16
        }
    ]
}

const map = new mapboxgl.Map({
    container: 'map',
    style: style,
    // center: [120.92968940734863, 31.94087343674732],
    // zoom: 14,
    bounds: new mapboxgl.LngLatBounds([120.90021438225001, 31.931593144963752], [120.94139714475004, 31.950795355318167])
});

map.on('load', () => {
    
})

<div id='map'></div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}