OpenLayers3新增ImageCanvas作為圖層
阿新 • • 發佈：2019-01-27
ol3中的ImageCanvas天然就是為了讓使用者將Canvas畫的影象新增到地圖中作為圖層。
下面給出程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新增一個Canvas圖層</title> <script type="text/javascript" src="../build/ol-debug.js" ></script> <link rel="stylesheet" href="../css/ol.css" /> </head> <body> <div id="map" class="map"></div> <script> var isFirst=true;//是否第一次載入該canvas圖層 var canvasOption=new Object(); //ImageCanvas有一個canvasFunction屬性 //通過檢視原始碼，發現該屬性其實是一個回撥函式，需要對該函式進行實現，從而建立一個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 context = canvas.getContext('2d'); context.fillStyle = "blue"; context.fillRect(0,0,1000,1000); return canvas; } }; //為ImageCanvasLayer建立資料來源 var imageCanvas=new ol.source.ImageCanvas(canvasOption); //建立一個ImageCanvasLayer圖層 var imageCanvasLayer=new ol.layer.Image({ source:imageCanvas }); var layers = [ new ol.layer.Tile({ source: new ol.source.OSM()//這裡使用ol自帶的一個地圖圖層作為底圖 }), imageCanvasLayer ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: [-10997148, 4569099], zoom: 4 }) }); </script> </body> </html>