layerGroup 是 OpenLayers 库中的一个类，用于创建图层组。图层组允许您将多个图层组合在一起，并作为一个整体来控制它们的可见性和其他属性。本示例动态添加layer到layerGroup，并动态删除。
效果图
| 专栏名称 | 内容介绍 |
|---|---|
| Openlayers基础实战 （72篇） | 专栏提供73篇文章，为小白群体提供基础知识及示例演示，能解决基础的开发问题 |
| Openlayers高级应用（20篇） | 专栏提供20篇文章， 为有经验的开发者提供示例参考，对开发指导意义很大 |
| Openlayers全面教程（300+） | 专栏提供300+篇文章示例， 可以全面的学习Openlayers，适合系统学习及各类开发者 |
配置说明
1）环境配置参考：https://blog.csdn.net/cuclife/article/details/126195754
2）将示例源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。
源代码
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @First published in CSDN
* @First published time: 2024-10-19
*/
<template>
<div class="container">
<h3>vue+openlayers: 动态添加layer到layerGroup，并动态删除</h3>
<p>大剑师兰特, 还是大剑师兰特</p>
<h4>
<span v-for="(item,index) in pointData" :key="index">
<el-button type="danger" v-show="item.isShow" size="mini" @click='removegpLayer(item)'>删除{{item.myname}}
</el-button>
<el-button type="primary" v-show="!item.isShow" size="mini" @click='addgpLayer(item)'>添加{{item.myname}}
</el-button>
</span>
</h4>
<div id="vue-openlayers"></div>
</div>
</template>
<script>
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'
export default {
data() {
return {
pointData: [{
myname: 'layer1',
point: [114.064839, 22.548857],
isShow: false,
},
{
myname: 'layer2',
point: [114.074839, 22.548857],
isShow: false,
},
],
map: null, // 地图
draw: null,
geoGroupLayer: new GroupLayer({
layers: [],
zIndex: 3,
myname:"geoGroupLayer",
}),
}
},
methods: {
removegpLayer(data) {
data.isShow = !data.isShow;
this.geoGroupLayer.getLayers().getArray().forEach((layer, index, array) => {
if (layer.get('myname') == data.myname) {
array.splice(index, 1)
}
})
this.map.removeLayer(this.geoGroupLayer);
this.map.addLayer(this.geoGroupLayer)
},
addgpLayer(data) {
this.map.removeLayer(this.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,
// Vector层显示的样式
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'
})
}),
})
});
this.geoGroupLayer.getLayers().getArray().push(vector);
data.isShow = !data.isShow;
this.map.addLayer(this.geoGroupLayer)
},
initMap() {
let raster = new Tile({
source: new OSM(),
myname: "OSM"
});
this.map = new Map({
target: "vue-openlayers",
layers: [raster],
view: new View({
projection: "EPSG:4326",
center: [114.064839, 22.548857],
zoom: 13
})
})
},
},
mounted() {
this.initMap()
}
}
</script>
<style scoped>
.container {
width: 1000px;
height: 660px;
margin: 10px auto;
border: 1px solid #42B983;
}
#vue-openlayers {
width: 960px;
height: 480px;
margin: 0 auto;
border: 1px solid #42B983;
position: relative;
}
</style>