SOURCE

> You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

mapboxgl.accessToken = 'pk.eyJ1IjoibGVla2U5OCIsImEiOiJjazNzZGxlMHQwNjAxM21tdHh3NmJyOWJ0In0.nhCMjub5PhQqzFOSNB9uMw';

const { createApp, ref, onMounted } = Vue

createApp({
    setup() {
        const roiBounds = [
            [113.837, 22.153],
            [114.451, 22.153],
            [114.451, 22.563],
            [113.837, 22.563],
            [113.837, 22.153]
        ];
        const worldBounds = [
            [
                [-180, 85],
                [180, 85],
                [180, -85],
                [-180, -85],
                [-180, 85]
            ],
            roiBounds
        ];

        onMounted(() => {
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v10',
                center: [114.144, 22.358],
                zoom: 9
            });
            map.on('load', () => {
                // 定义感兴趣区域
                const roi = {
                    type: 'Feature',
                    geometry: {
                        type: 'Polygon',
                        coordinates: [
                            roiBounds
                        ]
                    }
                };

                // 定义整个世界区域（用于遮罩）
                const world = {
                    type: 'Feature',
                    geometry: {
                        type: 'Polygon',
                        coordinates: worldBounds
                    }
                };

                // 从世界区域中排除感兴趣区域，创建遮罩
                const mask = turf.difference(world, roi);

                // 添加遮罩图层
                map.addSource('mask', {
                    type: 'geojson',
                    data: mask
                });

                map.addLayer({
                    id: 'mask-layer',
                    type: 'fill',
                    source: 'mask',
                    paint: {
                        'fill-color': '#9CA3AF',
                        'fill-opacity': 1
                    }
                });
            });
        })

        return {}
    }
}).mount('#app')

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

* { margin: 0; padding: 0; }
html, body, #app { width: 100%; height: 100%; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }