通过在ol.source.ImageCanvas中获取VectorContext对象高效率绘制海量要素

使用OpenLayers构建项目时,有时会遇到一些性能优化的问题,比如大量要素的绘制。OpenLayers为绘制海量的点要素提供了一些手段,比如版本6之前的ol.WebGLMap,6之后的ol.layer.WebGLPoints。但是当我们需要绘制海量的其他类型要素(LineStringPolygon)时,貌似没有比较合适的方案。

本文通过对VectorContext对象的研究和对源码的分析,实现了在ol.source.ImageCanvas中获得VectorContext对象,并使用VectorContext高效绘制海量LineString

本文的方式只能在node编程环境中使用,因为OpenLayers官方没有将ol.format等工具类的接口在ol.js中暴露出来,无法引用。


本文分析部分较长,只需要代码的请直拉到底。最后的Demo随机生成了10万条三个顶点的折线,绘制在地图上,渲染的时间大约需要1.3s,如果采用ol.source.Vectorol.layer.Vector效率则低得多。


问题:

有关canvasFunction:OpenLayers为了方便使用canvas API在地图上绘制图形,提供了一个ol.source.ImageCanvas类型的source,在这个source的canvasFunction属性定义的函数中,可以在canvas上实时绘制图形,通过返回这个canvas作为source的数据,并使用ol.layer.Image类的对象,将这个canvas作为一个地图的图层渲染到地图上。

上图是对这个 canvasFunction的描述。之前的博文《OpenLayers 5 使用turf.js渲染克里金插值计算的等值面》中提到的Trojx同学的方案就是用了这个东西来渲染克里金插值的结果。

canvasFunction的缺点就是需要根据extent, resolution, pixelRatio, size, projection这几个参数自己来进行绘制坐标的计算,略麻烦。因为是在canvas上绘图,坐标系统只能使用屏幕坐标,所以如果绘制海量要素的话,坐标转换工作的量非常大,而且还有个很大的问题——处理不了视图旋转。

于是想到了——能不能在ImageCanvas中使用VectorContext呢?

分析:

  • 首先去看一下源码中VectorContext有关的代码,针对render事件(prerender、postrender),通过ol.render.getVectorContext(event)可以获取一个VectorContext的句柄,那么就看一下这里需要哪些东西来取得这个句柄,定位到源码:

    可以看到,最终使用的是一个CanvasImmediateRenderer的构造函数来生产的这个对象,需要的参数有:

    其中context可以通过canvas计算得到, pixelRatio, extent都已经有了,需要计算的是transform,rotation, squaredTolerance, userTransform这几个参数。
  • transform:可以通过分析源码,利用ol的内部类型transform来实现;
    首先看它的计算,是由一个transform组件中的multiply函数将两个transform:inversePixelTransformcoordinateToPixelTransform相乘得到的。

    inversePixelTransformpixelTransform进行makeInverse运算得到;
    pixelTransform由原始的transform进行坐标映射得到;
    coordinateToPixelTransform由原始的transform进行坐标映射得到;

    通过ol.transform的源码可以知道,实现坐标映射的API叫做composeTransform,于是可以在源码里搜索调用这个API的地方,发现与我们目标相关联的有以下两个地方:
    ol/renderer/canvas/ImageLayer.js

    ol/renderer/Map.js 中:

    所以这个问题就可以得到解决了。
  • rotation:可以通过当前视图的rotation属性获取;
  • squaredTolerance, userTransform:可以通过resolution, pixelRatio, projection这三个参数计算获得;

 解决方案:

实现一个全局函数,传入canvas以及canvasFunction的几个参数,返回一个VectorContext对象(函数中有对全局对象map的调用,如想移植,可以增加一个参数view用作计算)

代码如下:


function getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection) {
    canvas.width = size[0] * pixelRatio;
    canvas.height = size[1] * pixelRatio;
    let width = Math.round(size[0] * pixelRatio);
    let height = Math.round(size[1] * pixelRatio);
    let context = canvas.getContext('2d');
    
    let coordinateToPixelTransform = createTransform();
    let pixelTransform = createTransform();
    let inversePixelTransform = createTransform();

    let rotation = map.getView().getRotation();
    let center = map.getView().getCenter();
    composeTransform(coordinateToPixelTransform,
        size[0] / 2, size[1] / 2,
        1 / resolution, -1 / resolution,
        -rotation,
        -center[0], -center[1]);
    composeTransform(pixelTransform,
        size[0] / 2, size[1] / 2,
        1 / pixelRatio, 1 / pixelRatio,
        rotation,
        -width / 2, -height / 2
    );
    makeInverse(inversePixelTransform, pixelTransform);
    const transform = multiplyTransform(inversePixelTransform.slice(), coordinateToPixelTransform);
    const squaredTolerance = getSquaredTolerance(resolution, pixelRatio);
    let userTransform;
    const userProjection = getUserProjection();
    if (userProjection) {
        userTransform = getTransformFromProjections(userProjection, projection);
    }
    return new CanvasImmediateRenderer(
        context, pixelRatio, extent, transform,
        rotation, squaredTolerance, userTransform);
}

之后在ImageCanvas中就可以调用这个函数获得VectorCanvas的句柄, 就可以像在render事件回调函数中一样绘制要素了,不需要手动进行坐标转换:


var canvas = document.createElement('canvas');
var canvasLayer = new ImageLayer({
    source: new ImageCanvasSource({
        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
            var vc = getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection)
            //使用VectorContext对象绘制要素数组
            randomFeatures.forEach(item => {
                vc.drawFeature(item, lineStyle)
            })
            console.log(new Date().getTime());
            return canvas;
        },
        projection: 'EPSG:4326'
    })
})

 

全部Demo源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using OpenLayers with Webpack</title>
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css">
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
   

    <div id="map"  class="map"></div>
    <script src="./svg.bundle.js"></script>
    
    </body>
</html>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import LineString from 'ol/geom/LineString';
import ImageLayer from 'ol/layer/Image';
import ImageCanvasSource from 'ol/source/ImageCanvas';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';

import {
    create as createTransform,
    multiply as multiplyTransform,
    compose as composeTransform,
    makeInverse
} from 'ol/transform';
import CanvasImmediateRenderer from 'ol/render/canvas/Immediate';
import { getSquaredTolerance } from 'ol/renderer/vector';
import { getUserProjection, getTransformFromProjections } from 'ol/proj';

var layer = new VectorLayer({
    source: new VectorSource()
})

var tile = new TileLayer({
    source: new OSM()
})
var map = new Map({
    layers: [tile

    ],
    target: 'map',
    view: new View({
        projection: 'EPSG:4326',
        center: [104, 30],
        zoom: 1
    })
});

var randomFeatures = [];
for (var i = 0; i < 100000; i++) {
    var anchor = new Feature({
        geometry: new LineString([[Math.random()*180, Math.random()*160-80], [Math.random()*180, Math.random()*160-80], [Math.random()*180, Math.random()*160-80]])
    });
    randomFeatures.push(anchor)
}

console.log(new Date().getTime());


var lineStyle = new Style({
    stroke: new Stroke({
        color: [255, 0, 0, 0.5],
        width: 0.1
    })
});


function getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection) {
    canvas.width = size[0] * pixelRatio;
    canvas.height = size[1] * pixelRatio;
    let width = Math.round(size[0] * pixelRatio);
    let height = Math.round(size[1] * pixelRatio);
    let context = canvas.getContext('2d');

    let coordinateToPixelTransform = createTransform();
    let pixelTransform = createTransform();
    let inversePixelTransform = createTransform();

    let rotation = map.getView().getRotation();
    let center = map.getView().getCenter();
    composeTransform(coordinateToPixelTransform,
        size[0] / 2, size[1] / 2,
        1 / resolution, -1 / resolution,
        -rotation,
        -center[0], -center[1]);
    composeTransform(pixelTransform,
        size[0] / 2, size[1] / 2,
        1 / pixelRatio, 1 / pixelRatio,
        rotation,
        -width / 2, -height / 2
    );
    makeInverse(inversePixelTransform, pixelTransform);
    const transform = multiplyTransform(inversePixelTransform.slice(), coordinateToPixelTransform);
    const squaredTolerance = getSquaredTolerance(resolution, pixelRatio);
    let userTransform;
    const userProjection = getUserProjection();
    if (userProjection) {
        userTransform = getTransformFromProjections(userProjection, projection);
    }
    return new CanvasImmediateRenderer(
        context, pixelRatio, extent, transform,
        rotation, squaredTolerance, userTransform);
}

var canvas = document.createElement('canvas');
var canvasLayer = new ImageLayer({
    source: new ImageCanvasSource({
        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
            var vc = getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection)
            randomFeatures.forEach(item => {
                vc.drawFeature(item, lineStyle)
            })
            console.log(new Date().getTime());
            return canvas;
        },
        projection: 'EPSG:4326'
    })
})
map.addLayer(canvasLayer);

我在企鹅家的课堂和CSDN学院都开通了《OpenLayers实例详解》课程,欢迎报名学习。搜索关键字OpenLayers就能看到。

  • 3
    点赞
  • 14
    收藏
  • 16
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 16
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值