gmap-ol/dist/DrawingUtil/drawFeatures.js

A set of helper classes for working with openLayers.

import { Draw, Modify, Snap } from 'ol/interaction';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { getOptionsStyle } from '../MapUtil/MapUtil';
import { modifyStyle } from './StyleConfig.js';
import { removeLayer } from '../LayerUtil/LayerUtil';

/**
 * 绘制图形
 *
 * @param {import("ol/Map").default} map An OlMap.
 * @param {string} name The name of the interaction to look for.
 *
 */
let olmap = null;
let source = null;
let modify = null;
let draw = null;
let snap = null;
let drawLayer = null;

const drawFeatures = (map, drawOptions, drawCallbackFn) => {
  if (map === null || map === undefined) {
    return; // 终止函数执行
  }
  olmap = map;
  source = new VectorSource();
  modify = new Modify({ source: source, style: modifyStyle });

  if (draw) {
    olmap.removeInteraction(draw);
    olmap.removeInteraction(snap);
  }

  const drawType = drawOptions.type;
  // 地图展示的图层
  drawLayer = new VectorLayer({
    source: source,
    zIndex: 1000,
    style: function (feature) {
      return styleFunction(feature);
    },
  });

  drawLayer.set('layerName', `DrawFeatureVectorLayer${Math.floor(Math.random() * 100 + 1)}`);

  olmap.addLayer(drawLayer);
  olmap.addInteraction(modify);

  // let draw, snap; // global so we can remove them later
  function addInteractions() {
    draw = new Draw({
      source: source,
      type: drawType,
    });
    olmap.addInteraction(draw);
    snap = new Snap({ source: source });
    olmap.addInteraction(snap);
  }

  addInteractions();

  // 开始绘制
  draw.on('drawstart', () => {
    if (drawOptions.clearPrevious) {
      clearMeasure();
    }
    modify.setActive(false);
  });

  // 结束绘制
  draw.on('drawend', () => {
    setTimeout(() => {
      const sourceData = drawLayer.getSource();
      return drawCallbackFn ? drawCallbackFn(sourceData) : null;
    }, 100);
  });

  // 修改图形
  modify.on('modifyend', () => {
    setTimeout(() => {
      const sourceData = drawLayer.getSource();
      return drawCallbackFn ? drawCallbackFn(sourceData) : null;
    }, 100);
  });

  // 设置颜色
  const styleFunction = () => {
    const style = {
      fill: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
      stroke: {
        width: 2,
        color: 'rgba(0, 153, 255, 1)',
        // lineDash: [10, 10],
      },
      image: {
        radius: 6,
        stroke: {
          color: 'rgba(255, 255, 255, 1)',
        },
        fill: {
          color: 'rgba(0, 153, 255, 1)',
        },
      },
      ...drawOptions.styles,
    };
    const styles = getOptionsStyle(style);
    return styles;
  };
};

// 清除绘制
const clearMeasure = () => {
  source.clear();
  drawLayer.getSource().clear();
};

// 删除绘制
const removeDraw = () => {
  if (draw) {
    let drawInteraction, snapInteraction;
    olmap.getInteractions().forEach((interaction) => {
      if (interaction instanceof Draw) {
        drawInteraction = interaction;
      }
      if (interaction instanceof Snap) {
        snapInteraction = interaction;
      }
    });
    // 从地图上移除该交互
    if (drawInteraction) {
      olmap.removeInteraction(drawInteraction);
    }
    if (snapInteraction) {
      olmap.removeInteraction(snapInteraction);
    }
    // 清除数据
    source.clear();
    drawLayer.getSource().clear();
    removeLayer(olmap, 'DrawFeatureVectorLayer');
  }
};

export { drawFeatures, removeDraw };