gisviewer-vue3-arcgis 1.0.85

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

@@ -0,0 +1,503 @@
+import g from "@arcgis/core/layers/GraphicsLayer";
+import x from "@arcgis/core/widgets/Sketch/SketchViewModel";
+import P from "@arcgis/core/widgets/Sketch";
+import * as p from "@arcgis/core/geometry/support/webMercatorUtils.js";
+import * as y from "@arcgis/core/geometry/geometryEngine.js";
+import m from "@arcgis/core/Graphic.js";
+import u from "@arcgis/core/geometry/Polyline.js";
+import * as c from "@turf/turf";
+const G = {
+  maxAllowedGraphics: 0,
+  GraphicsLayer: {},
+  sketchvisibleElements: {},
+  sketchPosition: "top-left",
+  defaultsketchVisible: !0,
+  sketchViewModelItemSymbol: {}
+}, f = {
+  type: "simple-line",
+  color: "#556DEA",
+  width: 2
+}, b = {
+  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 $ {
+  constructor(t, e) {
+    this.isDraw = !1, this.drawStartGraphicId = null, this.drawPointGraphic = /* @__PURE__ */ new Map(), this.dimensionType = null, this.viewer = t, this.options = {
+      ...G,
+      ...e
+    }, this.graphicsLayer = new g({ ...this.options.GraphicsLayer }), this.TextgraphicsLayer = new g(), this.viewer.map.layers.add(this.graphicsLayer), this.viewer.map.layers.add(this.TextgraphicsLayer), this.init();
+  }
+  init() {
+    this.sketchViewModel = new x({
+      layer: this.graphicsLayer,
+      view: this.viewer,
+      updateOnGraphicClick: !0,
+      polylineSymbol: f,
+      polygonSymbol: b,
+      ...this.options.sketchViewModelItemSymbol
+    });
+    const t = this.findLayerById("TrafficToolMarkings"), e = [];
+    t && e.push({ layer: t, enabled: !0 }), this.sketch = new P({
+      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: e
+      }
+    }), this.sketch.visibleElements = {
+      ...this.options.sketchvisibleElements
+    }, this.viewer.ui.add(this.sketch, this.options.sketchPosition);
+    const i = this;
+    this.viewer.on("pointer-move", function(s) {
+      const r = {
+        x: s.x,
+        y: s.y
+      };
+      if (i.isDraw && i.dimensionType == "distance") {
+        i.tipsDom || (i.tipsDom = i.createDom());
+        const o = i.getDrawgraphicLength();
+        i.tipsDom.innerText = `${o}米`, i.tipsDom.style.left = `${r.x}px`, i.tipsDom.style.top = `${r.y + 3}px`, i.tipsDom.style.pointerEvents = "none";
+      }
+    });
+  }
+  on(t) {
+    const e = this;
+    this.sketch.on("create", function(i) {
+      e.onCreate(i, t);
+    }), this.sketch.on("update", function(i) {
+      e.onUpdate(i, t);
+    }), this.sketch.on("delete", function(i) {
+      e.onDelete(i, t);
+    }), this.sketch.on("redo", function(i) {
+      console.log("redo", i), t && t("redo", "complete", i);
+    }), this.sketch.on("undo", function(i) {
+      console.log("undo", i), t && t("undo", "complete", i);
+    });
+  }
+  onCreate(t, e) {
+    if (console.log("create", t), this.drawStartGraphicId || (this.drawStartGraphicId = new Date().getTime().toString()), t.graphic.getAttribute("id") || (t.graphic.setAttribute("type", "draw"), t.graphic.setAttribute("id", this.drawStartGraphicId)), t.state === "start" && t.graphic.geometry.type === "polyline" && (this.isDraw = !0, this.drawStartGraphic = p.webMercatorToGeographic(
+      t.graphic.geometry
+    ), this.dimensionType == "distance")) {
+      const i = this.getGeometryXY(this.drawStartGraphic, 0), s = `${this.drawStartGraphicId}-start`;
+      this.addOrUpdateMarkPoint("起点", i, s);
+    }
+    if (t.state === "active" && t.graphic.geometry.type === "polyline") {
+      const i = p.webMercatorToGeographic(
+        t.graphic.geometry
+      ), s = this.drawStartGraphicId;
+      this.dimensionType == "distance" && (this.drawPolylinePoint(i, s), this.drawStartGraphic = i);
+    }
+    if (t.state === "complete" && t.graphic.geometry.type === "polyline" && this.dimensionType == "distance") {
+      const i = this.getDrawgraphicLength(), s = `${this.drawStartGraphicId}-end`, r = p.webMercatorToGeographic(
+        t.graphic.geometry
+      ), o = r.paths[0], n = this.getGeometryXY(r, o.length - 1);
+      this.addOrUpdateMarkPoint(`总长度：${i}米`, n, s), this.drawStartGraphic = null, this.removeDom(), this.isDraw = !1, this.drawStartGraphicId = null;
+    }
+    t.state === "cancel" && t.graphic.geometry.type === "polyline" && this.onCreateToCancel(), e && e("create", t.state, t.graphic);
+  }
+  onCreateToCancel() {
+    this.removeDom(), this.isDraw = !1, this.drawStartGraphic = null;
+    const t = this.drawStartGraphicId;
+    this.drawPointGraphic.forEach((e, i) => {
+      new RegExp(`^${t}-`).test(i) && (this.TextgraphicsLayer.remove(e), this.drawPointGraphic.delete(i));
+    }), this.drawStartGraphicId = null;
+  }
+  onUpdate(t, e) {
+    console.log("update", t), this.updatePpolylinePoint(
+      t.graphics.filter((i) => i.geometry.type === "polyline")
+    ), e && e("update", t.state, t.graphics);
+  }
+  onDelete(t, e) {
+    console.log("delete", t), this.delPpolylinePoint(
+      t.graphics.filter((i) => i.geometry.type === "polyline")
+    ), e && e("delete", "complete", t.graphics);
+  }
+  addpolyline(t) {
+    const e = [], i = f, s = {
+      type: "draw",
+      id: new Date().getTime().toString()
+    };
+    t.map((r) => {
+      e.push(
+        this.createPolylineGraphic(r, i, {
+          ...s
+        })
+      );
+    }), this.graphicsLayer.addMany(e);
+  }
+  createPolylineGraphic(t, e, i) {
+    const s = new u({
+      paths: [t]
+    }), r = p.geographicToWebMercator(s);
+    return new m({
+      geometry: r,
+      symbol: e,
+      attributes: i
+    });
+  }
+  createDom() {
+    const t = document.createElement("div");
+    t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.width = "100px", t.style.height = "80px", t.style.zIndex = "999", t.style.display = "flex", t.style.justifyContent = "center", t.style.alignItems = "center", t.style.color = "#fff", t.style.fontSize = "20px", t.style.fontWeight = "bold", t.innerText = "";
+    const e = document.getElementsByClassName("esri-view-root");
+    if (e.length > 0)
+      return e[0].appendChild(t), t;
+  }
+  removeDom() {
+    this.tipsDom && (this.tipsDom.remove(), this.tipsDom = null);
+  }
+  /**
+   *  开始绘制
+   * @param tool  'point' | 'polyline' | 'polygon' | 'rectangle' | 'circle'
+   * @param createOptions
+   */
+  sketchCreate(t, e) {
+    this.sketchViewModel.create(t, e);
+  }
+  /**
+   * 退出绘制
+   *
+   * @memberof sketchViewTool
+   */
+  sketchCancel() {
+    this.sketchViewModel.cancel();
+  }
+  /**
+   *  获取所有的图形得长度
+   * @param offsetUnit  距离单位
+   * @returns
+   */
+  getCalculateDistance(t = "meters") {
+    const e = [];
+    return this.graphicsLayer.graphics.map((i) => {
+      i.geometry.type === "polyline" && e.push(this.calculateDistance(i.geometry, t));
+    }), e;
+  }
+  /**
+   * 获取所有的图形得航向角
+   *
+   * @returns
+   * @memberof sketchViewTool
+   */
+  getCalculateHeading(t = "north") {
+    const e = [];
+    return this.graphicsLayer.graphics.map((i) => {
+      i.geometry.type === "polyline" && e.push(this.calculateHeading(i.geometry, t));
+    }), e;
+  }
+  /**
+   * 获取所有的线段的路径和长度
+   *
+   * @returns
+   * @memberof sketchViewTool
+   */
+  getAllPolylineGraphicPath(t = "meters") {
+    const e = [];
+    return this.graphicsLayer.graphics.map((i) => {
+      i.geometry.type === "polyline" && e.push({
+        paths: p.webMercatorToGeographic(i.geometry).paths[0],
+        distance: this.calculateDistance(i.geometry, t)
+      });
+    }), e;
+  }
+  close() {
+    this.sketch.visible = !1;
+  }
+  show() {
+    this.sketch.visible = !0;
+  }
+  removeAll() {
+    this.graphicsLayer.removeAll(), this.TextgraphicsLayer.removeAll(), this.drawPointGraphic.clear();
+  }
+  calculateDistance(t, e = "meters") {
+    return y.geodesicLength(
+      t,
+      e
+    );
+  }
+  /**
+   *  计算geometry的航向角
+   *
+   * @param {__esri.Geometry} geometry
+   * @param {string} [direction='north']
+   * @returns
+   * @memberof sketchViewTool
+   */
+  calculateHeading(t, e = "north") {
+    const s = p.webMercatorToGeographic(t).paths[0];
+    return this.calculatePointHeading(s, e);
+  }
+  /**
+   * 计算路径的航向角
+   *
+   * @param {number[][]} path 路径
+   * @param {string} [direction='north'] 方向
+   * @returns
+   * @memberof sketchViewTool
+   */
+  calculatePointHeading(t, e = "north") {
+    const i = {
+      longitude: t[0][0],
+      latitude: t[0][1]
+    }, s = {
+      longitude: t[t.length - 1][0],
+      latitude: t[t.length - 1][1]
+    }, r = i.longitude, o = i.latitude, n = s.longitude, a = s.latitude, h = n - r, d = Math.sin(h) * Math.cos(a), w = Math.cos(o) * Math.sin(a) - Math.sin(o) * Math.cos(a) * Math.cos(h);
+    let l = (Math.atan2(d, w) * (180 / Math.PI) + 360) % 360;
+    return e === "east" ? l = (l + 90) % 360 : e === "south" ? l = (l + 180) % 360 : e === "west" && (l = (l + 270) % 360), l;
+  }
+  drawPolylinePoint(t, e, i = "add") {
+    const s = t == null ? void 0 : t.paths[0], r = [];
+    for (let o = 0; o < s.length - 1; o++) {
+      const n = s[o];
+      r.push([...n]);
+      const a = {
+        x: n[0],
+        y: n[1]
+      };
+      if (o == 0) {
+        i == "update" && this.addOrUpdateMarkPoint("起点", a, `${e}-start`);
+        continue;
+      }
+      const h = `${e}-${o + 1}`, d = this.getPointLength(r, "meters");
+      this.addOrUpdateMarkPoint(`${d.toFixed(2)}米`, a, h);
+    }
+    if (i == "update" && s.length > 1) {
+      const o = this.getGeometryXY(
+        t,
+        s.length - 1
+      );
+      r.push([o.x, o.y]);
+      const n = this.getPointLength(r, "meters");
+      this.addOrUpdateMarkPoint(
+        `总长度：${n.toFixed(2)}米`,
+        o,
+        `${e}-end`
+      );
+    }
+  }
+  updatePpolylinePoint(t) {
+    for (let e = 0; e < t.length; e++) {
+      console.log(t[e]);
+      const i = t[e].getAttribute("id"), s = p.webMercatorToGeographic(
+        t[e].geometry
+      );
+      this.drawPolylinePoint(s, i, "update");
+    }
+  }
+  delPpolylinePoint(t) {
+    var e;
+    for (let i = 0; i < t.length; i++) {
+      const s = t[i].getAttribute("id"), r = `${s}-start`, o = `${s}-end`, n = [r, o];
+      (e = t[i].geometry) == null || e.paths[0].map(
+        (a, h) => {
+          n.push(`${s}-${h + 1}`);
+        }
+      ), n.map((a) => {
+        const h = this.drawPointGraphic.get(a);
+        h && (this.TextgraphicsLayer.remove(h), this.drawPointGraphic.delete(a));
+      });
+    }
+  }
+  /**
+   * 添加或者更新标记点
+   *
+   * @param {string} text 标记点的文本
+   * @param {ITPoint} point 标记点的坐标
+   * @param {string} id 标记点的id
+   * @param {*} [attributes={}] 标记点的属性
+   * @returns
+   * @memberof sketchViewTool
+   */
+  addOrUpdateMarkPoint(t, e, i, s = {}) {
+    if (this.drawPointGraphic.has(i)) {
+      const o = this.drawPointGraphic.get(i);
+      this.TextgraphicsLayer.remove(o);
+      const n = this.createTextGraphic(t, e, {
+        ...s,
+        id: i
+      });
+      this.drawPointGraphic.set(i, n), this.TextgraphicsLayer.add(n);
+      return;
+    }
+    const r = this.createTextGraphic(t, e, {
+      ...s,
+      id: i
+    });
+    this.drawPointGraphic.set(i, r), this.TextgraphicsLayer.add(r);
+  }
+  /**
+   * 获取图形的点位
+   *
+   * @param {__esri.Geometry} geometry
+   * @returns
+   * @memberof sketchViewTool
+   */
+  getGeometryXY(t, e = 0) {
+    const i = t == null ? void 0 : t.paths[0];
+    return {
+      x: i[e][0],
+      y: i[e][1]
+    };
+  }
+  /**
+   * 创建文本图形
+   *
+   * @param {string} text 文本
+   * @param {{ x: number; y: number }} point 坐标
+   * @param {*} [attributes={}] 属性
+   * @returns
+   * @memberof sketchViewTool
+   */
+  createTextGraphic(t, e, i = {}) {
+    return new m({
+      geometry: {
+        //@ts-ignore
+        type: "point",
+        x: e.x,
+        y: e.y
+      },
+      symbol: {
+        //@ts-ignore
+        type: "text",
+        text: t,
+        color: "white",
+        haloColor: "black",
+        haloSize: "1px",
+        xoffset: 3,
+        yoffset: 3
+      },
+      attributes: {
+        ...i
+      }
+    });
+  }
+  /**
+   *  获取当前绘制的图形的长度
+   * @returns
+   */
+  getDrawgraphicLength() {
+    return this.drawStartGraphic ? this.calculateDistance(this.drawStartGraphic, "meters").toFixed(2) : 0;
+  }
+  /**
+   *  获取两点的角度
+   *
+   * @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 {ITPoint} startPoint
+   * @param {ITPoint} endPoint
+   * @returns
+   * @memberof sketchViewTool
+   */
+  getbearing(t, e) {
+    return c.bearing(
+      c.point([t.x, t.y]),
+      c.point([e.x, e.y])
+    );
+  }
+  /**
+   *  获取两点的距离
+   * @param startPoint
+   * @param endPoint
+   * @param units
+   * @returns
+   */
+  getPointLength(t, e = "meters") {
+    const i = new u({
+      paths: [t]
+    });
+    return y.geodesicLength(i, e);
+  }
+  /**
+   * 获取多个点的中心点
+   *
+   * @param {ITPoint[]} points
+   * @returns
+   * @memberof sketchViewTool
+   */
+  featureCollection(t) {
+    const e = c.featureCollection(
+      t.map((s) => c.point([s.x, s.y]))
+    );
+    return c.center(e);
+  }
+  /**
+   * 获取两点的中心点
+   *
+   * @param {ITPoint} startPoint
+   * @param {ITPoint} endPoint
+   * @returns
+   * @memberof sketchViewTool
+   */
+  midpoint(t, e) {
+    return c.midpoint(
+      c.point([t.x, t.y]),
+      c.point([e.x, e.y])
+    );
+  }
+  /**
+   * 获取方向
+   *
+   * @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);
+  }
+  /**
+   * 开启图层捕捉
+   */
+  turnonlayerSnap() {
+    this.sketchViewModel.snappingOptions.enabled = !0;
+  }
+  /**
+   * 关闭图层捕捉
+   */
+  turnofflayerSnap() {
+    this.sketchViewModel.snappingOptions.enabled = !1;
+  }
+  setDimensionType(t) {
+    this.dimensionType = t;
+  }
+  /**
+   *  删除指定的图形
+   * @param graphic 删除指定的图形
+   */
+  remove(t) {
+    this.graphicsLayer.remove(t);
+  }
+  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 {
+  $ as default
+};

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

@@ -0,0 +1,43 @@
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+export default class syncMapView {
+    private mainMapView;
+    private targetMapViews;
+    private syncHandles;
+    private isSync;
+    constructor(targetMapViews: MapView[] | SceneView[]);
+    /**
+     * 设置是否同步
+     *
+     * @param {boolean} isSync
+     * @memberof syncMapView
+     */
+    setSync(isSync: boolean): void;
+    /**
+     *设置主视图
+     *
+     * @private
+     * @param {(MapView | SceneView)} mainMapView
+     * @memberof syncMapView
+     */
+    private setMainMapView;
+    /**
+     *开始同步视角
+     *
+     * @private
+     * @memberof syncMapView
+     */
+    private startSync;
+    /**
+     * 暂停同步视角
+     *
+     * @memberof syncMapView
+     */
+    pauseSync(): void;
+    /**
+     *销毁同步
+     *
+     * @memberof syncMapView
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,64 @@
+class a {
+  constructor(s) {
+    if (this.syncHandles = [], this.isSync = !1, s.length < 2)
+      throw new Error("At least two viewers are required for synchronization.");
+    this.mainMapView = null, this.targetMapViews = s, s.forEach((i) => {
+      i.on("drag", () => {
+        this.setMainMapView(i);
+      });
+    });
+  }
+  /**
+   * 设置是否同步
+   *
+   * @param {boolean} isSync
+   * @memberof syncMapView
+   */
+  setSync(s) {
+    this.isSync = s;
+  }
+  /**
+   *设置主视图
+   *
+   * @private
+   * @param {(MapView | SceneView)} mainMapView
+   * @memberof syncMapView
+   */
+  setMainMapView(s) {
+    this.mainMapView !== s && (this.pauseSync(), this.mainMapView = s, this.startSync());
+  }
+  /**
+   *开始同步视角
+   *
+   * @private
+   * @memberof syncMapView
+   */
+  startSync() {
+    this.syncHandles = this.targetMapViews.map((s) => s.watch("viewpoint", (i) => {
+      this.mainMapView === s && this.isSync && this.targetMapViews.forEach((t) => {
+        t !== s && (t.viewpoint = i.clone());
+      });
+    }));
+  }
+  /**
+   * 暂停同步视角
+   *
+   * @memberof syncMapView
+   */
+  pauseSync() {
+    this.syncHandles.forEach((s) => {
+      s.remove();
+    }), this.syncHandles = [];
+  }
+  /**
+   *销毁同步
+   *
+   * @memberof syncMapView
+   */
+  destroy() {
+    this.pauseSync(), this.mainMapView = null, this.targetMapViews = [];
+  }
+}
+export {
+  a as default
+};

package/es/src/gis-map/utils/traffic-flow.d.ts

@@ -0,0 +1,66 @@
+import View from '@arcgis/core/views/View';
+export default class TrafficFlow {
+    private view;
+    private mapConfig;
+    private objectsLayer;
+    private webSocket;
+    /** 交通对象最大坚持帧数（连续多少个数据包没有数据就删除） */
+    private readonly maxMissCount;
+    /** 记录每个交通对象连续多少个数据包没收到数据 */
+    private objectMissCount;
+    /** 是否显示车牌号码 */
+    private showVehiclePlate;
+    private showLog;
+    constructor(view: View);
+    /**
+     * 开始显示交通流数据
+     * @param url
+     * @param options
+     */
+    connectTrafficFlow(url: string, options?: any): void;
+    /**
+     * 停止显示交通流数据
+     */
+    disconnectTrafficFlow(): void;
+    /**
+     * 控制车辆号牌是否显示
+     * @param visible
+     */
+    toggleVehiclePlate(visible: boolean): void;
+    private focusVehNo;
+    private handleTrafficFlowData;
+    /**
+     * 新增交通对象
+     * @param objects
+     */
+    private addTrafficObjects;
+    /**
+     * 更新交通对象
+     * @param objects
+     */
+    private updateTrafficObjects;
+    /**
+     * 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
+     * @param vehTrack
+     * @returns
+     */
+    private createCIMSymbol;
+    /**
+     * 删除交通对象
+     * @param ids
+     */
+    private deleteTrafficObjects;
+    private buildVehicleTrackData;
+    /**
+     * 根据车身颜色属性返回对应的车辆图标
+     * @param carColor
+     * @returns
+     */
+    private getCarPic;
+    /**
+     * 根据号牌颜色属性获取填充色和背景色
+     * @param plateColor
+     * @returns
+     */
+    private getPlateFontColor;
+}