Vue+OpenLayers7入门到实战：webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题

已于 2024-03-09 21:24:48 修改
阅读量295 收藏 1
点赞数 1
分类专栏： Vue+OpenLayers7入门到实战 # Vue+OpenLayers7入门 文章标签： vue.js webgl 前端 OpenLayers 图片要素点 webgl渲染大量点
于 2024-03-07 16:18:52 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/136463287
版权
Vue+OpenLayers7入门到实战 同时被 2 个专栏收录
69 篇文章 17 订阅 ¥89.90 ¥99.00
订阅专栏
Vue+OpenLayers7入门
61 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏
本文介绍了如何在Vue项目中使用OpenLayers7通过WebGL技术来叠加大量图片图标到地图上，解决了由于大量图片导致的浏览器卡顿问题。详细讲解了依赖安装、Vue中OpenLayers7的使用、功能实现步骤以及代码实现，并展示了测试效果。
摘要由CSDN通过智能技术生成

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

前言

之前已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题。本章介绍补充一下叠加大量图片图标要素到地图的情况下的问题。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm install ol@7.5.2
  1. 使用Yarn安装依赖
yarn add ol@7.5.2
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1379
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
vue+openlayers简单示例
10-19
这个“vue+openlayers简单示例”是为了演示如何在Vue项目中集成OpenLayers，以便在Web应用中展示和操作地图。 首先，集成OpenLayers到Vue项目中的关键步骤包括安装依赖和创建组件。在命令行中，你可以使用npm（Node...
openlayers3中如何叠加png图片
weixin_30824277的博客
05-09 927
概述本文讲述如何在OL3中叠加展示PNG图片。实现思路在OL3中，可通过ImageStatic资源来添加展示一个PNG图片，代码如下： image = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: "img/china2.png", ...
openlayers性能优化——开启图层预加载、减少空白等待时间
最新发布
aaa_div的博客
06-26 342
使用切片图层时、地图拖拽会有空白图片，为了减少空白等待时间，我们可以开始图层预加载。
OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1467
本章详细介绍一下如何使用OpenLayers叠加多边形、圆形、线段和点要素到地图上，并设置样式。要叠加这些元素到地图上，首先要理解OpenLayers的结构。就如同photoshop这些图像编辑软件和游戏引擎一样，OpenLayers是基于图层(layer)结构设计的，通过创建不同图层叠加到canvas画板上实现地图效果。那么闲话少讲，让我们来看看如何快速叠加多边形、圆形、线段和点要素到地图上。
OpenLayers 静态图（雷达拼图）叠加
weixin_33795093的博客
10-21 2626
本文介绍雷达拼图在 OpenLayers 上的叠加显示，雷达拼图是由中国气象局气象探测中心在《天气雷达拼图v3.0》系统中发布的，每个观测时次一幅 PNG 透明图片。对于静态图片加载，OpenLayers 提供了 ol.source.ImageStatic 来支持，可以参考官方的 demo Image Reprojection，demo ...
Openlayers使用WebGL加载多种自定义图标矢量点
qq_40236953的博客
12-14 3132
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
天地图开发实战：Vue结合OpenLayers实现动态点位地图
06-06
通过这个实战案例，读者将学习到如何集成天地图服务，并在地图上动态展示和更新点位信息。 主要内容： OpenLayers库的引入：文章首先介绍了如何导入OpenLayers的核心模块，包括地图(Map)、视图(View)、图层(Layer)...
Vue+Echarts监控大屏实例十：智慧养老监控模板实例
05-30
Vue+Echarts监控大屏实例十：智慧养老监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例三：交通视频监控模板实例，监控大屏、模板
04-04
Vue+Echarts监控大屏实例三：交通视频监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...
openlayers实现本地图片作为背景，添加marker标记
06-09
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记
openlayers加载静态图片地图
10-31
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
Vue+OpenLayers7入门到实战：使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-13 438
本章介绍如何使用OpenLayers7在解决地图上叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
openlayers：实现在连续更改时间维度时如何平滑地重新加载层 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 48
openlayers：实现在连续更改时间维度时如何平滑地重新加载层 (附完整源码）
Openlayers扩展H5绘制10W+数据
jjxliu306的博客
08-14 1222
本文基于openlayers2现有api扩展html5的支持绘制10W+的四边形，当然样式简单死板，只为说明通过H5也 可以为ol带来不菲的性能(默认自带vector图层中添加feature超过2K+数据后就会出现卡顿)。   -- 2017-04-13 ：GridLayer.Source天假bc属性为格子边框颜色,如果存在边框颜色则绘制边框   废话不多说直接上代码,     ...
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 3021
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
42-OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
fxshy的博客
06-02 76
42-OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
openlayers+vue3 初次加载叠加图片图层
06-01
要在Vue3中使用OpenLayers初次加载叠加图片图层，可以借助OpenLayers和Vue3的生命周期函数来完成。以下是一个简单的示例代码： ```vue <template> <div class="map"> <div id="map" class="map-container"></div> </div> </template> <script> import { onMounted } from 'vue'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import ImageLayer from 'ol/layer/Image'; import ImageStatic from 'ol/source/ImageStatic'; import { fromLonLat } from 'ol/proj'; export default { name: 'MapView', setup() { let map; onMounted(() => { // 创建地图 map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: fromLonLat([116.39, 39.9]), zoom: 10 }) }); // 创建Image图层 const imageLayer = new ImageLayer({ source: new ImageStatic({ url: 'path/to/image.png', // 图片路径 imageSize: [width, height], // 图片大小 projection: map.getView().getProjection(), // 投影 imageExtent: [left, bottom, right, top] // 图片范围 }) }); map.addLayer(imageLayer); }); return { map }; } } </script> <style scoped> .map { width: 100%; height: 100%; } .map-container { width: 100%; height: 100%; } </style> ``` 在上面的示例中，我们使用了Vue3的`onMounted`生命周期函数来创建地图和图层。我们首先导入需要使用的OpenLayers模块，然后在`onMounted`函数中创建地图，并将OSM图层添加到地图中。接下来，我们创建了一个Image图层，并将其添加到地图中。我们使用ImageStatic源来指定要叠加的图片，需要提供图片的路径、大小、投影和范围。最后，我们将Image图层添加到地图中，这样图片就会显示在地图上了。 希望这个示例能对你有所帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值