三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据

官网demo地址：

Draw Features 

先初始化地图，准备一个空的矢量图层，用于显示绘制的图形。

initLayers() {
      const raster = new TileLayer({
        source: new XYZ({
          url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        }),
      });

      const source = new VectorSource({ wrapX: false });

      this.vectorlayer = new VectorLayer({
        source: source,
      });
      this.map = new Map({
        layers: [raster, this.vectorlayer],
        target: "map",
        view: new View({
          center: [-11000000, 4600000],
          zoom: 4,
        }),
      });
    },

 想要在地图上绘制图形，需要用到一个交互类Draw，new Draw，设置绘制的图形类型。常见类型包括 'Point', 'LineString', 'Polygon', 'Circle', 'MultiPoint', 'MultiLineString', 'MultiPolygon'。

addDrawInteraction() {
      this.draw = new Draw({
        source: this.vectorlayer.getSource(),
        type: this.type,
      });
      this.map.addInteraction(this.draw);
    },

Draw还有些常用参数

1. clickTolerance:

   • 类型: number
   • 描述: 指定绘制时允许的点击距离容差（以像素为单位）。这是为了允许用户在移动鼠标时具有一定的容差，以便更容易地点击绘制。
   • 默认值: 6

2. features:

   • 类型: ol.Collection<ol.Feature>
   • 描述: 一个 Collection 实例，用于存储绘制的特征。如果指定了此属性，绘制的特征将添加到该集合中。

3. source