Vue+OpenLayers7入门到实战：OpenLayers如何销毁已经创建好的地图容器

原创 于 2024-04-07 15:03:42 发布 · 734 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #销毁地图容器

本文详细介绍了如何在Vue项目中利用OpenLayers7销毁已创建的地图容器，并展示了创建新地图容器的步骤。通过示例代码，阐述了在开始创建地图前先销毁旧地图的实现方法，包括单独销毁地图和先销毁再创建新地图的完整过程。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上如何销毁已经创建好的地图容器。

在某些场景下，可能会需要销毁之前的地图，重新创建新的地图的需要，因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm
了解本专栏 订阅专栏 解锁全文
14-openlayers销毁创建好的地图容器
fxshy的博客
05-15 1128
14-openlayers销毁创建好的地图容器
OpenLayers6入门，如何销毁已经创建好的OpenLayers地图容器
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-21 795
本章介绍如何销毁已经创建好的OpenLayers地图容器。在某些场景下，可能会需要销毁之前的地图，重新创建新的地图的需要，因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。
OpenLayers学习--加载ArcGIS缓存
GIS平台设计与开发
09-22 9290
数据准备 使用ArcGIS发布地图，并切图得到hu
Vue页面切换后，内存未释放（通过缓存路由来解决）
weixin_43747076的博客
05-25 9923
keep-alive详解： 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。 第一种：缓存所有路由 <keep-alive> <router-view></router-view> </keep-al.
OpenLayers系列： 切换地图div加载不同地图数据时，需要销毁destroy div
浪潮行舟_2136
04-21 2252
这是因为OpenLayers在初始化地图实例时会对其所绑定的DOM元素进行一些处理和操作，如果直接将之前的地图实例与新的DOM元素绑定或者多次绑定同一个DOM元素，可能会导致地图显示异常或出错。在查阅资料过程中，了解到在使用OpenLayers切换地图div时，需要先销毁之前的地图实例，并将其与之前的DOM元素解绑，再创建新的地图实例并与新的DOM元素绑定。如果地图无数据，直接进行地图的加载，如果地图存在数据，先进行清空，再进行地图的加载。因此，在切换地图div之前需要调用之前地图实例的。
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-02 1005
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
Vue+OpenLayers7入门到实战：OpenLayers如何使用全屏控件，来实现地图容器的全屏和退出全屏功能
最新发布
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-16 395
本章介绍如何使用OpenLayers7在地图上使用地图全屏控件，来控制地图容器的全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 783
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。
Vue+OpenLayers7入门到实战：OpenLayers7加载离线瓦片xyz地图，vue项目如何使用离线瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-21 574
本章介绍如何使用OpenLayers7在地图上如何使用离线瓦片。以vue项目为例，将已经下载好的xyz离线瓦片放在vue项目中，使用OpenLayers直接加载vue中的瓦片图片，即可进行加载地图。
130：vue+openlayers 清空删除所有的图层的有效办法
大剑师兰特的GIS世界
09-09 2809
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并清空所有的图层。点击查看本专栏内容目录列表。
vue项目中使用腾讯地图
技术研究中心
12-16 2576
最近在使用腾讯地图api（以下以位置数据可视化API为例），在初建项目之后，按照官网的说法，直接引入 再将官网的初始化例子放一个方法 在mounted中调用即可看到腾讯地图，但是我引入之后，一直报TMap undefined，在网上搜到一种npm引入地图的方式，但是那个库太老了，没有GL的，别的就没搜到什么有用的东西了（也可能是因为我搜的说法不对），后来一位大佬指点，在控制台conso...
openLayers v6.13.0 简单图标、线的添加删除
qq_48971830的博客
04-24 1808
openLayers地图 图标和线 的简单使用
OpenLayers基础操作
会飞的鱼@的博客
12-16 2798
OpenLayers基础操作1、创建与移除图层2、WKT定位图层3、WKT转GeoJSON4、 声明 本文可能用到的引入： import WKT from 'ol/format/WKT' import GeoJSON from 'ol/format/GeoJSON' import Style from 'ol/style/Style' import Stroke from 'ol/style/Stroke' import Fill from 'ol/style/Fill' import Vector fro
引用openlayers的时候，多次打开地图或者多次切换地图的时候，会显示out of memory
jiuliangliang的博客
11-27 693
openlayers
SuperMap iCilent WebGL 因浏览器内存使用过高场景崩溃 ---大模型
quiet_za的专栏
02-24 1001
策略：由结果反推 检查每个缓存文件夹中生成的缓存s3m大小，最大不超过3M,网络环境不好的情况下小于1M，发现有几十兆的，说明模型对象中存在大对象，三维渲染采用的是动态调度的方式，即看到的数据会即时加载到内存中，看不到的数据会很快卸载掉，因此程序会频繁的内存分配和释放比如密集的大块数据，内存会迅速增加场景崩溃。 解决方法：拆分成多个对象。 ...
openlayers笔记
weixin_44032319的博客
04-02 274
openlayers笔记
OpenLayers性能瓶颈与优化（闭包引用与GML解析低效率）
Vern的专栏
10-07 8826
1. 结构中大量闭包的引用关系造成的性能瓶颈     OpenLayers其实是受到了js本身的限制，js是解释型的语言，执行效率不高，而且寄生在客户端让浏览器执行的。而OpenLayers中大量用到了闭包，最开始OpenLayers的内存泄露问题也是满严重的，后来差不多每个类中都写了destroy方法，用于释放资源，解除对象与DOM的绑定,相当于析构函数那种，这在很大程度上优化了Ope
在 OpenLayers 中清除数据
astak3的博客
10-31 5373
在OpenLayers中，各个概念的顺序是map->layer->source->feature->geometry->你要操作layer的话是在map上，操作source是在layer上，依次类推当数据变化时，就需要将之前的数据清除掉在OpenLayers方法是在source上，所以先要获取到source在react中，你可以将source保存为状态，就可以在页面中任意位置使用source，就不需要再通过方式获取方法是在map上，使用比较简单在react中要注意的，layer也要保存到状态中，否则。
Vue+OpenLayers：实现场景地图测距测面与交互操作
本文主要介绍了如何在Vue-cli 3.0项目中使用OpenLayers库来实现地图上的测距和测面功能。OpenLayers是一个强大的JavaScript库，用于在Web页面上创建交互式地图。在这个例子中，作者将地图作为一个公共组件，并利用...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值