在图层上添加点、线、面控件

Openlayers提供了一些工具方便用户控制地图的行为,比如缩放,全屏,坐标控件等等, 这些控件使得编写代码的量大大减小,而且易于使用。本章节主要介绍使用了 js库里的Draw类,来绘制图层

Draw Class

Draw类继承与interaction

import Draw from 'ol/interaction/Draw';

Draw类里面封装有许多方法,只要引用了js库之后可以直接引用,下面我们就开始使用。

新建HTML

首先创建一个html添加表单、多选框;

<!DOCTYPE >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OpenLayers_Draw</title>
    <link rel="stylesheet" href="../ol/css/ol.css" type="text/css">
    <script src="../ol/build/ol.js" type="text/javascript"></script>
</head>
<style>
    #map {
        height: 512px;
        width: 1024px;
        float: left;
    }
</style>
<body>
<div id="map"></div>
<form class="form-inline" action="select.html" method="post">
      <label>Geometry type &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>
      <input type="submit" value="Submit" />
    </form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

添加js代码片段:

//画图部分
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
  source: source,
  //style:styleFunction

});
//选择功能
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
  var value = typeSelect.value;
  if (value !== 'None') {
    draw = new ol.interaction.Draw({
      source: source,
      type: typeSelect.value,
      stopClick:true,
      freehand:false,

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

addInteraction();
//样式
function  styleFunction(feature) {
        return  new ol.style.Style({
            fill: new ol.style.Fill({ //矢量图层填充颜色,以及透明度
                color:"red"
            }),
            stroke: new ol.style.Stroke({ //边界样式
                color: '#319FD3',
                width: 1
            })
        });
    }

保存后可以在浏览器内查看如下图所示:

画图