四十六、openlayers官网示例Icon Sprites with WebGL解析——使用WebGLPoints加载海量点数据。普通矢量图层加载点数据和webgl加载点数据性能对比

最新推荐文章于 2025-04-01 23:34:28 发布
最新推荐文章于 2025-04-01 23:34:28 发布
阅读量738 收藏 5
点赞数 6
分类专栏： openlayers官网示例解析 文章标签： webgl 前端 openlayers官方示例 openlayers 地图 GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aaa_div/article/details/139737994
版权

官网demo地址：

Icon Sprites with WebGL

这篇讲的是使用webgl加载海量的数据点。

首先忘地图上添加了底图。

const rasterLayer = new Tile({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });
    const map = new Map({
      layers: [rasterLayer],
      target: document.getElementById("map"),
      view: new View({
        center: [0, 4000000],
        zoom: 2,
      }),
    });

然后请求一个文件，获取点数据。 

 const client = new XMLHttpRequest();
    client.open(
      "GET",
      "https://openlayers.org/en/latest/examples/data/csv/ufo_sighting_data.csv"
    );
    client.addEventListener("load", function () {
      const csv = client.responseText;
      
    });
    client.send();

 请求回来的数据是这样的。

 所以要对数据进行一些切割处理，最终生成feature

const shapeTypes = {};
      const features = [];

      let prevIndex = csv.indexOf("\n") + 1;
      let curIndex;
      while ((curIndex = csv.indexOf("\n", prevIndex)) !== -1) {
        const line = csv.substring(prevIndex, curIndex).split(",");
        prevIndex = curIndex + 1;

        const coords = [parseFloat(line[5]), parseFloat(line[4])];
        const shape = line[2];
        shapeTypes[shape] = (shapeTypes[shape] || 0) + 1;

        features.push(
          new Feature({
            datetime: line[0],
            year: parseInt(/[0-9]{4}/.exec(line[0])[0], 10),
            shape: shape,
            duration: line[3],
            geometry: new Point(fromLonLat(coords)),
          })
        );
      }
      shapeTypes["all"] = features.length;

然后使用WebGLPointsLayer类构建一个图层并添加到地图上

 map.addLayer(
        new WebGLPointsLayer({
          source: new VectorSource({
            features: features,
            attributions: "National UFO Reporting Center",
          }),
          style: style,
        })
      );

 将不同类型的数据筛选条件添加进下拉框。

    fillShapeSelect(shapeTypes);
    function fillShapeSelect(shapeTypes) {
      Object.keys(shapeTypes)
        .sort(function (a, b) {
          return shapeTypes[b] - shapeTypes[a];
        })
        .forEach(function (shape) {
          const option = document.createElement("option");
          const sightings = shapeTypes[shape];
          option.text = `${shape} (${sightings} sighting${
            sightings === 1 ? "" : "s"
          })`;
          option.value = shape;
          shapeSelect.appendChild(option);
        });
    }

 下拉框的筛选效果是通过在style中定义变量filterShape、feature中添加自定义属性shape、以及下拉框中的value值结合实现的。下拉框的改变会更改style.variables.filterShape的值，然后调用地图的render方法来更新地图。

 const style = {
      variables: {
        filterShape: "all",
      },
      filter: [
        "any",
        ["==", ["var", "filterShape"], "all"],
        ["==", ["var", "filterShape"], ["get", "shape"]],
      ],
      "icon-src":
        "https://openlayers.org/en/latest/examples/data/ufo_shapes.png",
      "icon-width": 128,
      "icon-height": 64,
      "icon-color": [
        "interpolate",
        ["linear"],
        ["get", "year"],
        1950,
        oldColor,
        2013,
        newColor,
      ],
      "icon-offset": [
        "match",
        ["get", "shape"],
        "light",
        [0, 0],
        "sphere",
        [32, 0],
        "circle",
        [32, 0],
        "disc",
        [64, 0],
        "oval",
        [64, 0],
        "triangle",
        [96, 0],
        "fireball",
        [0, 32],
        [96, 32],
      ],
      "icon-size": [32, 32],
      "icon-scale": 0.5,
    };

图层渲染出来之后，可以看到，放大缩小、筛选操作地图的表现是非常流畅的，基本没有卡顿。

接下来，咱们来看看使用普通矢量图层加载海量数据点的表现。原本的style中的变量定义是WebGLPointsLayer的一些固定写法，和普通的矢量图层接受的style不一样。所以我们这里精简一下样式。

const style_common = {
      "icon-src":
        "https://openlayers.org/en/latest/examples/data/ufo_shapes.png",
      "icon-width": 128,
      "icon-height": 64,
      "icon-color": newColor,
      "icon-size": [32, 32],
      "icon-scale": 0.5,
    };

 map.addLayer(
        new VectorLayer({
        source: new VectorSource({
             features: features,
             attributions: "National UFO Reporting Center",
        }),
        style: style_common,
       })
 );

 加载上去之后，地图操作会有一些卡顿，我这里录屏可能看的不是很明显，但基本每个操作都有延迟。

总的来说，使用WebGLPointsLayer加载海量点数据性能会好很多。 但是webgl相关的api都还处于调试状态，官网api的api文档都没更新，大家如果日常项目中要使用的话可能还需要斟酌一下。

完整代码：

<template>
  <div class="box">
    <h1>Icon Sprites with WebGL</h1>
    <div id="map" class="map"></div>
    <div>Current sighting: <span id="info"></span></div>
    <div>
      <label for="shape-filter">Filter by UFO shape:</label>
      <select id="shape-filter"></select>
    </div>
  </div>
</template>

<script>
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";
import View from "ol/View.js";
import WebGLPointsLayer from "ol/layer/WebGLPoints.js";
import XYZ from "ol/source/XYZ.js";
import { fromLonLat } from "ol/proj.js";
import { OGCMapTile, Vector as VectorSource } from "ol/source.js";
import { Tile, Vector as VectorLayer } from "ol/layer.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
      extentData: "",
      message: {
        name: "",
        color: "",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    const rasterLayer = new Tile({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });
    const map = new Map({
      layers: [rasterLayer],
      target: document.getElementById("map"),
      view: new View({
        center: [0, 4000000],
        zoom: 2,
      }),
    });

    const oldColor = [255, 160, 110];
    const newColor = [180, 255, 200];

    const style = {
      variables: {
        filterShape: "all",
      },
      filter: [
        "any",
        ["==", ["var", "filterShape"], "all"],
        ["==", ["var", "filterShape"], ["get", "shape"]],
      ],
      "icon-src":
        "https://openlayers.org/en/latest/examples/data/ufo_shapes.png",
      "icon-width": 128,
      "icon-height": 64,
      "icon-color": [
        "interpolate",
        ["linear"],
        ["get", "year"],
        1950,
        oldColor,
        2013,
        newColor,
      ],
      "icon-offset": [
        "match",
        ["get", "shape"],
        "light",
        [0, 0],
        "sphere",
        [32, 0],
        "circle",
        [32, 0],
        "disc",
        [64, 0],
        "oval",
        [64, 0],
        "triangle",
        [96, 0],
        "fireball",
        [0, 32],
        [96, 32],
      ],
      "icon-size": [32, 32],
      "icon-scale": 0.5,
    };

    const style_common = {
      "icon-src":
        "https://openlayers.org/en/latest/examples/data/ufo_shapes.png",
      "icon-width": 128,
      "icon-height": 64,
      "icon-color": newColor,
      "icon-size": [32, 32],
      "icon-scale": 0.5,
    };

    const shapeSelect = document.getElementById("shape-filter");
    shapeSelect.addEventListener("input", function () {
      style.variables.filterShape = shapeSelect.value;
      map.render();
    });
    function fillShapeSelect(shapeTypes) {
      Object.keys(shapeTypes)
        .sort(function (a, b) {
          return shapeTypes[b] - shapeTypes[a];
        })
        .forEach(function (shape) {
          const option = document.createElement("option");
          const sightings = shapeTypes[shape];
          option.text = `${shape} (${sightings} sighting${
            sightings === 1 ? "" : "s"
          })`;
          option.value = shape;
          shapeSelect.appendChild(option);
        });
    }

    const client = new XMLHttpRequest();
    client.open(
      "GET",
      "https://openlayers.org/en/latest/examples/data/csv/ufo_sighting_data.csv"
    );
    client.addEventListener("load", function () {
      const csv = client.responseText;
      const shapeTypes = {};
      const features = [];

      let prevIndex = csv.indexOf("\n") + 1;
      let curIndex;
      while ((curIndex = csv.indexOf("\n", prevIndex)) !== -1) {
        const line = csv.substring(prevIndex, curIndex).split(",");
        prevIndex = curIndex + 1;

        const coords = [parseFloat(line[5]), parseFloat(line[4])];
        const shape = line[2];
        shapeTypes[shape] = (shapeTypes[shape] || 0) + 1;

        features.push(
          new Feature({
            datetime: line[0],
            year: parseInt(/[0-9]{4}/.exec(line[0])[0], 10),
            shape: shape,
            duration: line[3],
            geometry: new Point(fromLonLat(coords)),
          })
        );
      }
      shapeTypes["all"] = features.length;
        map.addLayer(
            new WebGLPointsLayer({
            source: new VectorSource({
                features: features,
                attributions: "National UFO Reporting Center",
            }),
            style: style,
            })
        );
      fillShapeSelect(shapeTypes);
    });
    client.send();

    const info = document.getElementById("info");
    map.on("pointermove", function (evt) {
      if (map.getView().getInteracting() || map.getView().getAnimating()) {
        return;
      }
      const text = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
        const datetime = feature.get("datetime");
        const duration = feature.get("duration");
        const shape = feature.get("shape");
        return `On ${datetime}, lasted ${duration} seconds and had a "${shape}" shape.`;
      });
      info.innerText = text || "";
    });
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>

openlayers：实现使用WebGL绘制渲染的线条 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 416
openlayers：实现使用WebGL绘制渲染的线条 (附完整源码）
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2387
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Openlayers海量矢量面渲染优化
无可言喻的博客
02-10 1550
openlayers海量矢量面渲染优化，使用ImageCanvas图层代替VectorLayer加载矢量面，并依旧可触发所有的VectorLayer地图交互事件。
OpenLayers：海量图形渲染之矢量切片
最新发布
m0_52912501的博客
04-01 1506
本文介绍了OpenLayers中解决海量数据渲染的方案之一矢量切片，主要内容包括如何在GeoServer中制作矢量切片，如何在OpenLayers中加载矢量切片。
OpenLayers基础教程——使用WebGLPoints加载海量点数据
HerryDong的博客
03-21 3315
最近遇到一个问题：如何在OpenLayers中高效加载海量的场强点？由于项目中的一些要求，不能使用聚合的方法加载。OpenLayers中有一个类，使用该类可以轻松应对几十万的数据量，下面开始介绍。WebGL由于使用GPU加速渲染，因此绘图效率较高。在OpenLayers的开发中，如果遇到加载海量数据点的需求，不妨考虑使用实现。
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 4904
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
Icon Sprites with WebGL——WebGL图标精灵
SmileCoffin的博客
07-05 720
In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL. 在这个例子中，图标精灵用于图标样式。使用精灵需要WebGL获取好的性能。 代码： Icon Sprites with WebG
Openlayers使用WebGL加载多种自定义图标矢量点
无可言喻的博客
12-14 4081
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
ol-games:适用于Openlayers的游戏资料，由HTML5，canvas，javascript和Openlayers提供支持
05-04
它可以显示从任何来源加载的地图图块，矢量数据和标记。 利用Canvas 2D，WebGL和HTML5的所有最新功能。 开箱即用的移动支持。 实现动画机制，并且postcompose钩允许干预OpenLayers渲染过程以在画布上下文上进行...
openlayers：实现使用WebGL的图标精灵 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 156
openlayers：实现使用WebGL的图标精灵 (附完整源码）
Openlayers游戏开发资源库：地图互动游戏支持
### 知识点概述 #### 1. OpenLayers 库介绍 OpenLayers 是一个开源的 JavaScript 库，用于在网页上显示交互式地图。它支持多种地图源和数据格式，允许开发者快速集成地图功能到自己的项目中。OpenLayers 提供了...
Openlayers扩展H5绘制10W+数据
08-14
NULL 博文链接：https://jjxliu306.iteye.com/blog/2317352
基于openlayers和canvas绘制海量数据的实现
01-26
基于openlayers和canvas绘制海量数据的实现
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型.zip
10-10
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型 ##ol3-dem 不再被维护： 基于ol3-dem的弹性地形图 。这是一个 fork 3.1.1的实验，用于呈现计划斜面的数字高程模型。特性平面斜浮雕Hypsometric染色Waterbody检测山麓阴影演示查看现
基于openlayers实现点密度、分级渲染等专题图
10-16
基于openlayers实现点密度、比例符号、分级渲染等专题图，效果还不错，里面附带演示数据。
ThreeJS入门（125）：THREE.Sprite 知识详解，示例代码
大剑师兰特的GIS世界
10-18 1353
`THREE.Sprite` 是 Three.js 中用于创建二维精灵（Sprite）的一种方法。精灵通常用于表示非几何体的图像，例如图标、标签、UI 元素或简单的平面图像。与三维几何体不同，精灵始终面向摄像机，并且通常用于增强场景中的视觉元素或用于用户界面设计。
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1956
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
7openlayers海量点加载
见路不走的博客
12-10 538
在map上注册鼠标移动事件，使用map的forEachFeatureAtPixel方法，获取到鼠标位置的feature，将属性name取出来进行展示。这里介绍两种方式加载，一种是使用ol/layer/Vector，一种是使用ol/layer/WebGLPoints。当需要把数据量相对较大的点在地图上展示的时候，方案总的来说就两种，一种是后端，一种是前端。同样的方法，模拟10万个点，加载到vectorSource2中，拖动地图不再有卡顿，比较流程。模拟10万个点，使用iconStyle进行渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值