Openlayers6 图形绘制和修改功能（结合React）

Openlayers常用的API了解的差不多了，就开始进入实战了，首先从绘制基本的图形开始，这里主要介绍一下绘制圆形、矩形和多边形。

通过使用openlayers的ol.interaction.Draw和ol.interaction.Modify模块实现地图上绘制圆形、矩形、多边形并修改编辑。
首先我们需要创建一个地图容器，并添加地图和矢量图层。底图我这里使用了高德图层，矢量图层用于显示用户绘制结果。然后我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。通过添加Modify交互控件实现修改功能。

一、创建地图

在Openlayers中创建一个简单的地图可以通过一下步骤完成：

1. 引入Openlayers库。
2. 创建地图视图ol/View实例，并设置初始中心点和缩放级别。
3. 创建地图层ol/layer/Tile，通常使用瓦片图层ol/source/OSM。
4. 创建地图实例ol/Map，并将之前创建的视图和图层添加进去。
5. 获取DOM元素并将地图实例挂载到该元素上。

// 引入OpenLayers库
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import * as Proj from 'ol/proj';

const [map, setMap] = useState(null); // 地图
const [view, setView] = useState(null); // 地图视图

useEffect(() => {
    // 监听地图视图并创建地图实例
    if (view) {
        // 创建一个高德图层
        const tileLayer = new TileLayer({
            source: new XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&scl=1&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        // 创建实例
        const _map = new Map({
            target: 'map',
            layers: [tileLayer], // 使用高德图层
            view: view
        });
        setMap(_map);
    }
}, [view]);

useEffect(() => {
    // 创建一个地图视图
    const viewObj = new View({
        center: Proj.transform([104.06403453968424, 30.597419070782898], 'EPSG:4326', 'EPSG:3857'), // 使用'EPSG:3857'投影
        zoom: 16
    });
    setView(viewObj);
}, []);

return <div id='map' style={
  { width: '100%', height: '100%' }}></div>

二、绘制图形

可以使用VectorLayer和VectorSource添加一个矢量图层，该图层可以用来绘制图形。

import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Style, Stroke, Fill } from 'ol/style';

let drawSource = null;
let drawLayer = null;

 useEffect(() => {
    if (map) {
        drawSource = new VectorSource();
        // 添加画板layer
        drawLayer = new VectorLayer({
            source: drawSource,
            style: new Style({
                fill: new Fill({
                    color: 'rgba(237, 57, 47, 0.35)'
                }),
                stroke: new Stroke({
                    color: '#ED392F',
                    width: 4,
                    lineDash: [10]
                })
            })
        });