openlayers3线段添加闪烁_openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题...

一、问题来源：

接触Openlayers 一段时间了，最近做了一个农业产业系统，项目中涉及到产业图例，最后考虑用canvas来绘制图例图像。当中带图片的图例移动时，图片会实现闪烁留白情况。闪烁是因为绘制图片本身的复杂性，导致canvas绘制频率和浏览器绘制频率不同步，出现图片出不来或者延迟出现，这过程中间就出现了空白显示为canvas底图颜色白色的情况。这里说的闪烁是，在单击地图移动图例时，文字前面的图片并没有出来。但是单击地图准备移动图例时别松开鼠标图片能出来，这个有点奇怪....

有些解决方案是用一个叫双缓冲的技术实现，这种办法确实能行，这里就不写了，用我们的办法实现。

双缓冲实现原理：创建一个临时canvas，先把下一帧动画绘制到临时canvas上。在每次真正绘制的时候，擦除正式canvas后，马上drawImage把临时canvas的内容copy过去，而这个copy过程是非常非常高效的，所以基本可以杜绝闪烁。

二 、实现步骤

1、new一个layer层，new一个Feature要素。

2、绘制一个canvas图像。

3、new一个样式，设置样式的Icon图片为上一步绘制好的canvas，并设置Icon宽高为canvas宽高。

4、设置要素Feature的样式为上一步new的样式，将要素Feature添加到layer层上。

5、最后将layer层添加到地图中。

三、加载ol地图，加载天地图矢量图为底图

var projection = ol.proj.get('EPSG:4326');

var projectionExtent = projection.getExtent();

var size = ol.extent.getWidth(projectionExtent) / ;

var resolutions = new Array(),

matrixIds = new Array(),

shapeArr = [];

for(var z = ; z <= ; ++z) {

resolutions[z] = size / Math.pow(, z);

matrixIds[z] = z;

}

//天地图矢量图

var tdt_road_layer = new ol.layer.Tile({

name: '矢量底图',

source: new ol.source.WMTS({

url: 'http://t1.tianditu.com/vec_c/wmts',

layer: 'vec',

matrixSet: 'c',

format: 'tiles',

projection: projection,

tileGrid: new ol.tilegrid.WMTS({

origin: ol.extent.getTopLeft(projectionExtent),

resolutions: resolutions,

matrixIds: matrixIds

}),

style: 'default'

}),

visible: true,

zIndex:

});

var view = new ol.View({

center: [118.77, 32.05],

zoom: 9.5,

projection: "EPSG:4326",

maxZoom:

});

var map = new ol.Map({