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

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

（本专辑持续更新中）

1.基础知识准备

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

在 OpenLayers 中，地图图层控制是一个常见的需求，包括图层的切换、显示隐藏、图层排序等。在 Vue 3 中结合 Element UI 或其他 UI 库（如 Ant Design Vue、Vuetify 等）来实现这些功能可以为用户提供一个友好的交互界面。

下面将介绍如何使用 OpenLayers、Vue 3 和 Element UI 来制作一个地图图层控制的组件。

1. 安装必要的库

首先，你需要在项目中安装 OpenLayers、Vue 3 和 Element UI（或其他 UI 库）。

npm install ol vue@next element-plus
1

2. 创建地图容器和图层控制组件

在你的 Vue 组件中，你可以创建一个地图容器和一个用于控制图层的组件。

<template>
  <div ref="mapContainer" class="map-container"></div>
  <el-tree
    :data="layersData"
    node-key="id"
    ref="layersTree"
    @check-change="handleCheckChange"
    show-checkbox
  ></el-tree>
</template>

<script>
import { onMounted, ref } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

export default {
  name: 'MapComponent',
  setup() {
    const mapContainer = ref(null);
    const layersData = ref([
      { id: 1, label: 'OpenStreetMap', visible: true },
      // 其他图层数据
    ]);
    let map;

    onMounted(() => {
      const osmLayer = new TileLayer({
        source: new OSM(),
      });

      map = new Map({
        target: mapContainer.value,
        layers: [osmLayer],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    });

    function handleCheckChange(data, checked, indeterminate) {
      const layerId = data.id;
      // 根据图层 ID 控制图层的显示和隐藏
    }

    return {
      mapContainer,
      layersData,
      handleCheckChange,
    };
  },
};
</script>

<style>
.map-container {
  width: 100%;
  height: 400px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

3. 控制图层的显示和隐藏

在 handleCheckChange 函数中，你可以根据图层的 ID 来控制图层的显示和隐藏。你需要维护一个图层和 OpenLayers 图层对象的映射关系，然后在该函数中切换图层的可见性。

let layersMap = {
  1: osmLayer,
  // 其他图层
};

function handleCheckChange(data, checked, indeterminate) {
  const layerId = data.id;
  const layer = layersMap[layerId];
  if (layer) {
    layer.setVisible(checked);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

4. 图层排序

图层排序可以通过调整 map.getLayers() 返回的图层数组的顺序来实现。你可以添加一个按钮来触发图层排序的操作。

<template>
  <!-- ... -->
  <el-button @click="sortLayers">排序图层</el-button>
</template>

<script>
// ...

export default {
  // ...
  methods: {
    sortLayers() {
      const layers = map.getLayers().getArray().slice();
      // 对 layers 数组进行排序
      layers.sort((a, b) => {
        // 根据你的排序规则进行比较
      });
      // 设置排序后的图层数组
      map.getLayers().setArray(layers);
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5. 结合 Element UI 的 Tree 组件

在上面的例子中，已经使用了 Element UI 的 Tree 组件来展示图层，并通过 checkbox 来控制图层的显示和隐藏。你可以根据需要调整 Tree 组件的属性和事件来适应你的应用场景。

注意事项

• 确保 OpenLayers、Vue 3 和 Element UI 的版本兼容。
• 在实际项目中，可能需要处理更多的边界情况和性能优化。
• 如果使用的是 Vue 3 的 Composition API，注意正确地使用 ref 和 reactive 来管理状态。
• 图层控制和排序的逻辑可能会根据你的具体需求而有所不同，上面的例子只是一个基本的实现。

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
    );
}
1
2
3
4
5
6
7
8
9
10

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: [],
    },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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)
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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)
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20