Draw Shapes——绘制图形

最新推荐文章于 2024-06-16 19:42:46 发布

桃李不言_下自成蹊

最新推荐文章于 2024-06-16 19:42:46 发布

阅读量1.3k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

该教程展示如何利用OpenLayers库的交互式绘制功能创建不同类型的形状，如正方形、矩形和五角星。通过选择下拉菜单中的形状类型开始绘制，按住特定键可以进行自由绘图。同时，通过自定义几何函数实现从圆到星形的转换。

摘要由CSDN通过智能技术生成

This demonstrates the use of the geometryFunction option for the ol.interaction.Draw. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold the Shift key. Square drawing is achieved by using type: 'Circle' type with a geometryFunction that creates a 4-sided regular polygon instead of a circle. Box drawing uses type: 'Circle' with a geometryFunction that creates a box-shaped polygon instead of a circle. Star drawing uses a custom geometry function that coverts a circle into a start using the center and radius provided by the draw interaction.
这个例子演示了为

ol.interaction.Draw 使用 geometryFunction 设置。从上面的下拉列表中选择一种图形类型开始绘制。按住shift键激活自由绘制。正方形的绘制通过type: 'Circle'类型来实现，这个类型使用一个创建4边规整的多边形而不是一个圆形的geometryFunction。盒形的绘制使用type: 'Circle'类型，这个类型使用一个创建盒形的多边形而不是一个圆形的geometryFunction。星形的绘制使用一个自定义的几何函数，这个函数使用交互绘制控件提供的中心和半径把一个圆形转换为一个星形。
 
 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Shapes</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>Shape type  </label>
      <select id="type">
        <option value="Square">Square</option>
        <option value="Box">Box</option>
        <option value="Star">Star</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 // 全局变量因此我们可以稍后移除它
      function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
          var geometryFunction;
          // 根据几何对象的类型调用相应的几何函数
          if (value === 'Square') {
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
          } else if (value === 'Box') {
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
          } else if (value === 'Star') {
            value = 'Circle';
            // 自定义的几何函数
            geometryFunction = function(coordinates, geometry) {
              if (!geometry) {
                geometry = new ol.geom.Polygon(null);
              }
              var center = coordinates[0];
              var last = coordinates[1];
              var dx = center[0] - last[0];
              var dy = center[1] - last[1];
              var radius = Math.sqrt(dx * dx + dy * dy);
              var rotation = Math.atan2(dy, dx);
              var newCoordinates = [];
              var numPoints = 12;
              for (var i = 0; i < numPoints; ++i) {
                var angle = rotation + i * 2 * Math.PI / numPoints;
                var fraction = i % 2 === 0 ? 1 : 0.5;
                var offsetX = radius * fraction * Math.cos(angle);
                var offsetY = radius * fraction * Math.sin(angle);
                newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
              }
              newCoordinates.push(newCoordinates[0].slice());
              geometry.setCoordinates([newCoordinates]);
              return geometry;
            };
          }
          // 创建交互绘图控件并将其添加到map中 
          draw = new ol.interaction.Draw({
            source: source,
            type: /** @type {ol.geom.GeometryType} */ (value),
            // 使用几何函数创建几何对象
            geometryFunction: geometryFunction
          });
          map.addInteraction(draw);
        }
      }


      /**
       * Handle change event. // 处理change事件
       */
      typeSelect.onchange = function() {
        map.removeInteraction(draw);
        addInteraction();
      };

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

桃李不言_下自成蹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Draw Shapes——绘制图形

This demonstrates the use of the geometryFunction option for the ol.interaction.Draw. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold theShift ke
复制链接

扫一扫

专栏目录