vue项目使用arcgis js api4.8 封装画路线功能

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Draw from "@arcgis/core/views/draw/Draw";
import Graphic from "@arcgis/core/Graphic";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
import symbols from './symbols';
import Deferred from './deferred'
export  default class Drafter{
  constructor(mapView) {
    this.core=new DrafterCore(mapView);
  }
//绘制路线
  DrawRouteLine(){
     return this.core.DrawPolyline(symbols.routeLine);
  }
  //绘制轨迹
  DrawTrajectoryLine(){
    return this.core.DrawPolyline(symbols.trajectoryLine);
  }
  //清除
  CleanDraw(){
    this.core.CleanDrawLayer();
  }
}
class DrafterCore{
  constructor(mapView) {
    this.mapView=mapView;
    this.drawLayer=null;
    this.ContinueDraw=null;
    this.EndDraw=null;
    this.type=null;
    this.types={
      polyline:"polyline",
      polygon:"polygon"
    }
    this.symbol=null;
    this.symbols={
       "polygon":{
         type: "simple-fill",
         style: "solid",
         outline: { // 用户上传图层用橘红
           color: [255, 209, 0], // "green", //[255, 69, 0, 1],
           width: "1"
         }
       },
      "polyline":{
        type: "simple-line", // autocasts as new SimpleFillSymbol
        color: [4, 90, 141],
        width: 4,
        cap: "round",
        join: "round"
      }
    };
    this.defer=null;
  }
  CleanDrawLayer(){
    this.drawLayer=this.mapView.map.layers.find(layer=>{
      return layer.title==="draw_layer"
    });

    this.mapView.map.remove(this.drawLayer);
  }
  DrawPolyline(symbol){
     this.defer=new Deferred();//$.Deferred();
     this.type=this.types.polyline;
     this.symbol=symbol;
     this.ContinueDraw=this.PolylineContinueDraw;
     this.EndDraw=this.PolylineEndDraw;
     this.BeginDraw();
     return this.defer;
  }
  BeginDraw(){
    this.drawLayer=this.mapView.map.layers.find(layer=>{
      return layer.title==="draw_layer"
    });
    this.mapView.map.remove(this.drawLayer);
      this.drawLayer=new GraphicsLayer({
        title:"draw_layer"
      });
      this.mapView.map.add(this.drawLayer);
    //创建draw对象
    if (this.draw == null) {
      this.draw = new Draw({
        view: this.mapView
      });
    }
    //创建drawAction对象
    this.drawAction = this.draw.create(this.type);
    //绑定绘制中的事件响应
    this.drawAction.on(
      [
        "vertex-add",
        "vertex-remove",
        "cursor-update",
        "redo",
        "undo"
      ],
      (event)=>{this.ContinueDraw(event);}
    );
    //绑定绘制结束事件响应
    this.drawAction.on("draw-complete", (evt) => {
      this.EndDraw(evt);
    });
  }
  PolylineContinueDraw(event) {
    // create a polyline from returned vertices
    if (event.vertices.length > 1) {
      const result = this.createGraphic(event);

      // if the last vertex is making the line intersects itself,
      // prevent the events from firing
      if (result.selfIntersects) {
        event.preventDefault();
      }
    }
  }
  PolylineEndDraw(event){
    if (event.vertices.length > 1) {
      const result = this.createGraphic(event);
      if (result.selfIntersects) {
        event.preventDefault();
      }else{
        this.defer.resolve(result.geometry)
      }
    }
  }
  createGraphic(event) {
    const vertices = event.vertices;
    this.drawLayer.graphics.removeAll();
    const graphic = new Graphic({
      geometry: {
        type: "polyline",
        paths: vertices,
        spatialReference: this.mapView.spatialReference
      },
      symbol:(this.symbol && this.symbol.type==="simple-line")?this.symbol: this.symbols["polyline"]
    });
    const intersectingSegment = this.getIntersectingSegment(graphic.geometry);
    if (intersectingSegment) {
      this.drawLayer.graphics.addMany([graphic, intersectingSegment]);
    }
    else {
      this.drawLayer.graphics.add(graphic);
    }
    return {
      selfIntersects: intersectingSegment,
      geometry:graphic.geometry
    };
  }
  isSelfIntersecting(polyline) {
    if (polyline.paths[0].length < 3) {
      return false;
    }
    const line = polyline.clone();
    const lastSegment = this.getLastSegment(polyline);
    line.removePoint(0, line.paths[0].length - 1);
    return false
  }
  getIntersectingSegment(polyline) {
    if (this.isSelfIntersecting(polyline)) {
      return new Graphic({
        geometry: this.getLastSegment(polyline),
        symbol: {
          type: "simple-line", // autocasts as new SimpleLineSymbol
          style: "short-dot",
          width: 3.5,
          color: "yellow"
        }
      });
    }
    return null;
  }
  getLastSegment(polyline) {
    const line = polyline.clone();
    const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
    const existingLineFinalPoint = line.getPoint(
      0,
      line.paths[0].length - 1
    );
    return {
      type: "polyline",
      spatialReference: this.mapView.spatialReference,
      hasZ: false,
      paths: [
        [
          [existingLineFinalPoint.x, existingLineFinalPoint.y],
          [lastXYPoint.x, lastXYPoint.y]
        ]
      ]
    };
  }
}