第三章: 图形绘制
一. 基本绘图原理
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) 创建画笔
-
通过
interaction接口创建画笔, 设置对应的画布
3) 激活与移除
通过addInteraction激活交互式控件
通过removeInteraction移除交互式控件
4) 完成事件
画笔对象drawend事件, 当绘制完成时调用
3 交互式点绘制
需求
当点击激活点绘制时, 可以进行交互点绘制
当点击退出时, 停止交互式绘制
当点击清除时, 清除绘制的图形
示例
4 交互式线
5 交互式圆
6 交互式正方形
正方形是通过: 创建正4边形得到的
7 交互式矩形
矩形比较麻烦
通过对角线的两个点来绘制
8 交互式多边形
9 作业
需求
-
选择不同的交互式控件, 选中时激活
-
当切换不同控件时, 之前的数据自动清除
这里, 我们可以封装一个函数, 根据类型, 生成交互式绘图控件
示例
五. 交互式图形编辑
可以修改选中的图形, 进行修改
交互式图形编辑主要有两个控件
-
交互选择控件: Select(), 可以选中具体的某个要素
-
交互编辑控件: Modify(), 在选中要素后, 可以对图形进行编辑