五章-51-绘制形状

2020-04-07 本文已影响0人彩云飘过

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1051.html ，对应的官网示例 https://openlayers.org/en/latest/examples/draw-shapes.html

关键是addInteraction函数的实现
 ol.interaction.Draw.createRegularPolygon
ol.interaction.Draw.createBox

image.png

<!DOCTYPE html>
<html>

<head>
   <title>绘制形状</title>
   <link rel="stylesheet" href="../include/ol.css" type="text/css" />
   <script src="../include/ol.js"></script>
</head>
<style></style>

<body>
   <form class="form-inline">
       <label>形状类型 &nbsp;</label>
       <select id="type">
           <option value="Circle">圆形</option>
           <option value="Square">方形</option>
           <option value="Box">矩形</option>
           <option value="Star">六角星型</option>
           <option value="None">无</option>
       </select>
   </form>

   <div id="map" class="map"></div>

   <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; 
       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';
                   //自定义绘图函数，绘制六角星，共12个顶点
                   geometryFunction = function (coordinates, geometry) {
                       //中心点
                       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.58;
                           //计算顶点的坐标
                           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()); //把第一个顶点坐标加入，形成一个闭合的环
                       if (!geometry) {
                           geometry = new ol.geom.Polygon([newCoordinates]);
                       } else {
                           geometry.setCoordinates([newCoordinates]);
                       }
                       return geometry;
                   };
               }

               draw = new ol.interaction.Draw({
                   source: source,
                   type: value,
                   geometryFunction: geometryFunction
               });
               map.addInteraction(draw);
           }
       }


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

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

</html>

五章-51-绘制形状

猜你喜欢

热点阅读