gisviewer-vue3-arcgis 1.0.159 → 1.0.161

package/es/src/gis-map/utils/open-drive-renderer/index.mjs

@@ -1,21 +1,22 @@
-import y from "@arcgis/core/Graphic";
-import * as j from "@arcgis/core/core/promiseUtils";
+import g from "@arcgis/core/Graphic";
+import * as C from "@arcgis/core/core/promiseUtils";
+import * as $ from "@arcgis/core/core/reactiveUtils.js";
 import { Polygon as N } from "@arcgis/core/geometry";
 import * as L from "@arcgis/core/geometry/geometryEngine";
 import k from "@arcgis/core/layers/FeatureLayer";
 import I from "@arcgis/core/layers/GraphicsLayer";
-import * as G from "@turf/helpers";
-import { lineSliceAlong as C } from "@turf/line-slice-along";
+import * as D from "@turf/helpers";
+import { lineSliceAlong as G } from "@turf/line-slice-along";
 import b from "axios";
-import { XMLParser as $ } from "fast-xml-parser";
-import F from "md5";
-import O from "pako";
-import { watch as P } from "vue";
-import J from "../../stores/index.mjs";
-import E from "../common-utils.mjs";
-class x {
+import { XMLParser as F } from "fast-xml-parser";
+import P from "md5";
+import x from "pako";
+import { watch as E } from "vue";
+import R from "../../stores/index.mjs";
+import J from "../common-utils.mjs";
+class M {
   constructor(e) {
-    this.junctionNames = /* @__PURE__ */ new Map(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.selectedSectionIds = [], this.currentJunctionId = "", this.view = e, this.laneLayer = new k({
+    this.junctionNames = /* @__PURE__ */ new Map(), this.junctionScale = 5e3, this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.selectedSectionIds = [], this.currentJunctionId = "", this.view = e, this.laneLayer = new k({
       id: "OpenDriveLane",
       fields: [
         {
@@ -290,9 +291,9 @@ class x {
       ]
     }), this.junctionLayer = new I({ id: "OpenDriveJunction" }), this.sectionLayer = new I({ id: "OpenDriveSection" }), this.highlightLayer = new I({ id: "OpenDriveHighlight" }), this.flashLayer = new I({ id: "OpenDriveFlash" }), this.drawLayer = new I({ id: "Draw" }), this.splitLaneLayer = new I({ id: "SplitLane" }), this.borderLayer = new I({ id: "OpenDriveBorder" }), this.view.map.addMany([
       this.laneLayer,
-      this.junctionLayer,
       this.sectionLayer,
       this.roadNameLayer,
+      this.junctionLayer,
       this.highlightLayer,
       this.flashLayer,
       this.drawLayer,
@@ -301,16 +302,16 @@ class x {
     ]);
   }
   static getInstance(e) {
-    return this.instance || (this.instance = new x(e)), this.instance;
+    return this.instance || (this.instance = new M(e)), this.instance;
   }
   async makeMd5FromFile(e) {
     var t;
     try {
-      const r = await (await fetch(e)).text(), n = (t = new $({
+      const r = await (await fetch(e)).text(), n = (t = new F({
         ignoreAttributes: !1,
         allowBooleanAttributes: !0
       }).parse(r).OpenDRIVE.userData) == null ? void 0 : t.border;
-      return { status: 0, message: "ok", result: { md5: F(r), border: n } };
+      return { status: 0, message: "ok", result: { md5: P(r), border: n } };
     } catch (i) {
       return { status: -1, message: i.message };
     }
@@ -321,8 +322,23 @@ class x {
    * @returns
    */
   async showOpenDriveFromFile(e) {
-    var f, p;
-    this.openDriveClickCallback = e.selectedCallback, console.time("md5用时");
+    var f, y;
+    this.openDriveClickCallback = e.selectedCallback, $.watch(
+      () => this.view.scale,
+      (p, h) => {
+        p > this.junctionScale && h <= this.junctionScale ? (console.log(p, h), this.junctionLayer.graphics.forEach((m) => {
+          m.symbol = this.getCrossGraphicSymbol(
+            m.attributes,
+            "marker"
+          );
+        })) : p <= this.junctionScale && h > this.junctionScale && (console.log(p, h), this.junctionLayer.graphics.forEach((m) => {
+          m.symbol = this.getCrossGraphicSymbol(
+            m.attributes,
+            "picture"
+          );
+        }));
+      }
+    ), console.time("md5用时");
     const t = await this.makeMd5FromFile(e.file);
     if (t.status !== 0)
       return t;
@@ -340,34 +356,34 @@ class x {
           }
         }
       );
-    } catch (m) {
-      return { status: -1, message: m.message };
+    } catch (p) {
+      return { status: -1, message: p.message };
     }
     if (r.status !== 200)
       return { status: -1, message: r.statusText };
     console.time("渲染用时");
     const s = r.data.result.geoSetting;
-    E.setGeoData(
+    J.setGeoData(
       s.geoReference,
       s.offsetX,
       s.offsetY
     );
     let c = r.data.result.json;
     c.startsWith(window.location.protocol) || (c = `${window.location.protocol}//${e.server}${c}`);
-    const a = await (await fetch(c)).arrayBuffer(), o = O.inflate(a, { to: "string" }), l = JSON.parse(o);
+    const a = await (await fetch(c)).arrayBuffer(), o = x.inflate(a, { to: "string" }), l = JSON.parse(o);
     await this.showAllLanes(
       l,
       ((f = e.options) == null ? void 0 : f.showJunctionLane) || !1,
-      ((p = e.options) == null ? void 0 : p.showRoadName) || !0
+      ((y = e.options) == null ? void 0 : y.showRoadName) || !0
     );
     const d = r.data.result.junctions;
     this.showJunction(d), e.options && e.options.centerMap !== !1 && await this.view.goTo(this.allLaneGraphics), this.mouseMoveHandler || this.monitorMouseMove(), this.mouseClickHandler || this.monitorMouseClick();
-    const h = J.useAppDataStore;
-    return P(
-      () => h.isSketching,
+    const u = R.useAppDataStore;
+    return E(
+      () => u.isSketching,
       () => {
-        var m, g;
-        h.isSketching ? ((m = this.mouseMoveHandler) == null || m.remove(), this.mouseMoveHandler = void 0, (g = this.mouseClickHandler) == null || g.remove(), this.mouseClickHandler = void 0) : (this.monitorMouseMove(), this.monitorMouseClick());
+        var p, h;
+        u.isSketching ? ((p = this.mouseMoveHandler) == null || p.remove(), this.mouseMoveHandler = void 0, (h = this.mouseClickHandler) == null || h.remove(), this.mouseClickHandler = void 0) : (this.monitorMouseMove(), this.monitorMouseClick());
       }
     ), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
   }
@@ -390,7 +406,7 @@ class x {
       throw new Error(`OpenDriveRenderer: ${r.statusText}`);
     let s = r.data.result.json;
     s.startsWith(window.location.protocol) || (s = `${window.location.protocol}//${e}${s}`);
-    const n = await (await fetch(s)).arrayBuffer(), a = O.inflate(n, { to: "string" }), o = JSON.parse(a);
+    const n = await (await fetch(s)).arrayBuffer(), a = x.inflate(n, { to: "string" }), o = JSON.parse(a);
     return await this.showAllLanes(o, !1, !1), { status: 0, message: "ok" };
   }
   /**
@@ -412,9 +428,9 @@ class x {
         if (!t && o.junction !== "-1")
           continue;
         const { id: l, refLine: d } = o;
-        let h = o.name;
-        h.includes("(") && (h = h.slice(0, h.indexOf("("))), h = h.replace(/(.)/g, "$1 ");
-        const f = new y({
+        let u = o.name;
+        u.includes("(") && (u = u.slice(0, u.indexOf("("))), u = u.replace(/(.)/g, "$1 ");
+        const f = new g({
           geometry: {
             type: "polyline",
             paths: [d]
@@ -422,48 +438,48 @@ class x {
           attributes: {
             ObjectID: c++,
             roadId: l,
-            roadName: h
+            roadName: u
           }
         });
-        this.allRefLineGraphics.push(f), o.laneSections.sort((p, m) => Number(p.id) - Number(m.id));
-        for (let p = 0; p < o.laneSections.length; p++) {
-          const m = o.laneSections[p], g = Number(m.id);
-          for (const u of m.lanePaths) {
-            const w = Number(u.id);
-            if (w === 0)
+        this.allRefLineGraphics.push(f), o.laneSections.sort((y, p) => Number(y.id) - Number(p.id));
+        for (let y = 0; y < o.laneSections.length; y++) {
+          const p = o.laneSections[y], h = Number(p.id);
+          for (const m of p.lanePaths) {
+            const v = Number(m.id);
+            if (v === 0)
               continue;
-            const v = u.type, M = [...u.outerPath], S = u.innerPath.concat(
-              M.reverse()
+            const w = m.type, O = [...m.outerPath], S = m.innerPath.concat(
+              O.reverse()
             );
             if (S.length <= 3) {
-              console.warn(`lane ${w} has less than 3 points`);
+              console.warn(`lane ${v} has less than 3 points`);
               continue;
             }
-            S.push(u.innerPath[0]);
+            S.push(m.innerPath[0]);
             const A = new N({
               rings: [S]
             });
             if (A) {
-              const D = new y({
+              const j = new g({
                 geometry: A,
                 attributes: {
                   ObjectID: c++,
-                  id: `${l}+${g}+${w}`,
+                  id: `${l}+${h}+${v}`,
                   fromNode: o.fromNode,
                   toNode: o.toNode,
                   roadId: String(l),
                   roadName: o.name,
-                  sectionId: String(g),
-                  sectionIndex: p,
-                  laneId: w,
-                  type: v,
+                  sectionId: String(h),
+                  sectionIndex: y,
+                  laneId: v,
+                  type: w,
                   sumoId: "",
                   // 记录左右边线的起始点，用于按长度高亮车道的一部分
-                  leftLine: u.innerPath,
-                  rightLine: u.outerPath
+                  leftLine: m.innerPath,
+                  rightLine: m.outerPath
                 }
               });
-              this.allLaneGraphics.push(D), n.push(D);
+              this.allLaneGraphics.push(j), n.push(j);
             }
           }
         }
@@ -498,7 +514,7 @@ class x {
       if (!i)
         continue;
       this.junctionNames.set(i.id, i.name), i.nodeType = i.type;
-      const r = new y({
+      const r = new g({
         geometry: {
           type: "point",
           x: i.coordinates[0],
@@ -509,31 +525,34 @@ class x {
           selected: !1,
           type: "OpenDriveJunction"
         },
-        symbol: {
-          type: "picture-marker",
-          url: i.crossId ? "/GisViewerAssets/Images/xhj_1.png" : "/GisViewerAssets/Images/xhj_2.png",
-          width: "18px",
-          height: "28px",
-          yoffset: "9px"
-        },
-        popupTemplate: {
-          title: i.name,
-          content: [
-            {
-              type: "fields",
-              fieldInfos: [
-                {
-                  fieldName: "id",
-                  label: "路口编号"
-                },
-                {
-                  fieldName: "crossId",
-                  label: "信号机编号"
-                }
-              ]
-            }
-          ]
-        }
+        symbol: this.getCrossGraphicSymbol(i, "marker")
+        // symbol: {
+        //   type: 'picture-marker',
+        //   url: junctionTableData.crossId
+        //     ? '/GisViewerAssets/Images/xhj_1.png'
+        //     : '/GisViewerAssets/Images/xhj_2.png',
+        //   width: '18px',
+        //   height: '28px',
+        //   yoffset: '9px'
+        // } as any,
+        // popupTemplate: {
+        //   title: junctionTableData.name,
+        //   content: [
+        //     {
+        //       type: 'fields',
+        //       fieldInfos: [
+        //         {
+        //           fieldName: 'id',
+        //           label: '路口编号'
+        //         },
+        //         {
+        //           fieldName: 'crossId',
+        //           label: '信号机编号'
+        //         }
+        //       ]
+        //     }
+        //   ]
+        // }
       });
       t.push(r);
     }
@@ -543,7 +562,7 @@ class x {
    * 监听鼠标移动事件，高亮显示鼠标所在路段和路口
    */
   monitorMouseMove() {
-    const e = j.debounce(async (t) => {
+    const e = C.debounce(async (t) => {
       var c;
       const r = (c = (await this.view.hitTest(t, {
         include: [this.laneLayer, this.junctionLayer]
@@ -560,15 +579,15 @@ class x {
           "roadId"
         )}+${this.hitGraphic.getAttribute("sectionId")}`;
         if (this.currentSectionCode === n || this.selectedSectionIds.includes(n) || this.sectionLayer.graphics.findIndex(
-          (u) => u.getAttribute("id") === n
+          (h) => h.getAttribute("id") === n
         ) >= 0)
           return;
         this.currentSectionCode = n;
         const o = this.allLaneGraphics.filter(
-          (u) => `${u.attributes.roadId}+${u.attributes.sectionId}` === n
+          (h) => `${h.attributes.roadId}+${h.attributes.sectionId}` === n
         ), l = L.union(
-          o.map((u) => u.geometry)
-        ), d = this.hitGraphic.getAttribute("fromNode"), h = this.hitGraphic.getAttribute("toNode"), f = this.junctionNames.get(d) || d, p = this.junctionNames.get(h) || h, m = new y({
+          o.map((h) => h.geometry)
+        ), d = this.hitGraphic.getAttribute("fromNode"), u = this.hitGraphic.getAttribute("toNode"), f = this.junctionNames.get(d) || d, y = this.junctionNames.get(u) || u, p = new g({
           geometry: l,
           symbol: {
             type: "simple-fill",
@@ -584,7 +603,7 @@ class x {
             id: n,
             selected: !1,
             fromNodeName: f,
-            toNodeName: p,
+            toNodeName: y,
             laneCount: o.length
           },
           popupTemplate: {
@@ -610,20 +629,12 @@ class x {
             ]
           }
         });
-        this.highlightLayer.removeAll(), this.highlightLayer.add(m);
-        const g = this.view.toMap(t);
-        this.view.openPopup({
-          features: [m],
-          location: g
-        });
+        this.highlightLayer.removeAll(), this.highlightLayer.add(p);
       } else if (s.layer.id === "OpenDriveJunction") {
         const n = this.hitGraphic.getAttribute("id");
         if (n === this.currentJunctionId)
           return;
-        this.currentJunctionId = n, this.view.openPopup({
-          features: [this.hitGraphic],
-          location: this.hitGraphic.geometry
-        });
+        this.currentJunctionId = n;
       }
     });
     this.mouseMoveHandler = this.view.on("pointer-move", async (t) => {
@@ -635,7 +646,7 @@ class x {
    * 监听鼠标点击事件，获取高亮要素的拓扑信息
    */
   monitorMouseClick() {
-    const e = j.debounce(async (t) => {
+    const e = C.debounce(async (t) => {
       var a;
       const r = (a = (await this.view.hitTest(t, {
         include: [this.highlightLayer, this.junctionLayer, this.sectionLayer]
@@ -657,16 +668,21 @@ class x {
             type: "OpenDriveJunction",
             id: n,
             details: l.data.result
-          }), s.setAttribute("selected", !0), s.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(s, 50));
-        } else {
+          }), s.setAttribute("selected", !0), s.symbol = {
+            type: "picture-marker",
+            url: "/GisViewerAssets/Images/point_red.png",
+            width: "20px",
+            height: "20px"
+          }, this.increasePictureMarkerSize(s, 50));
+        } else
           this.openDriveClickCallback && this.openDriveClickCallback({
             type: "OpenDriveJunction",
             id: n,
             details: void 0
-          }), s.setAttribute("selected", !1);
-          const o = s.getAttribute("crossId");
-          s.symbol.url = o ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png", this.decreasePictureMarkerSize(s, 30);
-        }
+          }), s.setAttribute("selected", !1), s.symbol = this.getCrossGraphicSymbol(
+            s.attributes,
+            this.view.scale < this.junctionScale ? "picture" : "marker"
+          );
       else if (c === "OpenDriveSection")
         if (s.layer.id === "OpenDriveHighlight") {
           this.highlightLayer.remove(s), this.sectionLayer.add(s), s.setAttribute("selected", !0), this.selectedSectionIds.push(n);
@@ -807,15 +823,15 @@ class x {
     if (!i)
       return { status: -1, message: "未找到。请检查路口编号" };
     if (t) {
-      const r = new y({
+      const r = new g({
         geometry: i.geometry,
         symbol: {
           type: "simple-marker",
           style: "circle",
           size: 30,
-          color: [0, 0, 255, 0.6],
+          color: [0, 255, 255, 0.8],
           outline: {
-            color: "blue",
+            color: [0, 255, 255],
             width: 1
           }
         }
@@ -863,7 +879,7 @@ class x {
       (a) => a.geometry
     ), n = L.union(c);
     if (e.flash) {
-      const a = new y({
+      const a = new g({
         geometry: n,
         symbol: {
           type: "simple-fill",
@@ -896,11 +912,10 @@ class x {
    */
   unselectSumo(e) {
     if ((!e || e.type === "junction") && this.junctionLayer.graphics.forEach((t) => {
-      if ((!e || !e.id || e.id === "" || e.id === t.getAttribute("id")) && t.getAttribute("selected")) {
-        t.setAttribute("selected", !1);
-        const i = t.getAttribute("crossId");
-        t.symbol.url = i ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png", this.decreasePictureMarkerSize(t, 30);
-      }
+      (!e || !e.id || e.id === "" || e.id === t.getAttribute("id")) && t.getAttribute("selected") && (t.setAttribute("selected", !1), t.symbol = this.getCrossGraphicSymbol(
+        t.attributes,
+        this.view.scale < this.junctionScale ? "picture" : "marker"
+      ));
     }), !e || e.type === "edge") {
       let t;
       !e || !e.id || e.id === "" ? t = this.sectionLayer.graphics.toArray() : t = this.sectionLayer.graphics.filter((i) => i.getAttribute("edgeId") === e.id).toArray(), t.length > 0 && (t.forEach((i) => {
@@ -943,7 +958,7 @@ class x {
             let o = c.get(a);
             o ? o.push(n.geometry) : (o = [n.geometry], c.set(a, o));
           }), c.forEach((n, a) => {
-            const o = L.union(n), l = new y({
+            const o = L.union(n), l = new g({
               geometry: o,
               symbol: {
                 type: "simple-fill",
@@ -984,7 +999,7 @@ class x {
           type: "edge",
           id: d
         });
-        const h = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, f = await b.get(h, {
+        const u = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, f = await b.get(u, {
           params: {
             id: `${o}+${a.getAttribute("sectionId")}`,
             projectName: this.projectName
@@ -1027,25 +1042,25 @@ class x {
     const r = Number(i[1]), s = i[0].split("#"), c = s.length === 2 ? Number(s[1]) : 0;
     let n = s[0];
     n.startsWith("-") && (n = n.slice(1));
-    const a = this.allLaneGraphics.filter((v) => v.getAttribute("roadId") === n && v.getAttribute("sectionIndex") === c);
+    const a = this.allLaneGraphics.filter((w) => w.getAttribute("roadId") === n && w.getAttribute("sectionIndex") === c);
     if (a.length === 0)
       return { status: -1, message: "未找到路段" };
     const o = a.length - r, l = a.find(
-      (v) => Math.abs(v.getAttribute("laneId")) === o
+      (w) => Math.abs(w.getAttribute("laneId")) === o
     );
     if (!l)
       return { status: -1, message: "未找到车道" };
-    const d = e.start || 0, h = e.end || 100, f = G.lineString(l.getAttribute("leftLine")), p = C(f, d, h, {
+    const d = e.start || 0, u = e.end || 100, f = D.lineString(l.getAttribute("leftLine")), y = G(f, d, u, {
       units: "meters"
-    }), m = G.lineString(l.getAttribute("rightLine")), g = C(m, d, h, {
+    }), p = D.lineString(l.getAttribute("rightLine")), h = G(p, d, u, {
       units: "meters"
-    }), u = p.geometry.coordinates.concat(
-      g.geometry.coordinates.reverse()
+    }), m = y.geometry.coordinates.concat(
+      h.geometry.coordinates.reverse()
     );
-    u.push(u[u.length - 1]);
-    const w = new y({
+    m.push(m[m.length - 1]);
+    const v = new g({
       geometry: new N({
-        rings: [u]
+        rings: [m]
       }),
       attributes: {
         ObjectID: l.getAttribute("ObjectID"),
@@ -1059,8 +1074,8 @@ class x {
         laneId: l.getAttribute("laneId"),
         type: l.getAttribute("type"),
         sumoId: l.getAttribute("sumoId"),
-        leftLine: p.geometry.coordinates,
-        rightLine: g.geometry.coordinates
+        leftLine: y.geometry.coordinates,
+        rightLine: h.geometry.coordinates
       },
       symbol: {
         type: "simple-fill",
@@ -1070,12 +1085,123 @@ class x {
         }
       }
     });
-    return this.splitLaneLayer.add(w), this.view.goTo(w), { status: 0, message: "ok", result: e };
+    return this.splitLaneLayer.add(v), this.view.goTo(v), { status: 0, message: "ok", result: e };
   }
   clearSplitLane() {
     this.splitLaneLayer.removeAll();
   }
+  /**
+   * 生成路口点符号。在不同比例尺下，使用不同的符号
+   * @param attributes
+   * @param symbolType
+   * @returns
+   */
+  getCrossGraphicSymbol(e, t) {
+    const i = e.crossId !== "" && e.crossId !== void 0 && e.crossId !== null;
+    if (t === "marker")
+      return {
+        type: "picture-marker",
+        url: `/GisViewerAssets/Images/xhj_${i ? 4 : 2}.png`,
+        width: "18px",
+        height: "28px",
+        yOffset: "12px"
+      };
+    if (t === "picture")
+      return i ? {
+        type: "cim",
+        data: {
+          type: "CIMSymbolReference",
+          primitiveOverrides: [
+            {
+              // 将textGraphic的TextString替换为graphic.attributes.name
+              type: "CIMPrimitiveOverride",
+              primitiveName: "textGraphic",
+              propertyName: "TextString",
+              valueExpressionInfo: {
+                type: "CIMExpressionInfo",
+                title: "Custom",
+                expression: 'Replace($feature.name, "与", "/") + "  " + $feature.crossId',
+                returnType: "Default"
+              }
+            }
+          ],
+          symbol: {
+            type: "CIMPointSymbol",
+            symbolLayers: [
+              // 路口名称
+              {
+                type: "CIMVectorMarker",
+                size: 32,
+                colorLocked: !0,
+                anchorPointUnits: "Relative",
+                frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                markerGraphics: [
+                  {
+                    type: "CIMMarkerGraphic",
+                    primitiveName: "textGraphic",
+                    geometry: { x: 0, y: 0 },
+                    symbol: {
+                      type: "CIMTextSymbol",
+                      height: 12,
+                      horizontalAlignment: "Center",
+                      offsetX: 0,
+                      offsetY: i ? 50 : 40,
+                      haloSize: 2,
+                      haloSymbol: {
+                        type: "CIMPolygonSymbol",
+                        symbolLayers: [
+                          {
+                            type: "CIMSolidFill",
+                            enable: !0,
+                            color: [255, 255, 255, 255]
+                          }
+                        ]
+                      },
+                      symbol: {
+                        type: "CIMPolygonSymbol",
+                        symbolLayers: [
+                          {
+                            type: "CIMSolidFill",
+                            enable: !0,
+                            color: [0, 0, 0, 255]
+                          }
+                        ]
+                      },
+                      verticalAlignment: "Center"
+                    },
+                    textString: ""
+                  }
+                ],
+                scaleSymbolsProportionally: !0,
+                respectFrame: !0
+              },
+              // 路口图标
+              {
+                type: "CIMPictureMarker",
+                enable: !0,
+                anchorPoint: {
+                  x: 0,
+                  y: 0
+                },
+                anchorPointUnits: "Relative",
+                size: 45,
+                rotateClockwise: !0,
+                textureFilter: "Picture",
+                url: "/GisViewerAssets/Images/xhj_4.png",
+                offsetY: i ? 22 : 15
+              }
+            ]
+          }
+        }
+      } : {
+        type: "picture-marker",
+        url: "/GisViewerAssets/Images/xhj_2.png",
+        width: "27px",
+        height: "42px",
+        yOffset: "22px"
+      };
+  }
 }
 export {
-  x as default
+  M as default
 };