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

Openlayers高级交互（3/20）：动态添加 layer 到 layerGroup，并动态删除

news 2025/5/15 9:53:39

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: 2909222303@qq.com
* @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>

查看全文

http://www.mrgr.cn/news/53530.html