gisviewer-vue3-arcgis/es/src/gis-map/utils/sketchView.mjs

在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：

import * as L from "@arcgis/core/geometry/geometryEngine.js";
import G from "@arcgis/core/geometry/Polygon";
import P from "@arcgis/core/geometry/Polyline";
import * as g from "@arcgis/core/geometry/support/webMercatorUtils.js";
import l from "@arcgis/core/Graphic";
import f from "@arcgis/core/layers/GraphicsLayer";
import k from "@arcgis/core/widgets/Sketch";
import S from "@arcgis/core/widgets/Sketch/SketchViewModel";
import * as d from "@turf/helpers";
import b from "@turf/intersect";
import { v4 as M } from "uuid";
import A from "../../stores/index.mjs";
function u(c, t = []) {
  if (c === null || typeof c != "object")
    return c;
  if (Object.prototype.toString.call(c) === "[object Date]")
    return new Date(c);
  if (Object.prototype.toString.call(c) === "[object RegExp]")
    return new RegExp(c);
  if (Object.prototype.toString.call(c) === "[object Error]")
    return new Error(c);
  const e = t.filter((s) => s.original === c)[0];
  if (e)
    return e.copy;
  const i = Array.isArray(c) ? [] : {};
  return t.push({
    original: c,
    copy: i
  }), Object.keys(c).forEach((s) => {
    i[s] = u(c[s], t);
  }), i;
}
const x = {
  maxAllowedGraphics: 0,
  GraphicsLayer: {},
  sketchVisibleElements: {},
  sketchPosition: "top-right",
  defaultSketchVisible: !0,
  sketchViewModelItemSymbol: {}
}, m = {
  type: "simple-line",
  color: "#556DEA",
  width: 2
}, y = {
  type: "simple-fill",
  // autocasts as new SimpleFillSymbol()
  color: [227, 139, 79, 0.4],
  outline: {
    // autocasts as new SimpleLineSymbol()
    color: [255, 255, 255],
    width: 1
  }
};
class C {
  constructor(t, e) {
    this.viewer = t, this.options = {
      ...x,
      ...e
    }, this.graphicsLayer = new f({ ...this.options.GraphicsLayer }), this.TextGraphicsLayer = new f(), this.viewer.map.addMany([this.graphicsLayer, this.TextGraphicsLayer]), this.init();
  }
  updateSketch(t) {
    const e = new l({
      geometry: {
        type: "polygon",
        rings: [t]
      },
      symbol: {
        type: "simple-fill",
        color: [227, 139, 79, 0.4],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      }
    });
    this.graphicsLayer.add(e), this.sketchViewModel.update([e], {
      tool: "reshape",
      enableRotation: !0
    });
  }
  cancelSketch() {
    this.sketchViewModel.cancel();
  }
  init() {
    this.sketchViewModel = new S({
      layer: this.graphicsLayer,
      view: this.viewer,
      updateOnGraphicClick: !0,
      polylineSymbol: m,
      polygonSymbol: y,
      ...this.options.sketchViewModelItemSymbol
    });
    const t = this.findLayerById("TrafficMarkings"), e = [];
    t && e.push({ layer: t, enabled: !0 }), this.sketch = new k({
      view: this.viewer,
      viewModel: this.sketchViewModel,
      layer: this.graphicsLayer,
      visible: this.options.defaultSketchVisible,
      creationMode: this.options.creationMode || "single",
      // multiple | single | update
      snappingOptions: {
        // autocasts to SnappingOptions()
        enabled: !0,
        // global snapping is turned on
        // assigns a collection of FeatureSnappingLayerSource() and enables feature snapping on this layer
        featureSources: e
      }
    }), this.sketch.visibleElements = {
      ...this.options.sketchVisibleElements
    }, this.viewer.ui.add(this.sketch, this.options.sketchPosition);
    const i = A.useAppDataStore;
    this.sketch.on("create", (s) => {
      s.state === "complete" ? i.isSketching = !1 : s.state === "start" && (i.isSketching = !0);
    });
  }
  /**
   * 初始化绘图
   *
   * @param {*} data
   * @param {string} [type='crossArea']
   * @param {boolean} [reverse=false] 是否反转
   * @returns
   * @memberof SketchView
   */
  initPoint(t, e = "all", i = !1) {
    if (!t)
      return;
    const { crossArea: s, sectionArea: r } = t;
    if (s && (e == "crossArea" || e == "all")) {
      const o = this.initCrossArea(s);
      this.graphicsLayer.add(o);
    }
    if (r && (e == "sectionArea" || e == "all")) {
      const o = this.initSectionArea(r, i);
      this.graphicsLayer.addMany(o);
    }
  }
  /**
   * 初始化进口道融合区
   *
   * @param {any[]} data
   * @memberof SketchView
   */
  initEntranceFusionZone(t) {
    const e = [];
    t.map((i) => {
      e.push(this.createPolygonGraphic(i, y, {}));
    }), this.graphicsLayer.addMany(e);
  }
  initCrossArea(t) {
    return this.createPolygonGraphic(t, y, {});
  }
  /**
   * 初始进出口道计算区域
   *
   * @param {*} data
   * @param {boolean} [reverse=false] 是否反转
   * @returns
   * @memberof SketchView
   */
  initSectionArea(t, e = !1) {
    const i = [], s = {
      type: "simple-line",
      color: [0, 0, 255],
      width: 2
    };
    return Object.keys(t).map((r) => {
      const o = t[r][0], a = t[r][1];
      e && (o.reverse(), a.reverse());
      const n = M(), h = this.createPolylineGraphic(
        o,
        m,
        {
          type: "draw",
          id: n
        }
      ), p = this.createPolylineGraphic(a, s, {
        type: "shiftLine",
        id: n
      });
      i.push(h, p);
    }), i;
  }
  createPolylineGraphic(t, e, i) {
    const s = new P({
      paths: t
    }), r = g.geographicToWebMercator(s);
    return new l({
      geometry: r,
      // Add the geometry created in step 3
      symbol: e,
      // Add the symbol created in step 4
      attributes: i
    });
  }
  createPolygonGraphic(t, e, i) {
    const s = new G({
      rings: t
    }), r = g.geographicToWebMercator(s);
    return new l({
      geometry: r,
      // Add the geometry created in step 3
      symbol: e,
      // Add the symbol created in step 4
      attributes: i
    });
  }
  on(t) {
    const e = this;
    this.sketchViewModel.on("create", function(i) {
      var r, o, a;
      const s = e.graphicsLayer.graphics;
      if ((r = e.options) != null && r.maxAllowedGraphics && s.length > ((o = e.options) == null ? void 0 : o.maxAllowedGraphics)) {
        e.graphicsLayer.remove(i.graphic), console.log("已达到最大图形数量，无法继续绘制！");
        return;
      }
      if (i.state === "complete" && ((a = i.graphic) != null && a.geometry)) {
        const n = i.graphic.geometry;
        i.graphic.setAttribute("type", "draw"), i.graphic.setAttribute("id", new Date().getTime());
        const h = e.getGraphicPoint(n);
        t && t("create", h, i);
      }
    }), this.sketchViewModel.on("update", function(i) {
      if (i.aborted) {
        const s = i.graphics[0];
        e.graphicsLayer.remove(s);
        return;
      }
      if (i.state === "complete" && i.graphics.length > 0) {
        const r = i.graphics[0].geometry, o = e.getGraphicPoint(r);
        t && t("update", o, i);
      }
    }), this.sketchViewModel.on("delete", function(i) {
      if (console.log("delete", i), i.graphics.length > 0) {
        const r = i.graphics[0].geometry, o = e.getGraphicPoint(r);
        t && t("delete", o, i);
      }
    });
  }
  /**
   * 获取当前绘制的计算区域
   * @returns
   */
  graphicPoint() {
    const t = [];
    return this.graphicsLayer.graphics.map((e) => {
      var r;
      const i = e.geometry, s = this.getGraphicPoint(i);
      t.push({
        point: s,
        type: (r = e.attributes) == null ? void 0 : r.type,
        attributes: e.attributes
      });
    }), t;
  }
  /**
   * 获取进口道区域
   *
   * @memberof SketchView
   */
  getEntranceRoad() {
    const t = {}, e = this.graphicPoint().filter(
      (n) => n.point.type === "polyline"
    );
    if (console.log(
      "🚀 ~ file: sketchView.ts:378 ~ SketchView ~ getEntranceRoad ~ graphics:",
      e
    ), !e.length)
      return !1;
    const i = e.filter((n) => n.type == "draw"), s = e.filter((n) => n.type == "shiftLine");
    if (s.length == 0)
      throw "未绘制平移！";
    if (i.length != s.length)
      throw "绘制的线和平移的线数量不一致！";
    const r = i.sort((n, h) => n.point.angle - h.point.angle), o = r.findIndex((n) => n.point.angle > 135);
    return [
      ...r.slice(o),
      ...r.slice(0, o).reverse()
    ].map((n, h) => {
      const p = s.find(
        (w) => w.attributes.id == n.attributes.id
      );
      if (!p)
        throw "绘制的线和平移的线不匹配！";
      console.log(
        "🚀 ~ file: sketchView.ts:393 ~ SketchView ~ getEntranceRoad ~ m:",
        n,
        p
      ), t[h + 1] = {
        0: [n.point.paths[0], n.point.paths[n.point.paths.length - 1]],
        1: [
          p.point.paths[0],
          p.point.paths[p.point.paths.length - 1]
        ]
      };
    }), t;
  }
  /**
   * 获进口道融合区
   *
   * @param {armData} armData 进口道编号区域
   * @param {number[]} armNoList 进口道编号列表
   * @returns
   * @memberof SketchView
   */
  getEntranceFusionZone(t) {
    const e = [], i = {};
    this.graphicsLayer.graphics.map((r) => {
      var n;
      const o = r.geometry, a = this.getGraphicPoint(o, !1);
      e.push({
        point: a,
        type: (n = r.attributes) == null ? void 0 : n.type,
        attributes: r.attributes
      });
    });
    const s = e;
    return t.map((r, o) => {
      i[r] = e[o];
    }), { graphics: i, rawData: s };
  }
  /**
   * 获取进口道所在的进口道编号
   *
   * @param {armData} armData 进口道编号区域
   * @param {*} graphicPolygon 绘制的区域
   * @returns
   * @memberof SketchView
   */
  getIntersectionArea(t, e) {
    const i = Object.keys(t);
    let s = !1;
    for (let r = 0; r < i.length; r++) {
      const o = i[r], a = t[o];
      if (b(
        d.polygon(e),
        d.polygon(a)
      )) {
        s = o;
        break;
      }
    }
    return s;
  }
  filterData(t) {
    const e = u(t);
    return e.length > 0 && e[0][0] === e[e.length - 1][0] && e[0][1] === e[e.length - 1][1] && e.pop(), e;
  }
  /**
   *
   *
   * @private
   * @param {*} geometry
   * @param {boolean} [isFilterData=true] 是否过滤首尾相同点数据
   * @returns
   * @memberof SketchView
   */
  getGraphicPoint(t, e = !1) {
    let i = t;
    this.viewer.spatialReference.isWebMercator && (i = g.webMercatorToGeographic(t));
    let s;
    if (t.type === "point")
      s = {
        type: t.type,
        x: i.x,
        y: i.y
      };
    else if (t.type === "polyline") {
      s = {
        type: t.type,
        paths: []
      }, i.paths.forEach((n) => {
        let h = n;
        e && (h = this.filterData(n)), h.forEach((p) => {
          s.paths.push(p);
        });
      });
      const r = {
        x: s.paths[0][0],
        y: s.paths[0][1]
      }, o = {
        x: s.paths[s.paths.length - 1][0],
        y: s.paths[s.paths.length - 1][1]
      }, a = this.getAngle(r, o);
      s.angle = a;
    } else
      t.type === "polygon" && (s = {
        type: t.type,
        rings: []
      }, i.rings.forEach((r) => {
        let o = r;
        e && (o = this.filterData(r)), o.forEach((a) => {
          s.rings.push(a);
        });
      }));
    return s;
  }
  close() {
    this.sketch.visible = !1;
  }
  show() {
    this.sketch.visible = !0;
  }
  removeAll() {
    this.graphicsLayer.removeAll();
  }
  /**
   *  获取两点的角度
   *
   * @param {ITPoint} startPoint
   * @param {ITPoint} endPoint
   * @returns
   * @memberof SketchView
   */
  getAngle(t, e) {
    const i = e.x - t.x, s = e.y - t.y;
    return Math.atan2(s, i) * 180 / Math.PI;
  }
  /**
   *  获取线平移后的坐标
   *
   * @param {Polyline} lineGeometry 线的几何图形
   * @param {number} distance 平移的距离，默认米
   * @param {LinearUnits} [offsetUnit='meters']
   * @returns
   * @memberof SketchView
   */
  getShiftLine(t, e, i = "meters") {
    const s = t, r = -e;
    return L.offset(
      s,
      r,
      i
    );
  }
  /**
   * 设置线的平移
   *
   * @param {number} distance 平移的距离，默认米
   * @param {LinearUnits} [offsetUnit='meters'] 平移的单位
   * @param {*} symbol 线的样式
   * @memberof SketchView
   */
  setShiftLine(t, e = "meters", i) {
    i || (i = {
      type: "simple-line",
      color: [0, 0, 255],
      width: 2
    }), this.removeShiftLine(), this.graphicsLayer.graphics.map((s) => {
      const r = s.geometry, o = s.attributes;
      if ((r == null ? void 0 : r.type) === "polyline" && (o == null ? void 0 : o.type) === "draw") {
        const a = o.id, n = this.getShiftLine(
          r,
          t,
          e
        ), h = new l({
          geometry: n,
          symbol: i,
          attributes: { type: "shiftLine", id: a }
        });
        this.graphicsLayer.add(h);
      }
    });
  }
  /**
   * 移除平移线
   *
   * @memberof SketchView
   */
  removeShiftLine() {
    const t = [];
    this.graphicsLayer.graphics.map((e) => {
      const i = e.attributes;
      (i == null ? void 0 : i.type) === "shiftLine" && t.push(e);
    }), this.graphicsLayer.removeMany(t);
  }
  /**
   * 移除绘制的线
   *
   * @memberof SketchView
   */
  removeDraw() {
    const t = [];
    this.graphicsLayer.graphics.map((e) => {
      const i = e.attributes;
      (i == null ? void 0 : i.type) === "draw" && t.push(e);
    }), this.graphicsLayer.removeMany(t);
  }
  addGraphic(t, e = {
    type: "simple-line",
    color: [0, 0, 255],
    width: 2
  }, i) {
    const s = new l({
      geometry: t,
      symbol: e,
      attributes: i
    });
    this.graphicsLayer.add(s);
  }
  /**
   * 获取方向
   *
   * @param {ITPoint} startPoint 起点
   * @param {ITPoint} endPoint 终点
   * @returns
   * @memberof SketchView
   */
  getDirection(t, e) {
    const i = e.x - t.x, s = e.y - t.y, o = Math.atan2(s, i) * 180 / Math.PI;
    return o >= -45 && o <= 45 ? 0 : o > 45 && o <= 135 ? 1 : o > 135 || o <= -135 ? 2 : 3;
  }
  findLayerById(t) {
    return this.viewer.map.findLayerById(t);
  }
  /**
   *  根据id查找平移线graphic
   *
   * @param {string} id
   * @returns
   * @memberof SketchView
   */
  findShiftLineGraphicsById(t) {
    return this.graphicsLayer.graphics.find((i) => i.attributes.id === t && i.attributes.type === "shiftLine");
  }
  /**
   *  删除指定的图形
   * @param graphic 删除指定的图形
   */
  remove(t) {
    this.graphicsLayer.remove(t);
  }
  /**
   *  设置最大允许绘制的图形数量
   * @param num  数量
   */
  setMaxAllowedGraphics(t) {
    this.options.maxAllowedGraphics = t === 0 ? void 0 : t;
  }
  // deepClone(obj: any) {}
  destroy() {
    var t, e;
    this.viewer.map.remove(this.graphicsLayer), this.viewer.map.remove(this.TextGraphicsLayer), (t = this.sketch) == null || t.destroy(), (e = this.sketchViewModel) == null || e.destroy();
  }
}
export {
  C as default
};