深圳开发的相亲网站阿里巴巴数据分析官网
Openlayers项目中，经常会放置很多的图层，在业务操作的时候，会做出删除所有图层的行为。这里面给出了一个详细的方法，能够有效的解决 清除所有图层的问题。
效果图
| 专栏名称 | 内容介绍 |
|---|---|
| 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）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复度过高（超过60%）地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in xiaozhuanlan.com
* @Second published in CSDN
* @First published time: 2024-10-18
*/
<template><div class="container"><h3>vue+openlayers: 清空删除所有的图层 </h3><p>大剑师兰特，还是大剑师兰特</p><h4><el-button type="primary" size="mini" @click='showMap("World_Imagery")'>World_Imagery</el-button><el-button type="primary" size="mini" @click='showMap("World_Street_Map")'>World_Street_Map</el-button><el-button type="warning" size="mini" @click='clearALl()'>清除所有图层</el-button></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 XYZ from "ol/source/XYZ";export default {data() {return {map: null,source: new XYZ({crossOrigin:"anonymous", }),}},methods: {//清除所有layerclearALl(){ this.map.getLayers().getArray().slice(0).forEach((layer) => {if (layer) {this.map.removeLayer(layer);}});},showMap(x) {this.source.clear()let url='https://server.arcgisonline.com/ArcGIS/rest/services/'+x+'/MapServer/tile/{z}/{y}/{x}' this.source.setUrl(url);let showMaplayer = new Tile({source:this.source});this.map.addLayer(showMaplayer);},initMap() {this.map = new Map({target: "vue-openlayers",layers: [],view: new View({center: [13247019.404399557, 4721671.572580107],zoom: 3})})},},mounted() {this.initMap();this.showMap("World_Imagery");}}
</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>问题疑点与解决
目前使用的ol版本是7.0.0. 发现一个问题：
this.map.getLayers().getArray().forEach((layer) => {if (layer) {this.map.removeLayer(layer);}});
上述方式不能删除所有layer， 后来根据网上一个用户的解决方法，才出现了源代码中，添加slice(0)的解决办法，确实能删除所有图层。