五章-50-绘制点线面

作者: 彩云飘过 | 来源:发表于2020-04-07 18:48 被阅读0次

五章-50-绘制点线面
绘制模式
Primitive绘制点线面
Primitive篇（贴图）
学习WebGL文章目录
零基础入门OpenGL系列教程（六、早期OpenGL绘图属性）
2021.1.31（晴）
学习WebGL之绘制点线面
arcgis for android（10.2.9）- 点线面绘
OpenGL ES入门点线面的绘制

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

源码见 1050.html ，对应的官网示例 https://openlayers.org/en/latest/examples/draw-features.html?q=Drag

https://openlayers.org/en/latest/examples/draw-freehand.html?q=interaction

freehand 属性，在徒手模式下操作线条、多边形和圆。这使得交互总是在徒手模式下进行，并优先于任何徒手条件选项。

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="Point">Point</option>
           <option value="LineString">LineString</option>
           <option value="Polygon">Polygon</option>
           <option value="Circle">Circle</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 //地图缩放后，世界地图重复出现，这里控制绘制的要素是否重复重现，默认为true
       });

       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') {
               //关键点，定义交互绘制操作
               draw = new ol.interaction.Draw({
                   source: source,
                   type: typeSelect.value
               });
               map.addInteraction(draw);
           }
       }


       typeSelect.onchange = function () {
           map.removeInteraction(draw); //将原有的交互操作去掉
           addInteraction();
       };

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

</html>