OpenLayers学习笔记高级篇（一、openlayers画点线面）

最新推荐文章于 2026-04-01 09:08:35 发布

原创最新推荐文章于 2026-04-01 09:08:35 发布 · 4.7k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

WebGIS实战同时被 2 个专栏收录

21 篇文章

订阅专栏

OpenLayers

17 篇文章

订阅专栏

本文是OpenLayers学习笔记的高级篇，主要介绍了如何使用OpenLayers在地图上进行点、线、面和圆的绘制操作。通过示例代码详细解释了添加绘制layer、响应下拉框事件以及监听绘制交互的过程。

话不多说直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>点线面圆的绘制</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="None">None</option>
      </select>

   <div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
    	//底图
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12
        })
    });

    // 添加一个绘制的线使用的layer
    var drawLayer = new ol.layer.Vector({
    	//layer所对应的source
        source: new ol.source.Vector(),

    })
    //把layer加入到地图中
    map.addLayer(drawLayer);
    
    
    //先看看选中的画什么，点？线？面？。。
    var typeSelect = document.getElementById('type');
    var draw; // 在这儿定义一个全局的绘制变量，方便一会去除它
    
    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
          draw = new ol.interaction.Draw({
            source: drawLayer.getSource(),
            type: typeSelect.value
          });
          map.addInteraction(draw);
        }
      }
    
    /**
       * 处理选中不同的绘制方式的方法，通过监听typeSelect值的变化
       */
      typeSelect.onchange = function() {
      	//先移除上一个Interaction
        map.removeInteraction(draw);
        //再根据typeSelect的值绘制新的Interaction
        addInteraction();
      };

		addInteraction();
</script>
</body>

</html>

先看一下效果：