五章-52-自由绘制

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

五章-52-自由绘制
Fabric.js 自由绘制圆形
直播涂鸦礼物
“🐊计划”12/21🎵🧠❤️
52-痘痘
52-梅林
52-戒律
52-疫情
Day 52 Get cold feet
【博图第七期】英国博赞思维导图管理师认证班王惠娟第六幅

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

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

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="LineString">线条</option>
           <option value="Polygon">多边形</option>
           <option value="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 });

       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,
                   freehand: true //自由绘制的关键
               });
               map.addInteraction(draw);
           }
       }



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

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

</html>