一、问题来源：
接触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地图，加载天地图矢量图为底图
1
<script type="text/javascript">
var projection = ol.proj.get('EPSG:4326'); 2 var projectionExtent = projection.getExtent(); 3 var size = ol.extent.getWidth(projectionExtent) / 256; 4 var resolutions = new Array(18), 5 matrixIds = new Array(18), 6 shapeArr = []; 7 for(var z = 1; z <= 18; ++z) { 8 resolutions[z] = size / Math.pow(2, z); 9 matrixIds[z] = z;10 }11 //天地图矢量图12 var tdt_road_layer = new ol.layer.Tile({13 name: '矢量底图',14 source: new ol.source.WMTS({15 url: '/vec_c/wmts',16 layer: 'vec',17 matrixSet: 'c',18 format: 'tiles',19 projection: projection,20 tileGrid: new ol.tilegrid.WMTS({21origin: ol.extent.getTopLeft(projectionExtent),22resolutions: resolutions,23matrixIds: matrixIds24 }),25 style: 'default'26 }),27 visible: true,28 zIndex: 129 });30 var view = new ol.View({31 center: [118.77, 32.05],32 zoom: 9.5,33 projection: "EPSG:4326",34 maxZoom: 1835 });36 var map = new ol.Map({37 // 设置地图控件，默认的三个控件都不显示38 controls: ol.control.defaults({39 attribution: true,40 rotate: true,41 zoom: true42 }).extend([43 new ol.control.FullScreen(),44 new ol.control.ScaleLine()46 ]),47 layers: [48 tdt_road_layer49 ],50 target: 'map',51 loadTilesWhileAnimating: true,52 view: view53 });
</script>
四、实现代码，实现文字前面带图片和带色块图例，有背景色的代码为方法调用，调用即可
1<script type="text/javascript">
window.onload = function() { 2 getMapPoint(); 3 drawMapTuliMethod(); 4 } 5 /* 6 * 图例数据 7 */ 8 var dataObj = [{ 9 tname: '国家级文物保护建筑', 10 color: '#365e96', 11 }, { 12 tname: '省级文物保护建筑', 13 color: '#d1702f', 14 }, { 15 tname: '市级级文物保护建筑', 16 color: '#4fa1dc', 17 }, { 18 tname: '区县级文物保护建筑', 19 color: '#368829', 20 }] 21 /* 22 * 图例经纬度坐标,地图绑定了单击事件 23 * 单击返回经纬度并重新绘制canvas 24 */ 25 var removeData = { 26 tx: 118.82368355230953, 27 ty: 32.2359887979324 28 } 29 var canvas = document.createElement('canvas'); 30 31 //绘制图例 32 function drawMapTuliMethod() { 33 var layers = new ol.layer.Vector({ 34 type: 'tuli', 35 source: new ol.source.Vector(), 36 zIndex: 9 37 }) 38 var shape = new ol.Feature({ 39 geometry: new ol.geom.Point([removeData.tx, removeData.ty]) 40 }); 41 42 var ctx = canvas.getContext("2d"); 43 var yheight = 30; 44 yheight += dataObj.length * 27; //计算canvas高度 45 canvas.width = 180; 46 canvas.height = yheight; 47 48 /*设置图例样式*/ 49 ctx.fillStyle = "#fff"; 50 ctx.fillRect(0, 0, 200, yheight); //绘制底图 51 ctx.font = "16px Arial"; 52 ctx.fillStyle = "#000"; 53 ctx.fillText('图例', canvas.width / 2.5, 25); 54 for(var i = 0; i < dataObj.length; i++) { 55 //实现文字前面带色块 56 //ctx.fillStyle = dataObj[i].color; //块颜色 57 //ctx.fillRect(10, 60 + (i - 1) * 25, 15, 15); //颜色块：x,y,w,h 58 59 ctx.font = "12px Arial"; 60 ctx.fillStyle = "#555"; 61 ctx.fillText(dataObj[i].tname, 30, 72 + (i - 1) * 25); //文字 62 63 //添加图片方法一，实现文字前面带图片，移动图例不会出现闪烁 64 drawImg_first('xiushan.png', i); 65 66 //添加图片方法二，移动图例会出现闪烁 67 //drawImg_Second(ctx, 'xiushan.png', i); 68 } 69 //将canvas添加到样式中 70 var style = new ol.style.Style({ 71 image: new ol.style.Icon({ 72img: canvas, 73imgSize: [canvas.width, canvas.height], 74 }) 75 }); 76 shape.setStyle(style); 77 layers.getSource().addFeature(shape); 78 map.addLayer(layers); 79 } 80 81 /* 82 * 将绘制完成的图片添加到canvas上 83 * @imgObj：图片对象 84 * @p：循环序号，确定图片坐标 85 */ 86 function drawTuliImage(imgObj, p) { 87 var ctxImge = canvas.getContext("2d"); 88 ctxImge.drawImage(imgObj, 5, 30 + (p * 25), 24, 26); 89 } 90 91 /* 92 * 绘制图例上的图片，方法一 93 * 此方法能解决重绘canvas时图片闪烁留白的问题 94 * @imgs：图片名称 95 * @p:序号 96 * @complete：HTMLImageElement对象的一个属性，可以判断图片加载完成 97 */ 98 function drawImg_first(imgs, p) { 99 var imgObj = new Image();100 imgObj.src = 'img/' + imgs;101 //如果图片加载完成102 if(plete) {103 drawTuliImage(imgObj, p);104 } else {105 //onload：重绘，重新加载106 imgObj.onload = function() {107drawTuliImage(imgObj, p);108 };109 //加载失败110 imgObj.onerror = function() {111console.log('canvas图片加载失败,请重试！')112 };113 }114 }115 116 /*117 * 添加数据前面的图片，方法二118 * 此方法绘制图片会出现闪烁留白情况，119 * @ctx：绘图环境120 * @imgs:图片名称121 * @p:循环序号122 */123 function drawImg_Second(ctx, imgs, p) {124 var imgObj = new Image();125 imgObj.src = 'img/' + imgs;126 imgObj.onload = function() {127 ctx.drawImage(imgObj, 5, 30 + (p * 25), 25, 27);128 }129 }130 131 /*132 * 添加图例之前删除原来133 * 引用类型。length会变化,for循环倒着删除134 * @deType:要删除的覆盖物名称135 */136 function addNewsChartsDelectOring(deType) {137 var layersArr = map.getLayers().getArray(); //获取所有覆盖物138 //移除全部139 if(deType == 'all') {140 for(var i = layersArr.length - 1; i >= 0; i--) {141var ltype = layersArr[i].get('type');142if(ltype == 'tuli') map.removeLayer(layersArr[i]);143 }144 return;145 }146 //移除具体147 else {148 for(var i = layersArr.length - 1; i >= 0; i--) {149var ltype = layersArr[i].get('type');150if(ltype == deType) map.removeLayer(layersArr[i]);151 }152 return;153 }154 }155 156 //地图单击事件157 function getMapPoint() {158 map.on('click', function(evt) {159 var point = evt.coordinate; //鼠标单击点坐标160 removeData.tx = point[0];161 removeData.ty = point[1];162 addNewsChartsDelectOring('all');163 drawMapTuliMethod();164 });165 }
</script>
①文字前面带图片的图例，移动图例时canvas绘制图片频率和浏览器绘制频率不一导致图片不出来的效果图：
②文字前面带图片的效果图：
③文字前面带色块的效果图：
