gisviewer-vue3-arcgis 1.0.85

package/es/src/gis-map/utils/sketchView.d.ts

@@ -0,0 +1,209 @@
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';
+import Sketch from '@arcgis/core/widgets/Sketch';
+import Graphic from '@arcgis/core/Graphic';
+interface sketchViewOptions {
+    /**
+     * 最大允许绘制的图形数量
+     */
+    maxAllowedGraphics?: number;
+    /**
+     * 图形图层配置
+     */
+    GraphicsLayer?: {};
+    /**
+     * 绘制工具显示的元素
+     */
+    sketchvisibleElements?: {};
+    /**
+     * 绘制工具显示的位置
+     */
+    sketchPosition?: string;
+    /**
+     * 绘制工具默认是否显示
+     *
+     * @type {boolean}
+     * @memberof sketchViewOptions
+     */
+    defaultsketchVisible?: boolean;
+    sketchViewModelItemSymbol?: {
+        polylineSymbol?: any;
+        polygonSymbol?: any;
+        pointSymbol?: any;
+    };
+}
+interface ITPoint {
+    x: number;
+    y: number;
+}
+declare type LinearUnits = 'meters' | 'feet' | 'kilometers' | 'miles' | 'nautical-miles' | 'yards' | number;
+export default class SketchView {
+    private viewer;
+    graphicsLayer: GraphicsLayer;
+    TextgraphicsLayer: GraphicsLayer;
+    sketchViewModel: SketchViewModel;
+    sketch: Sketch;
+    options: sketchViewOptions;
+    constructor(view: MapView | SceneView, options?: sketchViewOptions);
+    init(): void;
+    /**
+     * 初始化绘图
+     *
+     * @param {*} data
+     * @param {string} [type='crossArea']
+     * @param {boolean} [reverse=false] 是否反转
+     * @returns
+     * @memberof SketchView
+     */
+    initPoint(data: any, type?: string, reverse?: boolean): void;
+    /**
+     * 初始化进口道融合区
+     *
+     * @param {any[]} data
+     * @memberof SketchView
+     */
+    initEntranceFusionZone(data: any[]): void;
+    initCrossArea(data: any): Graphic;
+    /**
+     * 初始进出口道计算区域
+     *
+     * @param {*} data
+     * @param {boolean} [reverse=false] 是否反转
+     * @returns
+     * @memberof SketchView
+     */
+    inintSectionArea(data: any, reverse?: boolean): any;
+    createPolylineGraphic(paths: any, lineSymbol: any, attributes: any): Graphic;
+    createPolygonGraphic(rings: any, lineSymbol: any, attributes: any): Graphic;
+    on(callcack?: (type: string, points: any, event?: any) => void): void;
+    /**
+     * 获取当前绘制的计算区域
+     * @returns
+     */
+    graphicPoint(): any[];
+    /**
+     * 获取进口道区域
+     *
+     * @memberof SketchView
+     */
+    getEntranceRoad(): any;
+    /**
+     * 获进口道融合区
+     *
+     * @param {armData} armData 进口道编号区域
+     * @param {number[]} armNoList 进口道编号列表
+     * @returns
+     * @memberof SketchView
+     */
+    getEntranceFusionZone(armNoList: number[]): {
+        graphics: {
+            [key: number]: {
+                point: any;
+                type: string;
+                attributes: any;
+            };
+        };
+        rawdata: {
+            point: any;
+            type: string;
+            attributes: any;
+        }[];
+    };
+    /**
+     * 获取进口道所在的进口道编号
+     *
+     * @param {armData} armData 进口道编号区域
+     * @param {*} graphicPpolygon 绘制的区域
+     * @returns
+     * @memberof SketchView
+     */
+    private getIntersectionArea;
+    private filterData;
+    /**
+     *
+     *
+     * @private
+     * @param {*} geometry
+     * @param {boolean} [isfilterData=true] 是否过滤首尾相同点数据
+     * @returns
+     * @memberof SketchView
+     */
+    private getGraphicPoint;
+    close(): void;
+    show(): void;
+    removeAll(): void;
+    /**
+     *  获取两点的角度
+     *
+     * @param {ITPoint} startPoint
+     * @param {ITPoint} endPoint
+     * @returns
+     * @memberof SketchView
+     */
+    getAngle(startPoint: ITPoint, endPoint: ITPoint): number;
+    /**
+     *  获取线平移后的坐标
+     *
+     * @param {Polyline} lineGeometry 线的几何图形
+     * @param {number} distance 平移的距离，默认米
+     * @param {LinearUnits} [offsetUnit='meters']
+     * @returns
+     * @memberof SketchView
+     */
+    getshiftLine(lineGeometry: __esri.Geometry, distance: number, offsetUnit?: LinearUnits): __esri.Geometry | __esri.Geometry[];
+    /**
+     * 设置线的平移
+     *
+     * @param {number} distance 平移的距离，默认米
+     * @param {LinearUnits} [offsetUnit='meters'] 平移的单位
+     * @param {*} symbol 线的样式
+     * @memberof SketchView
+     */
+    setshiftLine(distance: number, offsetUnit?: LinearUnits, symbol?: any): void;
+    /**
+     * 移除平移线
+     *
+     * @memberof SketchView
+     */
+    removeShiftLine(): void;
+    /**
+     * 移除绘制的线
+     *
+     * @memberof SketchView
+     */
+    removedraw(): void;
+    addGraphic(geometry: any, symbol?: any, attributes?: any): void;
+    /**
+     * 获取方向
+     *
+     * @param {ITPoint} startPoint 起点
+     * @param {ITPoint} endPoint 终点
+     * @returns
+     * @memberof SketchView
+     */
+    getDirection(startPoint: ITPoint, endPoint: ITPoint): 0 | 1 | 3 | 2;
+    findLayerById(id: string): __esri.Layer;
+    /**
+     *  根据id查找平移线graphic
+     *
+     * @param {string} id
+     * @returns
+     * @memberof SketchView
+     */
+    findShiftLineGraphicsById(id: string): Graphic;
+    /**
+     *  删除指定的图形
+     * @param graphic 删除指定的图形
+     */
+    remove(graphic: any): void;
+    /**
+     *  设置最大允许绘制的图形数量
+     * @param num  数量
+     */
+    setmaxAllowedGraphics(num: number): void;
+    deepClone(obj: any): void;
+    destroy(): void;
+}
+export {};

package/es/src/gis-map/utils/sketchView.mjs

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