Openlayers基础教程|从前端框架到GIS开发系列课程（24）openlayers结合canva绘制矩形&绘制线

原创于 2025-08-12 16:00:00 发布 · 572 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本章节讲解Canvas如何结合 Openlayer 使用，首先我们讲解Canvas的绘图基础。

我们初始化地图的时候可以看见，实际上Openlayer的地图就是用Canvas实现绘制的。

Canvas绘制基本概念

什么是canvas？HTML5 <canvas> 元素用于图形的绘制，区别于css，它的绘制通过 JavaScript 来完成绘制。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形

Canvas API主要聚焦于2D图形。同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

绘制矩形

2.1设置canvas元素

<!-- 1、设置canvas元素 --><canvas id="canvas" width="200" height="200"></canvas><script>

2.2获取canvas

   /* 2、获取canvas */    const canvas = document.getElementById("canvas");

2.3获取上下文

返回一个对象，对象包含绘制图形的方法和属性

/* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */    const ctx = canvas.getContext("2d");

2.4执行绘制

     /* 4、执行绘制fillRect(x,y,width,height) x,y*/    ctx.fillRect(10,10,100,100);    ctx.fillStyle= "#333"

2.5完整代码示例：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>  </head>  <body>    <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>      /* 2、获取canvas */      const canvas = document.getElementById("canvas");      /* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */      const ctx = canvas.getContext("2d");      /* 4、执行绘制fillRect(x,y,width,height) x,y*/      ctx.fillRect(10, 10, 100, 100);      ctx.fillStyle = "#333";    </script>  </body></html>

绘制线

canvas 是一个二维网格

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,100,,100)。

意思是：在左上角开始 (0,0)的位置，绘制100*100的图形

3.1路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "link" 的 stroke() 方法,执行绘制。

下面我们来试一下在canvas中实现线的绘制

3.2设置canvas元素

 <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>

3.3获取canvas元素

/* 2、获取canvas */const canvas = document.getElementById("canvas");

3.4获取上下文

/* 3、获取上下文 */const ctx = canvas.getContext("2d");

3.5设置起点和终点

起点

/* 4、moveTo设置起点坐标 */ctx.moveTo(10, 10);

终点

/* 5、设置终点坐标 lineTo */ctx.lineTo(100, 100);

3.6执行绘制

/* 6、执行绘制 */ctx.strokeStyle = "#ff2d51";ctx.stroke();

完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>        /* 2、获取canvas */        const canvas = document.getElementById("canvas");        /* 3、获取上下文 */        const ctx = canvas.getContext("2d");        /* 4、moveTo设置起点坐标 */        ctx.moveTo(10, 10);        /* 5、设置终点坐标 lineTo */        ctx.lineTo(100, 100);        /* 6、执行绘制 */        ctx.strokeStyle = "#ff2d51";        ctx.stroke();    </script></body></html>