第三章: 图形绘制

一. 基本绘图原理

1 常用类及关系

Map类: 地图(底图)

Layers类: 图层(需要数据源)

Feature类: 要素

geom类: 几何图形

注意

只有失量图是可以修改的

2 操作步骤

1创建几何形状对象(点, 线, 圆, 正方形, 矩形, 多边形)
2创建要素对象: 参数为 几何形状对象
3设置要素对象的样式: 样式对象
4创建数据源: 参数为要素对象
5创建失量图层: 参数为数据源
6将图层添加到地图中

二. 基于坐标绘制图形

1 绘制点

示例

2 绘制线

3 绘制圆

4 绘制正方形

在ol中, 圆是用正32边形模拟的. 可以根据圆生成正方形

5 绘制矩形

6 绘制任意多边形

三. 常用的方法

●获取图层: map.getLayers()

●获取源: layer.getSource()

●获取要素: source.getFeature()

●要素下包括: geometry和style

四. 交互式绘制(重点)

1 基本概念

交互式绘制的两个基本概念

●画布

●画笔

画布就是一个数据源, 加载到失量图层

画笔就是交互式控件ol.interaction.Draw

2 操作步骤

1创建画布(失量图层, 数据源)

2创建画笔(交互式控件)

1) 创建画布

2) 创建画笔

1. 通过interaction接口创建画笔, 设置对应的画布

3) 激活与移除

通过addInteraction激活交互式控件

通过removeInteraction移除交互式控件

4) 完成事件

画笔对象drawend事件, 当绘制完成时调用

3 交互式点绘制

需求

当点击激活点绘制时, 可以进行交互点绘制

当点击退出时, 停止交互式绘制

当点击清除时, 清除绘制的图形

示例

4 交互式线

5 交互式圆

6 交互式正方形

正方形是通过: 创建正4边形得到的

7 交互式矩形

矩形比较麻烦

通过对角线的两个点来绘制

8 交互式多边形

9 作业

需求

• 选择不同的交互式控件, 选中时激活

• 当切换不同控件时, 之前的数据自动清除

这里, 我们可以封装一个函数, 根据类型, 生成交互式绘图控件

示例

五. 交互式图形编辑

可以修改选中的图形, 进行修改

交互式图形编辑主要有两个控件

• 交互选择控件: Select(), 可以选中具体的某个要素

• 交互编辑控件: Modify(), 在选中要素后, 可以对图形进行编辑