Draw Features——绘制要素

来源：互联网发布：苹果老虎机软件下载编辑：程序博客网时间：2024/06/06 03:28

Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and circles, hold the Shift key.
使用绘图交互控件的例子。从上面的下拉列表框中选择一种几何类型开始绘制。单击最后一个点完成绘制。按住shift键激活自由绘制线、多边形和圆形。

代码：

<!DOCTYPE html><html>  <head>    <title>Draw Features</title>    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  </head>  <body>    <div id="map" class="map"></div>    <form class="form-inline">      <label>Geometry type  </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>    </form>    <script>      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: [-11000000, 4600000],          zoom: 4        })      });      // 获取绘制几何体类型      var typeSelect = document.getElementById('type');      var draw; // global so we can remove it later // 全局变量因此我们可以稍后移除它      // 创建交互绘制对象并添加到map中      function addInteraction() {        var value = typeSelect.value;        if (value !== 'None') {          draw = new ol.interaction.Draw({            source: source,            type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)          });          map.addInteraction(draw);        }      }      /**       * Handle change event. // 处理change事件       */      typeSelect.onchange = function() {        map.removeInteraction(draw);        addInteraction();      };      addInteraction();    </script>  </body></html>

阅读全文

0 0