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-tooltip class="box-item" effect="dark" content="图层控制" placement="top-start"> -->
        <el-button type="primary" icon="CopyDocument"/>
        <!-- </el-tooltip> -->
      </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)
      }
    }