OpenLayers imageCanvas的使用与问题解决---Canvas图层与底图图层范围不一致

前言

h5 画布要想进行地理坐标相关的绘图如何能保证与底图上的位置相一致呢？这个问题一定会困惑刚刚进行地理数据前端可视化的你，其实目前我有两种解决方法解决这个问题，一种将画布大小设为与浏览器视口大小一致，然后将其添加到document对象上，每当地图范围变化时重新计算画布四个角的extent.第二种方法就是今天要说的使用ol.source.ImageCanvas，这个类（目前最新版本ol已经采用ES6语法存在类的定义）将canvas绘制的图形或图像作为ol图层的数据源加到map对象中两种方法各有优劣，这里不做分析。

imagecanvas 简介

imagecanvas 官网api

通俗易懂的解释就是openlayers虽然定义了自己的绘图接口但是为了提高用户图形绘制的灵活性将canvas接口暴露给用户，这样用户可以完全按照canvas的绘图标准进行绘制，然后利用ol的接口将其以图片的形式传递给map对象，这样一来，只要你掌握了canvas绘图你就可以随心所欲的进行绘制。
上面概念性的阐述这个问题，为了做到上述ol定义了那些api呢相当于将canvas作为一个图层数据源，然后将数据源与图层想绑定最后添加到map对象，这就是上述概念对应的接口的实现。

imagecanvas 使用

这里以一个简单的案例来说明，在地图上绘制一个矩形面
看一下ol.source.imagecanvas接口既然是一种数据源必要的当然是要作为图片贴在地图上的canvas对象了，查看ol.source.imagecanvas所需要的对象选项发现了一个回调函数选项，有了返回canvas对象的回调函数我们就可以很容易的绘制出想要的结果贴在地图上了

 canvasOption.canvasFunction = function (extent, resolution, pixelRatio, size, projection) {
           if (isFirst)//这里必须要做一个判断，每次的范围变动都会引起重绘，从而触发该回调函数，不判断的话，将会导致canvas无法被绘制到地图上，出现闪现的情况  
           {
                   
                    isFirst=false;
                    var canvas=document.createElement('canvas');
                    canvas.width=size[0];
                    canvas.height=size[1];
                    var ctx=canvas.getContext('2d');
                    ctx.fillStyle='red';
                    ctx.fillRect(0,0,500,500);
  
                    return canvas;
                }              
            }
            //为ImageCanvasLayer创建数据源  
            var imageCanvas = new ol.source.ImageCanvas(canvasOption);
            var imageCanvasLayer = new ol.layer.Image({
                source: imageCanvas
            });
            map.addLayer(imageCanvasLayer);   

结果发现绘制的时候是从原点开始绘制的为啥最终并没有，这说明什么呢，说明作为图片添加到底图上的canvas对象与当前视图范围内底图的起点并不相同，也就是说canvas图片的起点并不是浏览器的左上角

范围不一致问题描述与解决方法

怎么解决这个问题呢

//Canvas四至范围不同于当前地图四至范围，计算出南北方向与东西方向的偏移
   var mapExtent = map.getView().calculateExtent(map.getSize());//当前底图视图范围的投影坐标
   var canvasOrigin = map.getPixelFromCoordinate([extent[0], extent[3]]);//添加到地图上的canvas图像的左上角投影坐标转
   var mapOrigin = map.getPixelFromCoordinate([mapExtent[0], mapExtent[3]]);
   var delta = [mapOrigin[0]-canvasOrigin[0], mapOrigin[1]-canvasOrigin[1]];

上图为待计算偏移的示意图，求出偏移就可以将canvas起点移动到浏览器视口地图左上角位置

要这个示例脚本的评论留个邮箱不想放github了。

                                          FREEDOM