临沂外贸网站建设,个人两字印章在线制作网站,备案成功的网站,网站制作公司 恶意Openlayers项目中#xff0c;经常会放置很多的图层#xff0c;在业务操作的时候#xff0c;会做出删除所有图层的行为。这里面给出了一个详细的方法#xff0c;能够有效的解决 清除所有图层的问题。
效果图 专栏名称内容介绍Openlayers基础实战 #xff08;72篇#xff…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: 2909222303qq.com
* First published in xiaozhuanlan.com
* Second published in CSDN
* First published time: 2024-10-18
*/
templatediv classcontainerh3vueopenlayers: 清空删除所有的图层 /h3p大剑师兰特还是大剑师兰特/ph4el-button typeprimary sizemini clickshowMap(World_Imagery)World_Imagery/el-buttonel-button typeprimary sizemini clickshowMap(World_Street_Map)World_Street_Map/el-buttonel-button typewarning sizemini clickclearALl()清除所有图层/el-button/h4div idvue-openlayers/div/div
/templatescriptimport ol/ol.cssimport {Map,View} from olimport Tile from ol/layer/Tileimport 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 urlhttps://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)的解决办法确实能删除所有图层。
