openlayers绘制功能

地图绘制操作

初始化画图区域

    this.drawSource = new ol.source.Vector();
    this.drawLayer = new ol.layer.Vector({
      zIndex: 99999,
      source: this.drawSource,
      style: feature => {
        return new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#FFFFFF',
            width: 2
          }),
          image: new ol.style.Icon({
            anchor: [0.5, 1],
            anchorOrigin: 'top-left',
            offsetOrigin: 'bottom-center',
            scale: 0.5,  //图标缩放比例
            opacity: 1,  //透明度location.png
            src: 'static/img/location.png' //图标的url
          }),
          text: new ol.style.Text({
            overflow: 'true',
            offsetY: '5',
            offsetX: '5',
            textAlign: 'center',//位置
            textBaseline: 'top',//基准线
            font: 'normal 12px 微软雅黑',
            text: this.getGeomText(feature),//文本内容
            fill: new ol.style.Fill({color: '#FFFFFF'}),
          }),
        })
      }
    });
    this.map.addLayer(this.drawLayer);

初始化画图功能

  this.draw = new ol.interaction.Draw({
      stopClick: true,
      source: this.drawSource,
      type: 'LineString' //线 - LineString     点 - Point    面 - Polygon
    });
    this.map.addInteraction(this.draw);
    //闭合吸附
    this.snap = new ol.interaction.Snap({source: this.drawSource});
    this.map.addInteraction(this.snap);
	 //可拖拽点
    this.modify = new ol.interaction.Modify({source: this.drawSource});
    this.map.addInteraction(this.modify);
    
     //移除绘制
     if (this.draw) this.map.removeInteraction(this.draw);
     if (this.snap) this.map.removeInteraction(this.snap);
     if (this.modify) this.map.removeInteraction(this.modify);

绘制回调函数

 this.draw.on('drawend', evt => this.addShapeForm(evt));  //drawstart  drawend
 this.modify.on('modifyend', evt => this.editShapeForm(evt));//modifystart  drawend

获取绘制后图形坐标点

  feature.coordinates = evt.feature.clone().getGeometry().transform('EPSG:3857', 'EPSG:4326').getCoordinates();

移除元素

  this.drawLayer.getSource().removeFeature(evt);

清除画布

  this.drawSource.clear();