openlayers：实现使用WebGL的图标精灵 (附完整源码）

最新推荐文章于 2024-01-30 22:11:07 发布
最新推荐文章于 2024-01-30 22:11:07 发布
阅读量172 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： openlayers实战教程 文章标签： openlayers
不予转载，严禁转载，违者必纠。
本文链接：https://blog.youkuaiyun.com/it_xiangqiang/article/details/135921138
本文展示了如何在OpenLayers中利用WebGL技术创建图标精灵。通过一个包含80k点的UFO目击事件数据集，详细介绍了在main.js、index.html和package.json中的实现步骤，提供了一个完整的源码示例。读者可以通过链接访问数据集和博客原文，进一步了解和应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

openlayers：实现使用WebGL的图标精灵


此示例显示如何使用ol/layer/WebGLPoints渲染 大量的精灵上面的地图是基于国家UFO报告中心的数据集： 图标根据报告的形状（圆盘，光，火球…）标记UFO目击事件。越老的目击者越红 圣像

一个非常简单的精灵地图集以PNG文件的形式使用，其中包含网格上的所有图标。style对象 用于指定根据瞄准形状使用哪个精灵。

该数据集包含大约80 k个点，可以在这里找到：https：//www.kaggle.com/NUFORC/ufo-sightings

main.js

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import TileLayer from 'ol/layer/WebGLTile.js';
impor
了解本专栏 订阅专栏 解锁全文 超级会员免费看
openlayers：实现使用WebGL渲染的矢量图层 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 220
openlayers：实现使用WebGL渲染的矢量图层 (附完整源码）
openlayers：实现WebGL矢量切片图层 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 208
openlayers：实现WebGL矢量切片图层 (附完整源码）
openlayers的WebGLPointsLayer图层，textureCoord纹理坐标的match匹配表达式文件
12-13
openlayers的WebGLPointsLayer图层，textureCoord纹理坐标的match匹配表达式文件，注释掉了大部分编码和坐标，使用时打开注释。
WebGL之点精灵的旋转（Rotation Sprite）
06-27 615
上一篇已经把WebGL如何在点（Point）上添加图片进行了说明，并且直接提供了源代码，理解起来应该不难； 矩形上面添加纹理，我们都知道是可以旋转的，那么点上面添加的纹理能不能进行旋转呢？答案是肯定的 我们只需要建立一个旋转矩阵，这个旋转直接去操作Shader里面的gl_PointCoord，这样就能达到旋转纹理的目的； //顶点着色器var VSHADER_SOURCE =[...
WebGL—点精灵PointSprite详解: 纹理映射，旋转，缩放，移动
weixin_43787178的博客
05-06 977
第一，什么是点精灵 openGL的图形由顶点构成，以后利用顶点进行纹理的映射。点精灵就是，一个顶点被当作一个精灵来处理。特别之处就是，一个顶点也可进行纹理贴出。例如，原来是个顶点构成的一个矩形，现在一个顶点就可以完成了。瞬间我们就可以想想，粒子效果，那些云雾水流火花什么的用了点精灵，就可以瞬间减少3个顶点的计算，glDrawArrays使用GL_POINT就可以了，完全也不需要什么顶点索引了。这是非常诱人的效率。 第二，点精灵的局限 一个顶点缩放都必须是矩形。并且大小的最大最小值是有范围的，每个openGL
Openlayers7的WebGLPointsLayer图层textureCoord生成工具
无可言喻的博客
12-14 906
小工具（TypeScript+Vue3），可生成openlayers7的WebGLPointsLayer图层textureCoord属性对应的match表达式数据。
原生webGL练习：利用点精灵实现字符串动画！
weixin_33873846的博客
07-30 459
原文首发于简书，今天试了一下掘金的文章编辑器，简直好用！以后文章就都发表在掘金了。。。 自从2017年2月份，写了一个基于canvas2d的字符串动画的玩具之后，就一直想着怎么样把那个玩具性能优化一下。而且那玩意局限性很大，只能渲染纯色单色的字，而且通过每一帧疯狂调用CanvasRenderingContext2d.fillText方法，导致绘制效率十分低下，非常吃cpu资源，cpu不好的话，...
Openlayers使用WebGL加载多种自定义图标矢量点
无可言喻的博客
12-14 4180
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
WebGL实现sprite精灵效果的GUI控件
weixin_30340617的博客
01-20 450
　　threejs已经有了sprite插件，这就方便了three的用户，直接可以使用threejs的sprite插件来制作GUI模型。sprite插件是阿里的lasoy老师改造过的，这个很厉害，要学习一哈他的源码。闲话少叙，我们来看一下如何用原生的webgl来实现sprite精灵效果。首先我们来看一个样例。 　　我们可以看到，这个数字模型的纹理贴图是“2”，他具有两个特性，第一他永远面向主相...
OpenLayers WebGL瓦片图层和样式
GIS小虫的博客
03-24 4253
OpenLayers WebGL瓦片图层简介和样式
openlayers：实现使用WebGL设置光栅图块的样式 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 147
openlayers：实现使用WebGL设置光栅图块的样式 (附完整源码）
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 4972
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
openGL点精灵PointSprite具体解释: 纹理映射，旋转，缩放，移动
weixin_33811961的博客
09-15 366
第一，什么是点精灵 openGL的图形由顶点构成，以后利用顶点进行纹理的映射。点精灵就是，一个顶点被当作一个精灵来处理。特别之处就是，一个顶点也可进行纹理贴出。比如，原来是个顶点构成的一个矩形，如今一个顶点就能够完毕了。瞬间我们就能够想想，粒子效果，那些云雾水流火花什么的用了点精灵，就能够瞬间降低3个顶点的计算，glDrawArrays使用GL_POINT就能够了，全然也不须要什...
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2418
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 3554
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
230：vue+openlayers使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点
大剑师兰特的GIS世界
04-07 851
第230个本示例的目的是介绍演示如何在vue+openlayers项目中使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点。这里面最重要的是featureStyle()这个函数。
OpenLayers实战，WebGL图层鼠标经过要素高亮显示，根据变量自动修改WebGL图层要素的透明度、大小和颜色
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-23 1510
本章讲解OpenLayers使用WebGL图层情况下，鼠标经过要素高亮显示，根据变量自动修改WebGL图层要素的透明度、大小和颜色的功能。webgl图层的样式并不像普通矢量图层直接修改或者切换样式就可以的，而是要预先通过webgl的运算符编写特定规则才能动态切换。本章使用match运算符来配合鼠标事件完成整个高亮切换过程。
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-21 767
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。更多的WebGL图层使用运算符动态生成样式的内容将会陆续更新。## WebGL图层样式运算符详解OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解。
openlayers：实现地图遮罩效果
最新发布
01-08
### 实现地图遮罩效果 在 OpenLayers 中实现地图遮罩效果通常涉及创建一个新的图层并将其叠加到现有地图上。此过程可以通过定义一个 `ol/layer/Layer` 类的新实例来完成，并设置其样式以覆盖底层的地图内容[^1]。 下面是一个简单的例子，展示如何使用 OpenLayers 创建带有半透明灰色遮罩的效果： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source.OSM'; // 初始化底图 const baseMap = new TileLayer({ source: new OSM(), }); // 定义遮罩图层 const maskLayer = new ol.layer.Image({ extent: [-Infinity, -Infinity, Infinity, Infinity], opacity: 0.7, source: new ol.source.CanvasImageSource({ canvasFunction(extent, resolution, pixelRatio) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小匹配视口尺寸 canvas.width = Math.ceil((extent[2] - extent[0]) * pixelRatio); canvas.height = Math.ceil((extent[3] - extent[1]) * pixelRatio); // 填充整个区域为浅灰颜色 ctx.fillStyle = '#cccccc'; ctx.fillRect(0, 0, canvas.width, canvas.height); return canvas; }, }), }); // 构建地图对象并将两个图层添加进去 new Map({ target: 'map', layers: [baseMap, maskLayer], view: new View({ center: [0, 0], zoom: 2, }), }); ``` 上述代码片段展示了如何通过自定义图像源 (`CanvasImageSource`) 来绘制一个完全填充屏幕的矩形作为遮罩。该遮罩具有一定的不透明度以便可以看到下方的基础地图[^2]。 为了使遮罩更加灵活可控，可以根据实际需求调整 `maskLayer` 的属性，比如改变颜色、透明度或是仅应用于特定地理范围内的显示等特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

源代码大师

赏点狗粮吧

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

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

打赏作者

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

抵扣说明：

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

余额充值