几何形状更改

原创已于 2023-01-19 18:53:10 修改 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

于 2019-12-25 18:01:22 首次发布

openlayers相关操作专栏收录该内容

14 篇文章

订阅专栏

博客涉及JavaScript、HTML和CSS相关信息技术内容，但具体内容未给出。这三种技术是前端开发的重要组成部分，在网页制作等方面有广泛应用。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>几何形状更改</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <style>
        .map {
            width: 100%;
            height:400px;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <form class="form-inline">
        <label>几何类型 &nbsp;</label>
        <select id="type">
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">面</option>
            <option value="Circle">圆</option>
            <option value="None">无</option>
        </select>
    </form>
<script type="text/javascript">

    var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var source = new ol.source.Vector({wrapX:false})

    var vector = new ol.layer.Vector({
        source: source
    });

    var map = new ol.Map({
        //加载图层
        layers: [raster,vector],
        target: 'map',
        view: new ol.View({
            center: [106.70, 26.62],
            zoom: 4
        })
    });

    var typeSelect = document.getElementById('type');

    var draw;
    function addInteraction() {
        var value = typeSelect.value;
        if(value != 'None'){
            draw = new ol.interaction.Draw({
                source:source,
                type: typeSelect.value
            });
            map.addInteraction(draw)
        }
    }

    typeSelect.onchange = function () {
        map.removeInteraction(draw);
        addInteraction();
    }
    addInteraction();

</script>
</body>
</html>