SOURCE

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

var colors = ['#FFF8B4', '#D3F299', '#9FE084', '#5ACA70', '#00AF53', '#00873A', '#006B31', '#004835', '#003829'].reverse();
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
        },
        ykBounds: {
            'type': 'geojson',
            'data': 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_gn.json'
        }
    },
    layers: [
        {
            id: 'arcgis',
            type: 'raster',
            source: 'arcgis',
            minzoom: 0,
            maxzoom: 22
        },
        // 三维面图层
        {
            'id': 'ykBounds_polygon3d',
            'type': 'fill-extrusion',
            'source': 'ykBounds', // reference the data source
            // 'source-layer': 'XZQZJ_YK', // 调用geoserver矢量切片服务时，必须要和geoserver图层名相同
            'layout': {
            },
            'paint': {
                'fill-extrusion-height': 1000,
                'fill-extrusion-opacity': 1,
                // 'fill-extrusion-color': 'rgba(0,0,255,0.6)',
                'fill-extrusion-color': [
                    'step',
                    ['get', 'value'],
                    colors[8], // any item where `someCountableProperty` is <= 3 will be displayed with this color
                    40,
                    colors[7], // any item where `someCountableProperty` is <= 3 will be displayed with this color
                    50,
                    colors[6], // any item where `someCountableProperty` is <= 3 will be displayed with this color
                    60,
                    colors[5], 
                    70,
                    colors[4], 
                    80,
                    colors[3],
                    90,
                    colors[2], 
                    100,
                    colors[1]
                ]
            }
        },
        // 三维边界选中图层
        {
            'id': 'ykBoundsLinesSelected',
            'type': 'fill-extrusion',
            'source': 'ykBounds', // reference the data source
            'layout': {
            },
            'paint': {
                'fill-extrusion-height': 1500,
                'fill-extrusion-base': 1200,
                'fill-extrusion-opacity': 1,
                'fill-extrusion-color': 'rgb(0,0,255)'
            },
            'filter': ["==", "value", 0]
        },
        // 行政区标签图层
        {
            'id': 'geojson-label',
            'type': 'symbol',
            'source': 'ykBounds',
            // 'source-layer': 'XZQZJ_YK', // 调用geoserver矢量切片服务时，必须要和geoserver图层名相同
            'layout': {
                'text-field': ['get', 'name'],
                'text-size': 16,
                'text-allow-overlap': false,
                'text-justify': 'center'
            },
            paint: {
                'text-color': 'rgb(0, 0, 0)',
                'text-halo-color': '#fff',
                'text-halo-width': 1.8
            }
        }
    ]
}

const map = new mapboxgl.Map({
    container: 'map',
    style: style,
    center: [120.109233,30.246411],
    zoom: 9.5,
    pitch:45
});
map.on('load', () => {
    map.resize()
    removeControls()
    // Start the animation.
    rotateCamera();

});
//鼠标移入事件
map.on('mouseenter', 'ykBounds_polygon3d', function(e) {
    map.getCanvas().style.cursor = 'pointer';
    //选择的要素高亮展示
    var feature = e.features[0];
    map.setFilter('ykBoundsLinesSelected', ['==', 'value', feature.properties.value]);
});

//鼠标移出事件
map.on('mouseleave', 'ykBounds_polygon3d', function(e) {
    map.getCanvas().style.cursor = '';
    map.setFilter('ykBoundsLinesSelected', ['==', 'value', 0]);
});
function rotateCamera() {
    map.easeTo({
    // pitch: 45,
    bearing: map.getBearing() + 2,
    // zoom: this.fitZoom,
    // center: this._featureCenter,
    // padding: {top: 10, bottom: 25, left: 15, right: 5},
    easing(t) {
        return t * (2 - t)
    }
    })
    requestAnimationFrame(rotateCamera);
};
function removeControls() {
    const controls = map._controls;
    map.removeControl(controls[0])
    controls.forEach(control => {
    // 去除logo控件
    if ('_updateLogo' in control) {
        map.removeControl(control)
    }
        
    // 去除attribute控件
    if ('_attribHTML' in control) {
        map.removeControl(control)
    }
    })
}

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

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