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: [email protected]
* @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: {
//清除所有layer
clearALl(){
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)的解决办法，确实能删除所有图层。
标签：map,layer,ol,20,source,Openlayers,图层 From： https://blog.csdn.net/cuclife/article/details/143041668