OpenLayers6入门，OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例

已于 2024-05-29 14:02:15 修改
阅读量943 收藏 2
点赞数 8
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6入门 OpenLayers6一本通 文章标签： javascript 前端 GIS OpenLayers WebGL图层样式 WebGL运算符
于 2023-11-21 19:52:53 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134539018
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文详细介绍了OpenLayers6的WebGLPointsLayer图层样式和运算符，包括读取、数学、插值比较判断转换、逻辑运算符的使用，以及四种symbolType类型（图片、圆形、三角形、四方形）的案例。内容涵盖运算符在WebGL渲染、全局配置和图层样式中的应用，以及实战中的各种示例。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

本章讲解使用OpenLayers6的WebGL图层显示大量点情况下，列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。

补充说明
本篇主要介绍OpenLayers6.x版本的webgl图层，OpenLayers7.x和OpenLayers8.x主要更新内容就是webgl这块的，因此涉及到webgl渲染这块的内容可能无法向上面的版本兼容。

openlayers

二、基于的OpenLayers版本

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
42-OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
fxshy的博客
06-02 76
42-OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例
OpenLayers6.rar
04-03
这个文件中包含了 Openlayers6.2.1 版本的部分功能示例代码，详细教程请参考文章：https://blog.csdn.net/Supreme_Sir/article/details/105123438
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 4199
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
【记录】openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题
GISer的顽强开发之路
07-15 336
openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题
230：vue+openlayers使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点
大剑师兰特的GIS世界
04-07 663
第230个本示例的目的是介绍演示如何在vue+openlayers项目中使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点。这里面最重要的是featureStyle()这个函数。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 2305
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
Openlayers源码实践系列：探索layer的渲染机制——从分析OpenLayers 6 的WebGLPointsLayer动画效果实现说起
老胡的CSDN博客
12-28 4045
最新的OpenLayers 6.1.1 中提供了一个基于WebGL用于渲染大量点要素并且支持类expressions语法描述的动画渲染。OpenLayers6之前的老版本是不支持动画渲染的，如果想要实现动画要素效果，需要利用OpenLayers的render机制来实现动画帧的渲染 ...
openlayers7的WebGLPointsLayer图层textureCoord生成工具
qq_40236953的博客
12-14 746
小工具（TypeScript+Vue3），可生成openlayers7的WebGLPointsLayer图层textureCoord属性对应的match表达式数据。
openlayers6：入门基础（二）之加载图层
Puzzle的博客
10-31 7524
#Tiled Layers ## OSM ????OpenLayers v6.9.0 API - Class: OSM Layer source for the OpenStreetMap tile server. new ol.layer.Tile({ title: "OSM", source: new ol.source.OSM({ url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}....
Openlayers使用WebGL加载多种自定义图标矢量点
qq_40236953的博客
12-14 3132
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
openlayers 编辑geoserver图层
11-19
它可以加载多种地图源，包括WMS（Web Map Service）和WMTS（Web Map Tile Service），这两种服务类型都是GeoServer提供的。通过OpenLayers，你可以实现地图的缩放、平移、图层控制以及添加自定义图层等功能。 接...
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
内容概要：通过带着读者手写openlayers6 绘制扇形及环形，了解 地图容器核心原理。在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入...
openlayers7的WebGLPointsLayer图层textureCoord属性对应的match表达式
12-14
图标编码-纹理坐标映射数据,规格为50X50共2500个图标编码和纹理位置，按两行为一组分组共25组+默认值，键名为字母a~y（25个）+默认值z。
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 3021
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
动态加载feature样式
wxljmy的专栏
05-07 1279
[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 1379
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
OpenLayers6入门，OpenLayers6实现点聚集热力图效果
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1184
热力图可以直观的把不同区域业务数据聚集数量以不同颜色区块呈现。本章使用OpenLayers实现热力图效果。
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 459
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值