【OpenLayer : 语法】绘制点线面功能（一）

一、参考博客或官网：

 1、https://openlayers.org/en/latest/examples/draw-freehand.html

 2、

二、功能点效果展示：

 

三、实现方式讲解：

 

     

 

四、最简单的实现方式：

import Draw from 'ol/interaction/Draw.js';
var source = new VectorSource({wrapX: false});
var vector = new VectorLayer({
      source: source
 });
// 生成交互对象
var draw = new Draw({
            source: source ， //将矢量数据源添加进去
            type: 点线面的类型：LineString,Polygon,Circle....
            freehand: true
          });
		  
map.addLayer(vector);//将图层添加到地图上，否则无法显示绘制的元素。	  
map.addInteraction(draw);	//添加交互
map.removeInteraction(draw);    //删除交互

地图中添加绘制交互对象。
1、生成一个绘制交互对象 ；
2、地图中添加该交互对象到原有的交互对象集合中。      

1、通过地图Map的添加移除
map.addInteraction(draw);    
map.removeInteraction(draw);
来实现这个功能的启动和关闭。--海萍的是吗？
2、生成绘制交互对象的source才是问题关键：因为不一定之前生成了图层或图层的源。

 

【注意事项】

1、  绘制的点线面一般是添加到VectorLayer矢量图层的VectorSource矢量数据源上面的。并且需要把该VectorLayer矢量图层添加到地图中，这样才能显示出来。

2、绘制的点线面的数据源：可以是矢量数据源VectorSource , 但是不能是：ol.source.OSM() 【和对应的图层：ol.layer.Tile()，这个可能不用考虑，毕竟图层是用于显示，数据源才是用于添加绘制元素的】，或者会报错：

3、Map.addLayer()是按照“栈”结构来的，也就是越是后加入的图层，越在上层。