OpenLayers官方示例詳解十一之在自定義canvas元素上渲染OpenLayers的幾何圖形（Render geometries to a canvas）
阿新 • • 發佈：2018-12-19
目錄
一、示例簡介
這個示例展示瞭如何將OpenLayers的幾何圖形渲染到任意的canvas元素上。
二、程式碼詳解
ol.render.toContext()方法能夠將任意canvas元素的繪圖上下文物件封裝成OpenLayers的ol.render.canvas.CanvasImmediateRender物件。
ol.render.canvas.CanvasImmediateRenderer物件具有繪製OpenLayers的幾何圖形的功能。
通過這種封裝，就可以將OpenLayers的幾何圖形渲染到任意的canvas元素上了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Render geometries to a canvas</title> <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /> <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); // 獲得自定的canvas元素物件 // 將自定義的canvas物件的繪圖上下文物件封裝成openlayers的ol.render.canvas.canvasImmediateRenderer物件 var vectorContext = ol.render.toContext(canvas.getContext('2d'), { size: [100, 100] }); // 樣式物件 var fill = new ol.style.Fill({ color: 'blue' }); var stroke = new ol.style.Stroke({ color: 'black' }); var style = new ol.style.Style({ fill: fill, stroke: stroke, image: new ol.style.Circle({ radius: 10, fill: fill, stroke: stroke }) }); vectorContext.setStyle(style); // 為canvasImmediateRenderer物件設定樣式 // 在自定義canvas元素上繪製openlayers的圖形 vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]])); vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]])); vectorContext.drawGeometry(new ol.geom.Point([88, 88])); </script> </body> </html>