当前位置：首页 > article >正文

106.在 Vue3 中使用 OpenLayers 动态添加 Layer 到 LayerGroup，并动态删除

article 2025/3/26 10:18:53

一、前言

在 Web GIS（地理信息系统）开发中，OpenLayers 作为一款强大的开源地图库，广泛应用于二维地图的渲染、交互和分析。在 Vue3 结合 OpenLayers 的开发过程中，我们经常需要动态管理图层（Layer），比如按需添加或删除某些图层。

本篇文章将介绍如何在 Vue3 中使用 OpenLayers 以 Composition API 的方式实现动态管理 LayerGroup，包括添加、删除 Layer，并进行代码优化。

二、技术栈

Vue 3 + Composition API
OpenLayers
Element Plus（用于 UI 交互）
Vite（开发环境）

三、实现效果

我们将实现如下功能：

地图加载：初始化 OpenLayers 地图。
LayerGroup 管理：创建 LayerGroup，并动态管理图层。
添加图层：点击按钮，向 LayerGroup 中添加图层。
删除图层：点击按钮，动态从 LayerGroup 中移除图层。

最终的效果如下：

四、完整代码

1. 项目初始化

如果你还没有 Vue 3 项目，可以使用 Vite 快速创建一个 Vue 3 项目：

npm create vite@latest vue3-openlayers-demo --template vue
cd vue3-openlayers-demo
npm install

安装 OpenLayers 依赖：

npm install ol

安装 Element Plus（可选）：

npm install element-plus

2. 代码实现

2.1 `App.vue` 代码

<!--
 * @Author: 彭麒
 * @Date: 2025/3/25
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->  
<template>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers动态添加layer到layerGroup，并动态删除</div>
    </div>
    <h4>
			<span v-for="(item, index) in pointData" :key="index">
				<el-button type="danger" v-show="item.isShow" size="small" @click="removegpLayer(item)">
					删除{{ item.myname }}
				</el-button>
				<el-button type="primary" v-show="!item.isShow" size="small" @click="addgpLayer(item)">
					添加{{ item.myname }}
				</el-button>
			</span>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import GroupLayer from "ol/layer/Group";
import OSM from "ol/source/OSM";
import LayerVector from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Style from "ol/style/Style";
import Circle from "ol/style/Circle";

const pointData = ref([
  {
    myname: "layer1",
    point: [114.064839, 22.548857],
    isShow: false,
  },
  {
    myname: "layer2",
    point: [114.074839, 22.548857],
    isShow: false,
  },
]);

const map = ref(null);
const geoGroupLayer = new GroupLayer({
  layers: [],
  zIndex: 3,
  myname: "geoGroupLayer",
});

const removegpLayer = (data) => {
  data.isShow = !data.isShow;
  const layers = geoGroupLayer.getLayers().getArray();
  for (let i = layers.length - 1; i >= 0; i--) {
    if (layers[i].get("myname") === data.myname) {
      layers.splice(i, 1);
    }
  }
  map.value.removeLayer(geoGroupLayer);
  map.value.addLayer(geoGroupLayer);
};

const addgpLayer = (data) => {
  map.value.removeLayer(geoGroupLayer);
  let pointFeature = new Feature({
    geometry: new Point(data.point),
  });
  let pointsource = new VectorSource({
    wrapX: false,
  });
  pointsource.addFeature(pointFeature);
  let vector = new LayerVector({
    myname: data.myname,
    source: pointsource,
    style: new Style({
      fill: new Fill({
        color: [255, 255, 255, 0.00001],
      }),
      stroke: new Stroke({
        width: 2,
        color: "#00f",
      }),
      image: new Circle({
        radius: 10,
        fill: new Fill({
          color: "#ff00ff",
        }),
      }),
    }),
  });
  geoGroupLayer.getLayers().getArray().push(vector);
  data.isShow = !data.isShow;
  map.value.addLayer(geoGroupLayer);
};

const initMap = () => {
  let raster = new Tile({
    source: new OSM(),
    myname: "OSM",
  });
  map.value = new Map({
    target: "vue-openlayers",
    layers: [raster],
    view: new View({
      projection: "EPSG:4326",
      center: [114.064839, 22.548857],
      zoom: 13,
    }),
  });
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>