openlayer手动画点线面并修改06

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/ol.css">
    <script type="text/javascript" src="js/ol-debug.js"></script>
    <script type="text/javascript" src="js/ol.js" ></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    
    
   <style type="text/css">
       html,body,#map{
           height: 100%;
           width: 100%;
           padding: 0px;
           margin: 0px;
           overflow: hidden;
       }
   </style>
    <title>构建地图</title>
</head>
    <style>
        #map{
            width: 100vw;
            height: 98vh;
        }
    </style>
<body>
    <label>选择类型：</label>
    <select id="type">
        <option value="None">无</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">面</option>
        <option value="Circle">圆</option>
    </select>
    <button onclick="updateDraw()" > 修改 </button>
    <div id="map" class="map"></div>
</body>
<script type="text/javascript">
    var drawSourceVector = new ol.source.Vector({wrapX: false});
    var drawLayerVector = new ol.layer.Vector({
        source: drawSourceVector
    });
    //构建地图
    var map=new ol.Map({
        target:"map",//绑定元素IP
        layers:[
            new ol.layer.Tile({
                source: new ol.source.OSM()//默认使用国外的免费地图
            })
          /* ,
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                  url:'http://t0.tianditu.gov.cn/vec_c/wmts?tk ，xxxxx' //可使用第三方地图作为地图
              }) */
              ,
            drawLayerVector
        ],
        view:new ol.View({ //视图创建
            projection:"EPSG:4326",//指定使用坐标的标准
            center: [116.390373,39.9078],
            zoom: 10,
            minZoom: 2,
            maxZoom: 18
        })
    });
    var drawType = document.getElementById('type');
    var draw; 
    function drawfunction() {
        var value = drawType.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source: drawSourceVector,
                type: value
            });
            map.addInteraction(draw);
        }
    }
    drawType.onchange = function() {
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        drawfunction();
    };
    
//------------------------------------------------------------------------------------ 
    var modify = new ol.interaction.Modify({source: drawSourceVector});
    map.addInteraction(modify);
    var snap; 
    function updateDraw(){
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        snap = new ol.interaction.Snap({source: drawSourceVector});
        map.addInteraction(snap);
    }
    
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容