当前位置:   article > 正文

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

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,注意正确地使用 refreactive 来管理状态。
  • 图层控制和排序的逻辑可能会根据你的具体需求而有所不同,上面的例子只是一个基本的实现。

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/110020?site
推荐阅读
相关标签
  

闽ICP备14008679号