Vue+OpenLayers7入门到实战：OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片

最新推荐文章于 2026-01-02 20:59:19 发布
原创 最新推荐文章于 2026-01-02 20:59:19 发布 · 472 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #懒加载瓦片

本文介绍了如何在Vue项目中使用OpenLayers7实现地图初始化时不加载瓦片，通过点击事件触发瓦片的懒加载功能。详细讲述了依赖安装、Vue中OpenLayers7的使用，以及代码实现和测试效果，提供了一种优化地图加载性能的方法。

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

前言

本章介绍如何使用OpenLayers7怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm install ol@7.5.2
  1. 使用Yarn安装依赖
了解本专栏 订阅专栏 解锁全文
Vue+OpenLayers7入门到实战：OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-11 546
本章介绍如何使用OpenLayers7在地图上监听点击事件，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
vue+ol实现 ol 地图加载geojson
bitree1的博客
05-12 1万+
一、背景 公司需要个简单的二维底图，加载点线面数据，为了省时间就用openlayers框架写一个简单的加载方法，openlayers核心包含Map对象、View视图、Layer图层、Source来源、Feature等特征 二、加载配置 三、地图初始化 import esb from '@/plugins/esb' import 'ol/ol.css' import Map from 'ol/Map' import View from 'ol/View' import { getWidth,getC
Vue项目-OpenLayers地图初始化
StupidlyGrass的博客
11-20 1542
定义相机的初始显示位置// fromDegrees() 参数依次为：经度，纬度，相机高度});
Vue+OpenLayers7入门到实战：OpenLayers动画效果实现，OpenLayers实现轨迹运动动画
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-30 737
本章介绍如何使用OpenLayers7在地图上实现动画效果和运动轨迹动画。
OpenLayers6入门，OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-08 556
本章讲解怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。
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中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3506
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4913
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers7入门到实战：在地图上显示经纬度网格标记线
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-26 424
本章介绍如何使用OpenLayers7在地图上显示经纬度网格标记线。在地图上显示经纬度网格标记线，可以方便查看可视区域所在的经度和纬度区间。
Openlayers3 - 瓦片地图加载解析
热门推荐
玖年
01-24 1万+
瓦片地图加载解析 其实加载瓦片地图基本是大同小异，你可能会觉得很惊讶，因为网上在线的地图服务，看起都不一样，本节即将为你解开这层神秘的面纱。在前面已基本介绍了瓦片地图的解决方案和作用，此处再用一张图来直观地认识一下瓦片结构： 从上图可知，大家常用的瓦片地图是一个三维的概念，我们通常使用xyz这样的坐标来精确定位一张瓦片。通常z用于表示地图层级，而xy表示某个层级内的瓦片平面，x为横纵坐标，
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-09 4134
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
openlayers H5移动端移动要素
bool的博客
05-23 1806
移动要素在openlayers中使用Translate类 ，但是在H5移动端不兼容，于是自己实现了下： 代码： let flag = false let features = null this.$refs.rootMap.ontouchstart = (evt) => { console.log('ontouchstart') flag = true features = this.interaction_select
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 169
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
Linux环境下前后端分离项目（Spring Boot + Vue）手动部署全流程指南
Ahatc的博客
01-01 827
本文详细记录了在 Linux 环境下手动部署前后端分离项目（Spring Boot + Vue）的完整流程。以若依框架为例，从 JDK、Redis、Nginx 等基础环境准备讲起，深入解析了后端 Maven 打包与 nohup 后台启动策略，以及前端 Vue 生产环境构建与静态资源目录规划。重点攻克了 Nginx 配置难点，包括反向代理接口转发、解决跨域问题以及修复 Vue History 模式刷新 404 的具体配置代码。适合开发者快速掌握服务器应用上线技巧，规避常见部署陷阱，实现项目的高效交付。
vue对接海康摄像头-H5player
林恒的博客
12-31 249
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
vue中 v-cloak指令
最新发布
KLW75
01-02 92
v-cloak指令用于隐藏尚未完成编译的DOM模板。有时会出现网络延迟或异步操作的情况，导致模板中的插值表达式内容并不一定能够及时被编译解析，网页中则会出现一部分未被解析的插值表达式，利用v-cloak指令，将指令中包含的内容先进行隐藏，当全部内容被解析编译完以后再显示，v-cloak指令不能单独使用，需要配合样式来实现。
vue v-for 列表渲染指令注意
KLW75
12-27 236
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
从零搭建 Vue 移动端项目
萌新程序员的博客，觉得有用的可以点点关注
12-30 833
本文完整讲解了 Vue 移动端项目的搭建流程：从环境准备→项目创建→适配配置→UI 库集成→功能开发→打包发布，核心是解决移动端适配和交互问题。实际开发中可根据项目需求选择适配方案（rem/vw）、扩展更多功能（如支付、分享、定位），并结合 ESLint、Prettier 保证代码规范。掌握这套流程后，你可以快速搭建各类 Vue 移动端项目（电商、资讯、工具类 App），后续可深入学习 Vue 3 的组合式 API、Vite 优化、移动端性能调优等内容，提升项目体验。
vue2+openlayers加载瓦片地图提升分辨率
11-25
<think> 首先，用户的问题是关于在Vue 2项目中结合OpenLayers加载瓦片地图时提升分辨率的方法。用户提到了Vue 2，但我需要回顾之前的引用。引用[1]、[2]、[3]和[4]都提到了Vue 3或Vue 2结合OpenLayers加载地图，但具体到提升分辨率，引用[3]中提到了分辨率数组。 在引用[3]中，有一段代码展示了如何加载百度地图，其中包含了一个分辨率数组： ```javascript //分辨率数组 const resolutions = []; for(let i = 0; i < 19; i++){ resolutions[i] = Math.pow(2, 18 - i); } const tileGrid = new ol.tilegrid.TileGrid({ origin: [0, 0], resolutions: resolutions }) ``` 这里，分辨率数组是通过一个循环生成的，从2的18次方到2的0次方（大约）。这定义了瓦片网格的分辨率级别。 用户的问题是“提升分辨率的方法”。在OpenLayers中，地图的分辨率通常与缩放级别相关。提升分辨率可能意味着增加地图的清晰度或支持更高的缩放级别。 关键点： - **分辨率数组 (resolutions array)**：在OpenLayers中，分辨率数组定义了每个缩放级别的分辨率。分辨率是地图单位（如米）每像素。较小的分辨率值表示更高的缩放级别（更详细）。 - **提升分辨率**：这可能意味着添加更多的缩放级别（更高的分辨率）或优化现有级别的分辨率值。 - **在Vue 2项目中使用**：由于用户指定了Vue 2，我需要确保代码示例兼容Vue 2。引用[4]提到了“Vue2+OpenLayers调用WMTS服务初始化天地图”，所以可以参考那个。 方法： 1. **调整分辨率数组**：在创建tileGrid时，定义一个更细粒度的分辨率数组，以支持更高的缩放级别。例如，增加数组的大小或调整值。 2. **使用更高分辨率的瓦片源**：确保瓦片服务提供高分辨率瓦片。分辨率提升也依赖于瓦片源的质量。 3. **优化tileGrid配置**：在OpenLayers中，tileGrid对象控制瓦片的网格，包括分辨率、原点等。 从引用[3]中，我们可以看到如何自定义tileGrid来加载百度地图。类似地，对于其他瓦片源（如天地图、OSM等），我们可以类似定义。 步骤在Vue 2项目中： - 安装和设置OpenLayers在Vue 2中。引用[2]提到“Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）”，所以可能有一个教程。 - 在Vue组件中，创建一个地图实例。 - 在source配置中，定义一个tileGrid，其中resolutions数组被扩展以支持更高分辨率。 例如，要提升分辨率： - 增加分辨率数组的元素数量，比如到更高的缩放级别。 - 确保瓦片URL函数能处理这些级别（即瓦片服务支持这些缩放级别）。 在代码中： ```javascript // 例如，支持更高级别的缩放 const resolutions = []; const maxZoom = 20; // 提升到20级缩放 for(let i = 0; i <= maxZoom; i++){ resolutions[i] = Math.pow(2, maxZoom - i); // 调整计算，使得分辨率更精细 } const tileGrid = new ol.tilegrid.TileGrid({ origin: [0, 0], resolutions: resolutions }); ``` 然后，在source中使用这个tileGrid。 关于Vue 2：在Vue 2组件中，这通常在mounted生命周期钩子中初始化地图。 引用相关部分： - [^3] 提供了加载百度地图的示例，包括分辨率数组。 - [^4] 是关于Vue2+OpenLayers初始化天地图，使用WMTS服务。 用户提到“提升分辨率”，可能需要更详细的解释。 回答结构： 1. 解释分辨率在OpenLayers中的重要性。 2. 展示如何自定义分辨率数组。 3. 提供代码示例在Vue 2上下文中。 4. 确保LaTeX格式正确（如数学表达式）。 5. 生成相关问题（系统指令要求）。 最后，添加引用标识，如[^3]。 相关问题生成： 1. 如何在OpenLayers中优化地图加载性能？ 2. 支持不同瓦片源的分辨率设置有哪些注意事项？ 3. Vue 2与Vue 3在集成OpenLayers时有何差异？ 确保回答真实可靠。 </think>在 Vue 2 项目中使用 OpenLayers 加载瓦片地图时，提升分辨率的关键在于自定义瓦片网格（tileGrid），特别是通过调整分辨率数组（resolutions array）来支持更精细的缩放级别。分辨率表示地图单位（如米）每像素的值，较低的数值对应更高的缩放级别和更清晰的细节。以下是逐步实现方法： ### 步骤详解 1. **理解分辨率数组（resolutions array）** 在 OpenLayers 中，分辨率数组定义了每个缩放级别的分辨率值。例如： - 分辨率计算：若最大缩放级别为 $N$，则分辨率数组元素为 $r_i = 2^{N-i}$，其中 $i$ 为缩放级别索引（$i$ 从 0 开始）。 - 提升分辨率：增加数组长度（支持更多缩放级别）或减小数组值（使每个级别更精细）。 2. **自定义分辨率数组** 根据瓦片源支持的最大缩放级别，扩展分辨率数组。例如，将最大缩放级别从 18 提升到 20： ```javascript // 在 Vue 组件的 methods 或 mounted 钩子中定义 const maxZoom = 20; // 提升最大缩放级别 const resolutions = []; for (let i = 0; i <= maxZoom; i++) { resolutions[i] = Math.pow(2, maxZoom - i); // 分辨率计算公式 } ``` 3. **配置瓦片网格（tileGrid）** 将自定义分辨率数组应用于 `ol.tilegrid.TileGrid` 对象： ```javascript const tileGrid = new ol.tilegrid.TileGrid({ origin: [0, 0], // 网格原点 resolutions: resolutions, // 自定义分辨率数组 tileSize: [256, 256] // 瓦片尺寸（默认 256x256） }); ``` 4. **应用至地图源（source）** 在创建瓦片源（如 `ol.source.TileImage`）时传入自定义 `tileGrid`： ```javascript // 以天地图为例，参考 WMTS 服务[^4] const source = new ol.source.TileImage({ projection: 'EPSG:3857', // 坐标系 tileGrid: tileGrid, // 应用自定义网格 tileUrlFunction: (tileCoord) => { const z = tileCoord[0]; const x = tileCoord[1]; const y = tileCoord[2]; return `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x=${x}&y=${y}&z=${z}`; } }); ``` 5. **初始化地图并集成到 Vue 2** 在 Vue 组件的 `mounted` 生命周期钩子中创建地图： ```javascript export default { mounted() { const map = new ol.Map({ target: this.$refs.mapContainer, // 绑定到 DOM 元素 layers: [new ol.layer.Tile({ source })], view: new ol.View({ center: ol.proj.fromLonLat([116.4, 39.9]), // 初始中心点 zoom: 10, // 初始缩放级别 resolutions: resolutions // 可选：显式设置视图分辨率 }) }); } }; ``` ### 关键注意事项 - **瓦片源兼容性**：确保地图服务（如百度、天地图）支持目标缩放级别（如 `maxZoom=20`）。例如，百度地图通常支持到 18 级[^3]。 - **性能优化**：提升分辨率会增加瓦片加载数量，建议： - 使用 `ol.source.XYZ` 替代 `TileImage` 简化 URL 构造。 - 添加瓦片加载事件监听以处理延迟。 - **坐标系匹配**：验证 `projection` 是否与瓦片源一致（如百度地图需自定义坐标系[^3]）。 通过调整分辨率数组，您可以直接控制地图的细节层级，显著提升视觉精度。实际效果取决于瓦片源的数据质量和服务支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值