OpenLayers实战，WebGL图层如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染

已于 2023-11-23 14:04:09 修改
阅读量514 收藏 1
点赞数 9
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： webgl 前端 vue.js javascript OpenLayers 拼接图切分渲染 合成图切片渲染
于 2023-11-23 13:40:40 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134574981
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 36 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍如何在OpenLayers中利用WebGL图层，将一张拼接合成图片根据坐标切分成单个图片进行渲染，详细讲解了匹配运算符和插值运算符的使用，通过实例展示了如何在地图上渲染多个图标。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章主要讲解OpenLayers使用WebGL图层的情况下，如何使用一张拼接合成图片根据坐标切片成单个图片进行渲染不同图片到地图上的功能。
为方便讲解原理，本章使用的一张图片是按照横向4等分，纵向两等分规则拼接了6个图标的合成图片。并使用WebGLPointsLayer图层的match运算符将一张切片图片为6个图标，并分别渲染这6个图标到地图上。

openlayers

WebGL图层样式运算符详解系列

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 9
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
订阅专栏
OpenLayers6入门，OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-21 958
本章讲解使用OpenLayers6的WebGL图层显示大量点情况下，列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。
WebGIS前端框架（openlayers，mapbox，leaflet）图形图像底层渲染原理分析
lz5211314121的博客
02-16 2453
对于矢量图形的绘制渲染部分，底层调用的是canvas 的stroke(),fill()等方法，这些方法熟悉canvas的朋友都知道是用来绘制线条，绘制面的。相比于单纯的canvas，webGL拥有了三维空间的概念，可以设计出xyz的笛卡尔坐标系。包括前端现在最流行的开源三维框架cesium也是采用类似的架构，甚至cesium比mapbox在三维方面更加的精细和丰富其实有的时候渲染一幅地图也并不需要这么复杂的架构，只是简单的加载几个图片，简单的加载几个图形，其实像我们最初讲的使用svg也是够的。
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 4241
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
【记录】openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题
最新发布
GISer的顽强开发之路
07-15 352
openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题
OpenLayers WebGL瓦片图层和样式
GIS小虫的博客
03-24 3585
OpenLayers WebGL瓦片图层简介和样式
openlayers：实现使用WebGL呈现多字节深度源图像（16位NumpyTiles） (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 56
openlayers：实现使用WebGL呈现多字节深度源图像（16位NumpyTiles） (附完整源码）
vue3 openlayers--添加图片图标
M__O__M的博客
08-02 3114
vue3+ts openlayers--添加图标
OpenLayers 3地图添加图标
大树
12-24 3331
OpenLayers 3地图添加图标 一、overlay方式在地图添加图标 1、项目结构 2、map.html <!Doctype html> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'> <meta http-equiv='X-UA-Compat
Openlayers使用WebGL加载多种自定义图标矢量点
qq_40236953的博客
12-14 3165
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
动态加载feature样式
wxljmy的专栏
05-07 1281
[Bindable] [Embed(source="assets/1_24x24.png")] public var fireClass:Class;                  private function createPtStyle(myclass:Class):Style         {             var style:Style = new Styl
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1393
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
TexturePackerGUI精灵图的制作资源，用于openlayers的WebGLPointsLayer图层
12-13
1.每个png子图标大小应一致且为正方形（目前48×48） 2.精灵图大小为（50*子图标长×50*子图标宽=2400×2400） 3.将自己的图标替换对应编号文件夹中对应编号的图标（编号0000对应00文件夹00图标） 4.更新时将所有文件夹拖入TexturePackerGUI生成新的精灵图
openlayers7的WebGLPointsLayer图层textureCoord生成工具
qq_40236953的博客
12-14 751
小工具（TypeScript+Vue3），可生成openlayers7的WebGLPointsLayer图层textureCoord属性对应的match表达式数据。
OpenLayers基础学习（Vue）
weixin_41027083的博客
04-20 3852
源文档：https://openlayers.org/ 中文文档：http://linwei.xyz/ol3-primer/index.html 本文的openlayers的版本是6.14.1，结合vue使用的。 安装ol npm i ol 地图的重要组成部分 地图 Map 是一个入口 视图 View 控制地图显示的中心位置，范围，层级等 图层 Layer 有很多图层，每种图层在实现上都对应于一个类，放在ol.layer下面，比如layer.Title(切片图层)。它允许多个layer重叠
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2072
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
webgl 基础渲染demo_openlayers6实现webgl点图层渲染效果(附源码下载)
weixin_39673947的博客
11-22 906
前言：openlayers6推出来的有一段时间，推出来的新特性见：https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同渲染器类型的图层。以前，地图只使用一种渲染策略，并且地图中的所有图层都必须实施该策略。现在，可以使用包含使用不同渲染技术的图层的地图。例如，这使得可以在同一地图中将Canvas（2D）图层与基于Web...
Openlayers源码实践系列：探索layer的渲染机制——从分析OpenLayers 6 的WebGLPointsLayer动画效果实现说起
老胡的CSDN博客
12-28 4056
最新的OpenLayers 6.1.1 中提供了一个基于WebGL用于渲染大量点要素并且支持类expressions语法描述的动画渲染。OpenLayers6之前的老版本是不支持动画渲染的，如果想要实现动画要素效果，需要利用OpenLayers的render机制来实现动画帧的渲染 ...
四十六、openlayers官网示例Icon Sprites with WebGL解析——使用WebGLPoints加载海量点数据。普通矢量图层加载点数据和webgl加载点数据性能对比
aaa_div的博客
06-17 445
下拉框的筛选效果是通过在style中定义变量filterShape、feature中添加自定义属性shape、以及下拉框中的value值结合实现的。下拉框的改变会更改style.variables.filterShape的值，然后调用地图的render方法来更新地图。原本的style中的变量定义是WebGLPointsLayer的一些固定写法，和普通的矢量图层接受的style不一样。图层渲染出来之后，可以看到，放大缩小、筛选操作地图的表现是非常流畅的，基本没有卡顿。请求回来的数据是这样的。
openLayers聚合图层根据属性查找单个featurer
06-09
要根据属性查找单个feature，可以使用OpenLayers的getFeatures()方法和filter函数。例如，假设你要查找属性名为“name”的feature，可以按照以下步骤进行操作： 1. 获取聚合图层对象（Cluster）。 ```javascript var clusterLayer = map.getLayers().getArray()[0]; ``` 2. 获取所有feature。 ```javascript var features = clusterLayer.getSource().getFeatures(); ``` 3. 根据属性使用filter方法查找符合条件的feature。 ```javascript var filteredFeatures = features.filter(function(feature) { return feature.get('name') === 'yourName'; // 替换成你要查找的属性值 }); ``` 4. 如果找到了符合条件的feature，返回第一个找到的feature对象。 ```javascript if (filteredFeatures.length > 0) { var targetFeature = filteredFeatures[0]; // do something with targetFeature } ``` 注意：如果要查找的属性值是字符串类型，必须使用双引号或单引号将其括起来。如果要查找的属性值是数字类型，不需要使用引号。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值