openLayers 4 canvas圖例繪製，canvas循環添加圖片，解決圖片閃爍問題

時間 2019-11-16

標籤 openlayers canvas 圖例繪製循環添加圖片解決閃爍問題简体版

原文原文鏈接

1、問題來源：

接觸Openlayers 一段時間了，最近作了一個農業產業系統，項目中涉及到產業圖例，最後考慮用canvas來繪製圖例圖像。當中帶圖片的圖例移動時，圖片會實現閃爍留白狀況。閃爍是由於繪製圖片自己的複雜性，致使canvas繪製頻率和瀏覽器繪製頻率不一樣步，出現圖片出不來或者延遲出現，這過程當中間就出現了空白顯示爲canvas底圖顏色白色的狀況。這裏說的閃爍是，在單擊地圖移動圖例時，文字前面的圖片並無出來。可是單擊地圖準備移動圖例時別鬆開鼠標圖片能出來，這個有點奇怪....javascript

有些解決方案是用一個叫雙緩衝的技術實現，這種辦法確實能行，這裏就不寫了，用咱們的辦法實現。java

雙緩衝實現原理：建立一個臨時canvas，先把下一幀動畫繪製到臨時canvas上。在每次真正繪製的時候，擦除正式canvas後，立刻drawImage把臨時canvas的內容copy過去，而這個copy過程是很是很是高效的，因此基本能夠杜絕閃爍。 canvas

二、實現步驟

一、new一個layer層，new一個Feature要素。瀏覽器

二、繪製一個canvas圖像。動畫

三、new一個樣式，設置樣式的Icon圖片爲上一步繪製好的canvas，並設置Icon寬高爲canvas寬高。url

四、設置要素Feature的樣式爲上一步new的樣式，將要素Feature添加到layer層上。spa

五、最後將layer層添加到地圖中。code

3、加載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: 'http://t1.tianditu.com/vec_c/wmts',
16                     layer: 'vec',
17                     matrixSet: 'c',
18                     format: 'tiles',
19                     projection: projection,
20                     tileGrid: new ol.tilegrid.WMTS({
21                         origin: ol.extent.getTopLeft(projectionExtent),
22                         resolutions: resolutions,
23                         matrixIds: matrixIds
24                     }),
25                     style: 'default'
26                 }),
27                 visible: true,
28                 zIndex: 1
29             });
30             var view = new ol.View({
31                 center: [118.77, 32.05],
32                 zoom: 9.5,
33                 projection: "EPSG:4326",
34                 maxZoom: 18
35             });
36             var map = new ol.Map({
37                 // 設置地圖控件，默認的三個控件都不顯示
38                 controls: ol.control.defaults({
39                     attribution: true,
40                     rotate: true,
41                     zoom: true
42                 }).extend([
43                     new ol.control.FullScreen(),
44                     new ol.control.ScaleLine()
46                 ]),
47                 layers: [
48                     tdt_road_layer
49                 ],
50                 target: 'map',
51                 loadTilesWhileAnimating: true,
52                 view: view
53             });
　　　　　　</script>

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

  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({
 72                         img: canvas,
 73                         imgSize: [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(imgObj.complete) {
103                     drawTuliImage(imgObj, p);
104                 } else {
105                     //onload：重繪，從新加載
106                     imgObj.onload = function() {
107                         drawTuliImage(imgObj, p);
108                     };
109                     //加載失敗
110                     imgObj.onerror = function() {
111                         console.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--) {
141                         var ltype = layersArr[i].get('type');
142                         if(ltype == 'tuli') map.removeLayer(layersArr[i]);
143                     }
144                     return;
145                 }
146                 //移除具體
147                 else {
148                     for(var i = layersArr.length - 1; i >= 0; i--) {
149                         var ltype = layersArr[i].get('type');
150                         if(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>