OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件，图层切换，显示隐藏，图层排序

本文将介绍openlayers中地图图层控制的组件制作方法，图层切换，显示隐藏，图层排序，在vue3中使用element，tree等组件。

（本专辑持续更新中）

1.知识点

1. 官方的图层组案例Layer Groups，首先看一下官方的图层控制是怎么回事。
2. 官方的自定义控件的例子Custom Controls，了解自定义控件的用法。
3. 核心组件基本知识

2.准备图层

1. 这里使用天地图，以XYZ的方式引入。

function getTDXYZUrl(type: string) {
    return (
        "http://t" +
        Math.round(Math.random() * 7) +
        ".tianditu.com/DataServer?T=" +
        type +
        "&x={x}&y={y}&l={z}&tk=" +
        myTDkey
    );
}

2. 图层的数据结构（模拟真实使用场景，方便图层的管理）。

const layersData = [
    {
        id: "1",
        label: "天地图",
        url: "",
        opacity: 100,
        visible:true,
        children: [
            {
                id: "4",
                label: "矢量注记",
                url: getTDXYZUrl("cva_w"),
                opacity: 100,
                visible:true,
                children: [],
            },
            {
                id: "3",
                label: "矢量底图",
                url: getTDXYZUrl("vec_w"),
                opacity: 80,
                visible:true,
                children: [],
            },

        ],
    },
    {
        id: "2",
        label: "影像底图",
        url: getTDXYZUrl("img_w"),
        opacity: 100,
        visible:true,
        children: [],
    },
];

3. 把图层数据转化成，openlayers的图层类。

function makeTree(layersData: Array<IlayersData>) {
    let rootLayers: (LayerGroup | TileLayer<XYZ>)[] = [];
    layersData.forEach((e) => {
        if (e.children.length > 0) {
            let group = new LayerGroup({
                properties: {
                    label: e.label,
                },
                opacity: e.opacity!/100,
                layers: makeTree(e.children),
                visible:e.visible,
            });
            rootLayers.unshift(group);

        } else {
            let layer = new TileLayer({
                source: new XYZ({
                    url: e.url,
                    projection: e.projection ?? "EPSG:3857",
                }),
                opacity: e.opacity!/100,
                properties: {
                    label: e.label,
                },
            });
            rootLayers.unshift(layer)
        }
    });
    return rootLayers
}

let layers = makeTree(layersData)
function initMap(optons: { target: HTMLElement }) {
    return new Map({
        layers: layers,
        target: optons.target as HTMLElement,
        view: new View({
            center: [0, 0],
            zoom: 2,
        }),
    });
}
export {
    initMap,layersData
}

4. 控件的html

  <div class="whr-vertical-control  " ref="my-vertical-control">
    <el-popover placement="left" :width="300" trigger="hover">
      <template #reference>
        
        <el-button type="primary" icon="CopyDocument"/>
        
      template>
      <template #default>
        <div>
          <div class="whr-popover-title">
            <div class="yigeshu">div>
            <div class="" style="margin-left: 5px;">图层控制div>

          div>
          <el-divider/>
          <div class="whr-popover-body">
            <el-tree node-key="label" :data="layerTreeData" :props="defaultProps" @check-change="layerVisibleControl"
                     :default-checked-keys="defaultCheckedLayers"
                     show-checkbox>
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}span>
                  <span style="width: 100px;" v-if="data.children.length == 0">
                     <el-slider v-model="data.opacity" size="small" @change="layerOpacityChange($event,data)"  />
                  span>
                span>


              template>
            el-tree>
          div>
        div>
      template>

    el-popover>
  div>

5. 初始化控件，加载地图。

	class MyVerticalControl extends Control {
      constructor(opt_options: any) {
        const options = opt_options || {};
        super({
          element: self.$refs["my-vertical-control"] as HTMLElement,
          target: options.target,
        });
      }
    }

    this.vercontrol = new MyVerticalControl({})
    this.map = initMap({target: this.$refs.map as HTMLElement})
    (this.map as Map).addControl(this.vercontrol as Control)

如果需要地图组件保活，可以把添加控件写在activated钩子里。

  activated() {
    (this.map as Map).addControl(this.vercontrol as Control);
  },

6. 控制图层显示隐藏和透明度，顺序也可以。

 	layerVisibleControl(data: Tree,
                 checked: boolean,
                 indeterminate: boolean) {
      console.log(data, checked, indeterminate)
      let currentLayer = this.map!.getAllLayers().filter(e => {
        return e.getProperties().label == data.label
      })
      if (currentLayer.length > 0) {
        currentLayer[0].setVisible(checked)
      }
    },
    layerOpacityChange($event,data){
      console.log($event,data)
      let currentLayer = this.map!.getAllLayers().filter(e => {
        return e.getProperties().label == data.label
      })
      if (currentLayer.length > 0) {
        currentLayer[0].setOpacity($event/100)
      }
    }