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 = []
arr.forEach(id => {
const layer = style.layers.find(layer => layer.id === id)
layers.push(layer)
})
arr.forEach(id => {
map.removeLayer(id)
})
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
}