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地圖，加載天地圖矢量圖為底圖

           
　　　　　　<script type="text/javascript">
               var projection = ol.proj.get('EPSG:4326');
            var projectionExtent = projection.getExtent();
            var size = ol.extent.getWidth(projectionExtent) / 256;
            var resolutions = new Array(18),
                matrixIds = new Array(18),
                shapeArr = [];
            for(var z = 1; z <= 18; ++z) {
                resolutions[z] = size / Math.pow(2, 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: 1
            });
            var view = new ol.View({
                center: [118.77, 32.05],
                zoom: 9.5,
                projection: "EPSG:4326",
                maxZoom: 18
            });
            var map = new ol.Map({
                // 設置地圖控件，默認的三個控件都不顯示
                controls: ol.control.defaults({
                    attribution: true,
                    rotate: true,
                    zoom: true
                }).extend([
                    new ol.control.FullScreen(),
                    new ol.control.ScaleLine()
                ]),
                layers: [
                    tdt_road_layer
                ],
                target: 'map',
                loadTilesWhileAnimating: true,
                view: view
            });
　　　　　　</script>

 

四、實現代碼，實現文字前面帶圖片和帶色塊圖例，有背景色的代碼為方法調用，調用即可

     <script type="text/javascript">
　　　　　　　　　　window.onload = function() {
                getMapPoint();
                drawMapTuliMethod();
            }
            /*
             * 圖例數據
             */
            var dataObj = [{
                tname: '國家級文物保護建築',
                color: '#365e96',
            }, {
                tname: '省級文物保護建築',
                color: '#d1702f',
            }, {
                tname: '市級級文物保護建築',
                color: '#4fa1dc',
            }, {
                tname: '區縣級文物保護建築',
                color: '#368829',
            }]
            /*
             * 圖例經緯度坐標,地圖綁定了單擊事件
             * 單擊返回經緯度並重新繪制canvas
             */
            var removeData = {
                tx: 118.82368355230953,
                ty: 32.2359887979324
            }
            var canvas = document.createElement('canvas');

            //繪制圖例
            function drawMapTuliMethod() {
                var layers = new ol.layer.Vector({
                    type: 'tuli',
                    source: new ol.source.Vector(),
                    zIndex: 9
                })
                var shape = new ol.Feature({
                    geometry: new ol.geom.Point([removeData.tx, removeData.ty])
                });

                var ctx = canvas.getContext("2d");
                var yheight = 30;
                yheight += dataObj.length * 27; //計算canvas高度
                canvas.width = 180;
                canvas.height = yheight;

                /*設置圖例樣式*/
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, 200, yheight); //繪制底圖
                ctx.font = "16px Arial";
                ctx.fillStyle = "#000";
                ctx.fillText('圖例', canvas.width / 2.5, 25);
                for(var i = 0; i < dataObj.length; i++) {
                    //實現文字前面帶色塊
                    //ctx.fillStyle = dataObj[i].color; //塊顏色  57                     //ctx.fillRect(10, 60 + (i - 1) * 25, 15, 15); //顏色塊：x,y,w,h
                    
                    ctx.font = "12px Arial";
                    ctx.fillStyle = "#555";
                    ctx.fillText(dataObj[i].tname, 30, 72 + (i - 1) * 25); //文字
                    
                    //添加圖片方法一，實現文字前面帶圖片，移動圖例不會出現閃爍
                     drawImg_first('xiushan.png', i); 
                    
                    //添加圖片方法二，移動圖例會出現閃爍
                    //drawImg_Second(ctx, 'xiushan.png', i);   
                }
                //將canvas添加到樣式中
                var style = new ol.style.Style({
                    image: new ol.style.Icon({
                        img: canvas,
                        imgSize: [canvas.width, canvas.height],
                    })
                });
                shape.setStyle(style);
                layers.getSource().addFeature(shape);
                map.addLayer(layers);
            }

            /*
             * 將繪制完成的圖片添加到canvas上
             * @imgObj：圖片對象
             * @p：循環序號，確定圖片坐標
             */
            function drawTuliImage(imgObj, p) {
                var ctxImge = canvas.getContext("2d");
                ctxImge.drawImage(imgObj, 5, 30 + (p * 25), 24, 26);
            }

            /*
             * 繪制圖例上的圖片，方法一
             * 此方法能解決重繪canvas時圖片閃爍留白的問題
             * @imgs：圖片名稱
             * @p:序號
             * @complete：HTMLImageElement對象的一個屬性，可以判斷圖片加載完成
             */
            function drawImg_first(imgs, p) {
                var imgObj = new Image();
                imgObj.src = 'img/' + imgs;
                //如果圖片加載完成
                if(imgObj.complete) {
                    drawTuliImage(imgObj, p);
                } else {
                    //onload：重繪，重新加載
                    imgObj.onload = function() {
                        drawTuliImage(imgObj, p);
                    };
                    //加載失敗
                    imgObj.onerror = function() {
                        console.log('canvas圖片加載失敗,請重試！')
                    };
                }
            }

            /*
             * 添加數據前面的圖片，方法二
             * 此方法繪制圖片會出現閃爍留白情況，
             * @ctx：繪圖環境
             * @imgs:圖片名稱
             * @p:循環序號
             */
            function drawImg_Second(ctx, imgs, p) {
                var imgObj = new Image();
                imgObj.src = 'img/' + imgs;
                imgObj.onload = function() {
                    ctx.drawImage(imgObj, 5, 30 + (p * 25), 25, 27);
                }
            }

            /*
             * 添加圖例之前刪除原來
             * 引用類型。length會變化,for循環倒着刪除
             * @deType:要刪除的覆蓋物名稱
             */
            function addNewsChartsDelectOring(deType) {
                var layersArr = map.getLayers().getArray(); //獲取所有覆蓋物
                //移除全部
                if(deType == 'all') {
                    for(var i = layersArr.length - 1; i >= 0; i--) {
                        var ltype = layersArr[i].get('type');
                        if(ltype == 'tuli') map.removeLayer(layersArr[i]);
                    }
                    return;
                }
                //移除具體
                else {
                    for(var i = layersArr.length - 1; i >= 0; i--) {
                        var ltype = layersArr[i].get('type');
                        if(ltype == deType) map.removeLayer(layersArr[i]);
                    }
                    return;
                }
            }

            //地圖單擊事件
            function getMapPoint() {
                map.on('click', function(evt) {
                    var point = evt.coordinate; //鼠標單擊點坐標
                    removeData.tx = point[0];
                    removeData.ty = point[1];
                    addNewsChartsDelectOring('all');
                    drawMapTuliMethod();
                });
            }
         </script>

 

①文字前面帶圖片的圖例，移動圖例時canvas繪制圖片頻率和瀏覽器繪制頻率不一導致圖片不出來的效果圖：

 

②文字前面帶圖片的效果圖：

 

③文字前面帶色塊的效果圖：

 

 

 

技術群 : 192713488