openlayers学习之自由绘画样式openlayers学习之自由绘画样式,与上一遍文章实现的稍微有点相同，不过同系列

openlayers学习之自由绘画样式,与上一遍文章实现的稍微有点相同，不过同系列的事件的功能也不一样
<!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>自由绘制</title>
    <script src="./v5.3.0-dist/v5.3.0-dist/ol.js"></script>
    <link rel="stylesheet" href="./v5.3.0-dist/v5.3.0-dist/ol.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <label for="type">选择绘画样式：</label>
    <select id="type">
        <!-- 一个select选择框选择画绘画的样式 -->
        <option value="LineString">线条</option>
        <option value="Polygon">多边形</option>
        <option value="Circle">圆</option>
        <option value="None">无</option>
    </select>
    <!-- 定义一个地图的容器 -->
    <div id="map">

    </div>
    <script>
        // 生成一个地图的类
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [108.93060745, 34.16138567],
                projection: 'EPSG:4326',
                zoom: 10
            })
        })
        // 新建一个图层
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                wrapX: false
            })
        })
        // 将图层添加到地图上
        map.addLayer(vectorLayer)
        // 获取选择框的值

        var type = document.getElementById('type')
        // 定义一个变量，用来存放绘画的点
      
        let draws;
        // 声明一个工具类

        function addInteraction() {
            // 拿到选择框的值

            let value = type.value;
            // 开始进行判断

            if (value != "None") {
                // 绘画
                draws = new ol.interaction.Draw({
                    source: vectorLayer.getSource(),
                    type: value,
                })
                // 添加交互
                map.addInteraction(draws)
            }

        }
        // 选项改变时触发的事件
        type.onchange = function () {
            // 删除绘画的交互

            map.removeInteraction(draws)
        // 调用工具类

            addInteraction()
        }
        // 调用工具类
        
        addInteraction();
        // type 规定绘画的类型，可以是点、线、面或多边形。
        //     // type:"LineString", 划线，直线，一条线
        //     // type: 'MultiLineString',  画出多种线来，折线
        //     type: "Polygon",    //画出多边形，多边形
        //     // type:'Circle',   //画出的是一个圆
        //     freehand: true,



    </script>

</body>

</html>