Vue + Openlayers入门教程（三）：图层管理功能

一、技术栈

Vue 3 + Typescript +Openlayers 7 + Element plus

二、组件代码

<template>
  <div class="layerManageDiv">
    <el-button @click="getLayerList"> 图层管理 </el-button>
    <el-dialog
      v-model="dialogTableVisible"
      title="图层列表"
      width="30%"
      destroy-on-close
      draggable
    >
      <el-table
        ref="multipleTableRef"
        :data="layerAttList"
        @cell-mouse-enter="handleCellEnter"
        @cell-mouse-leave="handleCellLeave"
        @selection-change="checkboxChange"
      >
        <el-table-column label="名称">
          <template #default="scope">
            <el-input
              v-if="scope.row.show"
              v-model="scope.row.layerName"
            ></el-input>
            <span v-if="!scope.row.show">{{ scope.row.layerName }}</span>
          </template>
        </el-table-column>
        <el-table-column property="layerType" label="类型" />
        <el-table-column label="显示" type="selection"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { Map } from "ol";
import bus from "@/utils/bus.ts";
import { nextTick, ref } from "vue";
import { ElTable } from "element-plus";

let mapCopy: Map;
let layerAttList: LayerAtt[] = [];
let checkedArr = ref<String[]>([]); //接收复选框的值
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); //获取el-table元素
const dialogTableVisible = ref<boolean>(false); //弹窗的可视性
//监听map数据
bus.on("mapToChecked", (res: Map) => {
  // 传参由回调函数中的形参接受
  mapCopy = res;
});
//定义一个类，接收图层属性
class LayerAtt {
  layerName: String = "name";
  layerType: String = "type";
  layerTitle: String = "title";
  layerVisible: Boolean = false;
  show: Boolean = false;

  //构造函数
  constructor(name: String, type: String, title: String, visible: Boolean) {
    this.layerName = name;
    this.layerType = type;
    this.layerTitle = title;
    this.layerVisible = visible;
    this.show = false;
  }
}
//获取当前所有图层列表
const getLayerList = () => {
  if (layerAttList.length != 0) {
    layerAttList.length = 0;
  }
  mapCopy.getAllLayers().forEach((item) => {
    layerAttList.push(
      new LayerAtt(
        item.get("name"),
        item.get("type"),
        item.get("title"),
        item.getVisible()
      )
    );
  });
  dialogTableVisible.value = true;
  // 同步更新了，还没有刷新出来组件
  nextTick(() => {
    checkboxToLayer(layerAttList);
  });
};
//鼠标移入
const handleCellEnter = (row: LayerAtt) => {
  row.show = true;
};
//鼠标移出
const handleCellLeave = (row: LayerAtt) => {
  row.show = false;
};
//复选框发生改变
const checkboxChange = (val: LayerAtt[]) => {
  if (checkedArr.value.length != 0) {
    checkedArr.value.length = 0; //清空复选框内容
  }
  //从复选框获取选中图层的属性:layerTitle
  for (let i = 0; i < val.length; i++) {
    checkedArr.value.push(val[i].layerTitle);
  }
  let length = mapCopy.getAllLayers().length; //获取map图层数组长度
  for (let i = 0; i < length; i++) {  //遍历mapCopy图层
     //通过getAllLayers方法获取图层title
    let mapCopyLayerName = mapCopy.getAllLayers()[i].get("title"); 
    if (checkedArr.value.length == 0) {
      //复选框都未选中状态不进入循环
      mapCopy.getAllLayers()[i].setVisible(false);
    }
    for (let checkedLayerName of checkedArr.value) {
      //遍历复选框状态
      if (checkedLayerName == mapCopyLayerName) {
        //如果选中的复选框的值与地图图层title相同，就将图层可视性设为true
        mapCopy.getAllLayers()[i].setVisible(true);
        break; //if判断成功则跳出for of循环
      } else {
        mapCopy.getAllLayers()[i].setVisible(false);
      }
    }
  }
};
//复选框状态与图层可视性关联
const checkboxToLayer = (rows: LayerAtt[]) => {
  // 如果图层一开始的可视性为真，就将复选框勾选上
  if (rows) {
    rows.forEach((row) => {
      if (row.layerVisible) {
        multipleTableRef.value.toggleRowSelection(row, undefined);
      }
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
</script>
<style></style>