el-checkbox结合cesium分屏图层(主要代码)

368 阅读1分钟

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为显示