1. 查找出图层,添加到layerList(默认选中)
this.viewer.scene.layers.layerQueue.forEach(item => {
this.layerList.push({
id:item.id,
name: item.name,
checked: true,
});
})
2. 用 el-checkbox渲染按钮
<el-checkbox-group v-model="leftcheckboxs">
<el-checkbox style="padding: 5px 0px;"
v-for="(item,index) in layerList"
:label="item.name"
:key="item.id"
:checked="item.checked"
@change="setMap(item)"
>
<span style="color:#EDEDED;">{{ item.name }}</span>
</el-checkbox>
</el-checkbox-group>
这里只有el-checkbox-group能v-model
3. el-checkbox-group的v-model="leftcheckboxs"返回选中的按钮的图层的名称(数组),也可以手动更改数组里的名称用于显示
4.分屏显示(主要代码)
this.viewer.scene.multiViewportMode = Cesium.MultiViewportMode.HORIZONTAL;
this.viewer.scene.layers.find(item.name).setVisibleInViewport(0, true);
## 这里的 0 是左边显示 true为显示