SOURCE

console 命令行工具 X clear

                    
>
console
let map = null

const Main = {
    data() {
        return {
            tree: [{
                id: 'polygon-red',
                label: '红',
            },
            {
                id: 'polygon-green',
                label: '绿',
            },
            {
                id: 'polygon-blue',
                label: '蓝',
            }],
            defaultProps: {
                label: 'label'
            }
        }
    },
    mounted() {
        map = new mapboxgl.Map({
            container: 'map',
            zoom: 7,
            center: [119.3, 29.7],
            pitch: 0,
            bearing: 0,
            style: 'https://openmap.tech/styles/streets.json'
        });

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

    },
    methods: {
        setLayer() {
            const feature = {
                type: 'Feature',
                geometry: {
                    type: "Polygon",
                    coordinates: [[
                        [119.1, 29.6],
                        [119.1, 30.1],
                        [120.1, 30.1],
                        [120.1, 29.6],
                        [119.1, 29.6]
                    ]]
                }
            }

            map.addSource('polygon', {
                type: 'geojson',
                data: feature
            })

            map.addLayer({
                id: 'polygon-red',
                source: 'polygon',
                type: 'fill',
                'layout': {},
                paint: {
                    'fill-color': 'red',
                    'fill-opacity': 0.6
                }
            })

            map.addLayer({
                id: 'polygon-green',
                source: 'polygon',
                type: 'fill',
                'layout': {},
                paint: {
                    'fill-color': 'green',
                    'fill-opacity': 0.6
                }
            })

            map.addLayer({
                id: 'polygon-blue',
                source: 'polygon',
                type: 'fill',
                'layout': {},
                paint: {
                    'fill-color': 'blue',
                    'fill-opacity': 0.6
                }
            })
        },
        handleDragEnd() {
            const arr = []
            console.log(this.tree)
            this.tree.forEach(t => {
                arr.push(t.id)
            })

            const style = map.getStyle()
            const layers = []

            // 1. 获取要排序的图层
            arr.forEach(id => {
                const layer = style.layers.find(layer => layer.id === id)
                layers.push(layer)
            })

            // 2. 移除原来的图层
            arr.forEach(id => {
                map.removeLayer(id)
            })

            // 3. 按顺序重新添加
            layers.forEach(layer => {
                map.addLayer(layer)
            })
        },
        allowDrop(draggingNode, dropNode, type) {
            return type !== 'inner'
        },
    }
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<div id="app">
	<div id="map"></div>

	<el-tree ref="tree" class="tree" :data="tree" node-key="id" default-expand-all draggable :allow-drop="allowDrop" @node-drag-end="handleDragEnd">
	</el-tree>
</div>
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.tree {
    position: absolute;
    z-index: 11;
    left: 10px;
    top: 10px;
    max-height: calc(100% - 20px);
    width: 60px;
    background-color: white;
    overflow: auto
}

本项目引用的自定义外部资源