第三章: 圖形繪制

一. 基本繪圖原理

1 常用類及關(guān)系

Map類: 地圖(底圖)

Layers類: 圖層(需要數(shù)據(jù)源)

Feature類: 要素

geom類: 幾何圖形

注意

只有失量圖是可以修改的

2 操作步驟

1創(chuàng)建幾何形狀對(duì)象(點(diǎn), 線, 圓, 正方形, 矩形, 多邊形)
2創(chuàng)建要素對(duì)象: 參數(shù)為 幾何形狀對(duì)象
3設(shè)置要素對(duì)象的樣式: 樣式對(duì)象
4創(chuàng)建數(shù)據(jù)源: 參數(shù)為要素對(duì)象
5創(chuàng)建失量圖層: 參數(shù)為數(shù)據(jù)源
6將圖層添加到地圖中

二. 基于坐標(biāo)繪制圖形

1 繪制點(diǎn)

示例

2 繪制線

3 繪制圓

4 繪制正方形

在ol中, 圓是用正32邊形模擬的. 可以根據(jù)圓生成正方形

5 繪制矩形

6 繪制任意多邊形

三. 常用的方法

●獲取圖層: map.getLayers()

●獲取源: layer.getSource()

●獲取要素: source.getFeature()

●要素下包括: geometry和style

四. 交互式繪制(重點(diǎn))

1 基本概念

交互式繪制的兩個(gè)基本概念

●畫布

●畫筆

畫布就是一個(gè)數(shù)據(jù)源, 加載到失量圖層

畫筆就是交互式控件ol.interaction.Draw

2 操作步驟

1創(chuàng)建畫布(失量圖層, 數(shù)據(jù)源)

2創(chuàng)建畫筆(交互式控件)

1) 創(chuàng)建畫布

2) 創(chuàng)建畫筆

1. 通過(guò)interaction接口創(chuàng)建畫筆, 設(shè)置對(duì)應(yīng)的畫布

3) 激活與移除

通過(guò)addInteraction激活交互式控件

通過(guò)removeInteraction移除交互式控件

4) 完成事件

畫筆對(duì)象drawend事件, 當(dāng)繪制完成時(shí)調(diào)用

3 交互式點(diǎn)繪制

需求

當(dāng)點(diǎn)擊激活點(diǎn)繪制時(shí), 可以進(jìn)行交互點(diǎn)繪制

當(dāng)點(diǎn)擊退出時(shí), 停止交互式繪制

當(dāng)點(diǎn)擊清除時(shí), 清除繪制的圖形

示例

4 交互式線

5 交互式圓

6 交互式正方形

正方形是通過(guò): 創(chuàng)建正4邊形得到的

7 交互式矩形

矩形比較麻煩

通過(guò)對(duì)角線的兩個(gè)點(diǎn)來(lái)繪制

8 交互式多邊形

9 作業(yè)

需求

• 選擇不同的交互式控件, 選中時(shí)激活

• 當(dāng)切換不同控件時(shí), 之前的數(shù)據(jù)自動(dòng)清除

這里, 我們可以封裝一個(gè)函數(shù), 根據(jù)類型, 生成交互式繪圖控件

示例

五. 交互式圖形編輯

可以修改選中的圖形, 進(jìn)行修改

交互式圖形編輯主要有兩個(gè)控件

• 交互選擇控件: Select(), 可以選中具體的某個(gè)要素

• 交互編輯控件: Modify(), 在選中要素后, 可以對(duì)圖形進(jìn)行編輯