@shjjs/visual-ui 1.0.23 → 1.0.25

package/es/components/scene-amap2d/index.vue2.mjs

@@ -1,16 +1,16 @@
-import { defineComponent as M, watch as d, createElementBlock as K, openBlock as Q, normalizeClass as X, unref as Y, shallowRef as E, ref as y, onMounted as $, onUnmounted as ee, createElementVNode as ae, pushScopeId as te, popScopeId as se } from "vue";
-import oe from "@amap/amap-jsapi-loader";
-import le from "axios";
-import { nanoid as re } from "nanoid";
-import { SHJDatasourceV2 as ne } from "../../commons/plugins/datasource/index.mjs";
-import { SHJParseEvent as u } from "../../commons/plugins/event/index.mjs";
-const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ */ ce(() => /* @__PURE__ */ ae("div", {
+import { defineComponent as E, watch as u, createElementBlock as X, openBlock as Y, normalizeClass as $, unref as ee, shallowRef as L, ref as g, onMounted as ae, onUnmounted as te, createElementVNode as se, pushScopeId as oe, popScopeId as re } from "vue";
+import le from "@amap/amap-jsapi-loader";
+import ne from "axios";
+import { nanoid as ce } from "nanoid";
+import { SHJDatasourceV2 as ie } from "../../commons/plugins/datasource/index.mjs";
+import { SHJParseEvent as y } from "../../commons/plugins/event/index.mjs";
+const de = (m) => (oe("data-v-1495d842"), m = m(), re(), m), ue = /* @__PURE__ */ de(() => /* @__PURE__ */ se("div", {
   id: "zerov-amap-2d",
   class: "zerov-amap-container"
-}, null, -1)), de = [
-  ie
-], ue = M({ name: "zv-scene-amap2d" }), be = /* @__PURE__ */ M({
-  ...ue,
+}, null, -1)), ye = [
+  ue
+], pe = E({ name: "zv-scene-amap2d" }), ze = /* @__PURE__ */ E({
+  ...pe,
   props: {
     basicOption: {},
     sources: {},
@@ -26,14 +26,14 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
     "amap2d-scene-dragging",
     "amap2d-scene-dragend"
   ],
-  setup(m, { expose: A, emit: B }) {
-    const s = m, p = B;
-    u.parseEvents(s.useEvents, "on-page-loaded", null);
-    const W = () => {
-      const o = E(), n = E(), w = y(!1), g = y(), f = y(), v = y(), b = y(), O = (a) => {
-        x(), window._AMapSecurityConfig = {
+  setup(m, { expose: M, emit: I }) {
+    const o = m, p = I;
+    y.parseEvents(o.useEvents, "on-page-loaded", null);
+    const A = () => {
+      const r = L(), n = L(), w = g(!1), f = g(), v = g(), b = g(), c = g(), C = (a) => {
+        O(), window._AMapSecurityConfig = {
           securityJsCode: a.basic.securityJsCode
-        }, oe.load({
+        }, le.load({
           key: a.basic.key,
           // 申请好的Web端开发者Key，首次调用 load 时必填
           version: "2.0",
@@ -41,14 +41,22 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
           Loca: {
             version: "2.0.0"
           },
-          plugins: ["AMap.ControlBar", "AMap.ToolBar", "AMap.Scale", "AMap.HeatMap", "AMap.GeoJSON"]
+          plugins: ["AMap.ControlBar", "AMap.ToolBar", "AMap.Scale", "AMap.HeatMap", "AMap.GeoJSON", "AMap.ImageLayer", "AMap.TileLayer"]
         }).then((e) => {
-          b.value = e, o.value = new e.Map("zerov-amap-2d", {
+          c.value = e;
+          const s = new c.value.createDefaultLayer({
+            visible: !0,
+            // 是否可见
+            opacity: 1,
+            // 透明度
+            zIndex: 0
+            // 叠加层级
+          });
+          r.value = new e.Map("zerov-amap-2d", {
             rotateEnable: a.config.rotateEnable,
             // 是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标画圈移动
             pitchEnable: a.config.pitchEnable,
             // 是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标上下移动
-            resizeEnable: a.config.resizeEnable,
             zoomEnable: a.config.zoomEnable,
             dragEnable: a.config.dragEnable,
             zoom: a.config.zoom,
@@ -60,93 +68,145 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
             center: a.config.center,
             // 初始地图中心经纬度
             mapStyle: a.config.mapStyle,
-            features: a.config.features
+            features: a.config.features,
+            layers: [s]
           }), n.value = new window.Loca.Container({
-            map: o.value
-          }), v.value = new b.value.Scale({
+            map: r.value
+          }), b.value = new c.value.Scale({
             visible: a.config.plugin.scale.visible,
             position: {
               left: a.config.plugin.scale.position.left + "px",
               bottom: a.config.plugin.scale.position.bottom + "px"
             }
-          }), o.value.addControl(v.value), g.value = new e.ControlBar({
+          }), r.value.addControl(b.value), f.value = new e.ControlBar({
             visible: a.config.plugin.controlBar.visible,
             showControlButton: a.config.plugin.controlBar.showControlButton,
             position: {
               right: a.config.plugin.controlBar.position.right + "px",
               top: a.config.plugin.controlBar.position.top + "px"
             }
-          }), o.value.addControl(g.value), f.value = new e.ToolBar({
+          }), r.value.addControl(f.value), v.value = new e.ToolBar({
             visible: a.config.plugin.toolBar.visible,
             position: {
               left: a.config.plugin.toolBar.position.left + "px",
               top: a.config.plugin.toolBar.position.top + "px"
             }
-          }), o.value.addControl(f.value), S(e), o.value.on("complete", () => {
+          }), r.value.addControl(v.value), S(e), r.value.on("complete", () => {
             setTimeout(() => {
-              w.value = !0, p("amap2d-scene-success"), u.parseEvents(s.useEvents, "amap2d-scene-success", null);
+              w.value = !0, p("amap2d-scene-success"), y.parseEvents(o.useEvents, "amap2d-scene-success", null);
             }, 666);
-          }), o.value.on("zoomstart", () => {
-            p("amap2d-scene-zoomstart"), u.parseEvents(s.useEvents, "amap2d-scene-zoomstart", null);
-          }), o.value.on("zoomend", () => {
-            p("amap2d-scene-zoomend"), u.parseEvents(s.useEvents, "amap2d-scene-zoomend", null);
-          }), o.value.on("click", (t) => {
-            p("amap2d-scene-mapclick", t.lnglat), u.parseEvents(s.useEvents, "amap2d-scene-mapclick", t.lnglat);
-          }), o.value.on("dragstart", (t) => {
-            p("amap2d-scene-dragstart", t.lnglat), u.parseEvents(s.useEvents, "amap2d-scene-dragstart", t.lnglat);
-          }), o.value.on("dragend", (t) => {
-            p("amap2d-scene-dragend", t.lnglat), u.parseEvents(s.useEvents, "amap2d-scene-dragend", t.lnglat);
+          }), r.value.on("zoomstart", () => {
+            p("amap2d-scene-zoomstart"), y.parseEvents(o.useEvents, "amap2d-scene-zoomstart", null);
+          }), r.value.on("zoomend", () => {
+            p("amap2d-scene-zoomend"), y.parseEvents(o.useEvents, "amap2d-scene-zoomend", null);
+          }), r.value.on("click", (t) => {
+            p("amap2d-scene-mapclick", t.lnglat), y.parseEvents(o.useEvents, "amap2d-scene-mapclick", t.lnglat);
+          }), r.value.on("dragstart", (t) => {
+            p("amap2d-scene-dragstart", t.lnglat), y.parseEvents(o.useEvents, "amap2d-scene-dragstart", t.lnglat);
+          }), r.value.on("dragend", (t) => {
+            p("amap2d-scene-dragend", t.lnglat), y.parseEvents(o.useEvents, "amap2d-scene-dragend", t.lnglat);
           });
         }).catch((e) => {
         });
       }, S = (a) => {
-        s.sources && s.sources.length > 0 ? ne.parse({
-          tId: s.uuid,
-          sources: s.sources,
-          callback: (e) => {
+        o.sources && o.sources.length > 0 ? ie.parse({
+          tId: o.uuid,
+          sources: o.sources,
+          callback: (s) => {
             try {
-              const t = s.basicOption.widgets.find((r) => r._sourceId === e.id);
-              t && t.type === "heatmap" && N(a, t, e.data[0].data), t && t.type === "dotlayers" && F(window.Loca, t, z(e.data[0].data)), t && t.type === "scatter" && G(window.Loca, t, z(e.data[0].data)), t && t.type === "labelsLayer" && H(window.Loca, t, z(e.data[0].data));
+              const t = o.basicOption.widgets.find((l) => l._sourceId === s.id);
+              t && t.type === "heatmap" && F(a, t, s.data[0].data), t && t.type === "dotlayers" && G(window.Loca, t, k(s.data[0].data)), t && t.type === "scatter" && H(window.Loca, t, k(s.data[0].data)), t && t.type === "labelsLayer" && Z(window.Loca, t, k(s.data[0].data));
             } catch {
             }
-            s.basicOption.widgets.filter((t) => t.type === "boundary").forEach((t) => {
-              k(a, t);
+            o.basicOption.widgets.filter((t) => t.type === "boundary").forEach((t) => {
+              x(a, t);
             });
           }
-        }) : s.basicOption.widgets.filter((e) => e.type === "boundary").forEach((e) => {
-          k(a, e);
+        }) : o.basicOption.widgets.filter((s) => s.type === "boundary").forEach((s) => {
+          x(a, s);
+        });
+        const e = r.value.getLayers();
+        for (let s = 0; s < e.length; s++)
+          (e[s].type === "sketchTileLayer" || e[s]._opts.type === "sketchImageLayer") && r.value.removeLayer(e[s]);
+        o.basicOption.widgets.filter((s) => s.type === "sketchTile").forEach((s) => {
+          const t = P(s);
+          t && r.value.addLayer(t);
+        }), o.basicOption.widgets.filter((s) => s.type === "sketchImage").forEach((s) => {
+          const t = N(s);
+          r.value.addLayer(t);
         });
+      }, J = (a) => {
+        const s = a.slice(a.indexOf("(") + 1, a.lastIndexOf(")")).split(",").map((l) => l.trim()), t = {};
+        for (let l = 1; l < s.length; l++) {
+          const i = s[l].split(" "), d = i[0], K = parseFloat(i[1]) / 100, Q = Math.round(K * 100) / 100;
+          t[Q] = d;
+        }
+        return t;
       }, P = (a) => {
-        const t = a.slice(a.indexOf("(") + 1, a.lastIndexOf(")")).split(",").map((l) => l.trim()), r = {};
-        for (let l = 1; l < t.length; l++) {
-          const i = t[l].split(" "), c = i[0], U = parseFloat(i[1]) / 100, q = Math.round(U * 100) / 100;
-          r[q] = c;
+        try {
+          return new c.value.TileLayer({
+            bounds: new c.value.Bounds(
+              a.bounds[0],
+              a.bounds[1]
+            ),
+            getTileUrl: function(s, t, l) {
+              try {
+                return a.url.replace("{z}", l).replace("{x}", s).replace("{y}", t);
+              } catch {
+              }
+            },
+            type: "sketchTileLayer",
+            tileSize: a.tileSize,
+            opacity: a.opacity,
+            zIndex: a.zIndex,
+            zooms: a.zooms
+          });
+        } catch {
         }
-        return r;
-      }, N = (a, e, t) => {
+        return null;
+      }, N = (a) => {
         try {
-          const r = new a.HeatMap(o.value, {
+          return new c.value.ImageLayer({
+            bounds: new c.value.Bounds(
+              a.bounds[0],
+              // 左下  手绘图左下相对于地图的经纬度
+              a.bounds[1]
+              // 右上  手绘图右上相对于地图的经纬度
+            ),
+            type: "sketchImageLayer",
+            opacity: a.opacity,
+            url: a.url,
+            zIndex: a.zIndex,
+            zooms: a.zooms
+            // 设置可见级别，[最小级别，最大级别]
+          });
+        } catch {
+        }
+        return null;
+      }, F = (a, e, s) => {
+        try {
+          const t = new a.HeatMap(r.value, {
             radius: e.radius,
             // 给定半径
             opacity: e.opacity,
-            gradient: P(e.gradient)
+            gradient: J(e.gradient)
           });
           setTimeout(() => {
-            r.setDataSet({
-              data: t,
+            t.setDataSet({
+              data: s,
               max: e.max
             });
           }, 0);
         } catch {
         }
-      }, k = async (a, e) => {
+      }, x = async (a, e) => {
         try {
-          const t = await le.get(e.geojson);
-          if (t.status === 200) {
-            const r = new a.GeoJSON({
-              geoJSON: t.data,
+          const s = await ne.get(e.geojson);
+          if (s.status === 200) {
+            const t = new a.GeoJSON({
+              geoJSON: s.data,
               getPolygon: function(l, i) {
-                const c = new a.Polygon({
+                const d = new a.Polygon({
                   path: i,
                   zIndex: e.zIndex,
                   fillColor: e.style.fillColor,
@@ -162,8 +222,8 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
                   strokeStyle: e.style.strokeStyle
                   // 线条样式
                 });
-                return c.on("mouseover", () => {
-                  c.setOptions({
+                return d.on("mouseover", () => {
+                  d.setOptions({
                     fillOpacity: e.mouseover.fillOpacity,
                     fillColor: e.mouseover.fillColor,
                     strokeOpacity: e.mouseover.strokeOpacity,
@@ -171,8 +231,8 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
                     strokeStyle: e.mouseover.strokeStyle,
                     strokeWeight: e.mouseover.strokeWeight
                   });
-                }), c.on("mouseout", () => {
-                  c.setOptions({
+                }), d.on("mouseout", () => {
+                  d.setOptions({
                     fillColor: e.style.fillColor,
                     // 填充色
                     strokeOpacity: e.style.strokeOpacity,
@@ -186,17 +246,17 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
                     strokeStyle: e.style.strokeStyle
                     // 线条样式
                   });
-                }), c;
+                }), d;
               }
             });
-            o.value.add(r);
+            r.value.add(t);
           }
         } catch {
         }
-      }, F = (a, e, t) => {
+      }, G = (a, e, s) => {
         try {
-          const r = new a.GeoJSONSource({
-            data: t
+          const t = new a.GeoJSONSource({
+            data: s
           }), l = new a.PointLayer({
             zIndex: e.zIndex,
             blend: e.blend,
@@ -210,7 +270,7 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
             blurWidth: e.style.blurWidth,
             borderColor: e.style.borderColor
           };
-          l.setSource(r), l.setStyle(i), n.value.add(l), l.addAnimate({
+          l.setSource(t), l.setStyle(i), n.value.add(l), l.addAnimate({
             key: e.animate.key,
             value: e.animate.value,
             duration: e.animate.duration,
@@ -223,10 +283,10 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
           });
         } catch {
         }
-      }, G = (a, e, t) => {
+      }, H = (a, e, s) => {
         try {
-          const r = new a.GeoJSONSource({
-            data: t
+          const t = new a.GeoJSONSource({
+            data: s
           }), l = new a.ScatterLayer({
             loca: n.value,
             zIndex: e.zIndex,
@@ -234,7 +294,7 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
             visible: e.visible,
             zooms: e.zooms
           });
-          l.setSource(r), l.setStyle({
+          l.setSource(t), l.setStyle({
             unit: e.style.unit,
             size: e.style.size,
             borderWidth: e.style.borderWidth,
@@ -244,10 +304,10 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
           }), n.value.animate.start();
         } catch {
         }
-      }, H = (a, e, t) => {
+      }, Z = (a, e, s) => {
         try {
-          const r = new a.GeoJSONSource({
-            data: t
+          const t = new a.GeoJSONSource({
+            data: s
           }), l = new a.LabelsLayer({
             eventSupport: !0,
             visible: e.visible,
@@ -258,7 +318,7 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
             zIndex: e.zIndex
           });
           l.on("click", (i) => {
-          }), l.setSource(r), l.setStyle({
+          }), l.setSource(t), l.setStyle({
             icon: {
               image: e.icon.image,
               size: e.icon.size,
@@ -268,7 +328,7 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
             },
             text: {
               // 每项配置都可使用回调函数来动态配置
-              content: (i, c) => c.properties[e.text.content],
+              content: (i, d) => d.properties[e.text.content],
               zooms: e.text.zooms,
               offset: e.text.offset,
               direction: e.text.direction,
@@ -288,90 +348,90 @@ const ce = (m) => (te("data-v-67e74be1"), m = m(), se(), m), ie = /* @__PURE__ *
           }), n.value.add(l);
         } catch {
         }
-      }, z = (a) => {
+      }, k = (a) => {
         const e = {
           type: "FeatureCollection",
           features: []
         };
-        return a.forEach((t, r) => {
+        return a.forEach((s, t) => {
           const l = {
             type: "Feature",
-            id: re(),
+            id: ce(),
             properties: {
-              name: t.name || "",
+              name: s.name || "",
               _draw_type: "point"
             },
             geometry: {
               type: "Point",
-              coordinates: t.value
+              coordinates: s.value
             }
           };
           e.features.push(l);
         }), e;
-      }, T = (a) => {
-        o.value.setFeatures(a.config.features), o.value.setStatus({
+      }, j = (a) => {
+        r.value.setFeatures(a.config.features), r.value.setStatus({
           dragEnable: a.config.dragEnable,
           zoomEnable: a.config.zoomEnable,
           rotateEnable: a.config.rotateEnable
-        }), a.config.plugin.scale.visible ? v.value.show() : v.value.hide(), a.config.plugin.toolBar.visible ? f.value.show() : f.value.hide(), a.config.plugin.controlBar.visible ? g.value.show() : g.value.hide();
-      }, Z = () => {
-        o.value.clearMap(), n.value.clear(), S(b.value);
-      }, j = (a) => {
-        o.value.setMapStyle(a.config.mapStyle);
-      }, R = (a) => {
-        o.value.setZoom(a.config.zoom, !1, 200);
+        }), a.config.plugin.scale.visible ? b.value.show() : b.value.hide(), a.config.plugin.toolBar.visible ? v.value.show() : v.value.hide(), a.config.plugin.controlBar.visible ? f.value.show() : f.value.hide();
+      }, R = () => {
+        r.value.clearMap(), n.value.clear(), S(c.value);
       }, V = (a) => {
-        o.value.setCenter(a.config.center, !1, 200);
-      }, x = () => {
-        o.value && (o.value.clearMap(), o.value.destroy(), o.value = null, n.value && (n.value.clear(), n.value.destroy(), n.value = null));
+        r.value.setMapStyle(a.config.mapStyle);
+      }, U = (a) => {
+        r.value.setZoom(a.config.zoom, !1, 200);
+      }, q = (a) => {
+        r.value.setCenter(a.config.center, !1, 200);
+      }, O = () => {
+        r.value && (r.value.clearMap(), r.value.destroy(), r.value = null, n.value && (n.value.clear(), n.value.destroy(), n.value = null));
       };
-      return $(() => {
+      return ae(() => {
         setTimeout(() => {
-          O(s.basicOption);
+          C(o.basicOption);
         }, 0);
-      }), ee(() => x()), {
-        initAMap2d: O,
-        updateAMapStyle: j,
-        updateAMapConfig: T,
-        updateAMapComponents: Z,
-        updateAMapZoom: R,
-        updateAMapCenter: V,
-        amap2d: o,
+      }), te(() => O()), {
+        initAMap2d: C,
+        updateAMapStyle: V,
+        updateAMapConfig: j,
+        updateAMapComponents: R,
+        updateAMapZoom: U,
+        updateAMapCenter: q,
+        amap2d: r,
         loading: w,
-        AMapPrototype: b
+        AMapPrototype: c
       };
     }, {
       initAMap2d: h,
-      updateAMapStyle: L,
-      updateAMapConfig: C,
-      updateAMapComponents: _,
-      updateAMapZoom: I,
+      updateAMapStyle: B,
+      updateAMapConfig: z,
+      updateAMapComponents: W,
+      updateAMapZoom: _,
       updateAMapCenter: D,
-      loading: J
-    } = W();
-    return d(() => s.basicOption.config, () => {
-      C(s.basicOption);
-    }, { deep: !0 }), d(() => s.basicOption.config.zoom, () => {
-      I(s.basicOption);
-    }, { deep: !0 }), d(() => s.basicOption.config.center, () => {
-      D(s.basicOption);
-    }, { deep: !0 }), d(() => s.basicOption.widgets, () => {
-      _();
-    }, { deep: !0 }), d(() => s.basicOption.config.mapStyle, () => {
-      L(s.basicOption);
-    }, { deep: !0 }), d(() => s.basicOption.basic, () => {
-      h(s.basicOption);
-    }, { deep: !0 }), d(() => s.sources, () => {
-      h(s.basicOption);
-    }, { deep: !0 }), A({
-      refresh: () => h(s.basicOption),
-      refreshView: () => C(s.basicOption),
-      refreshData: () => C(s.basicOption)
-    }), (o, n) => (Q(), K("div", {
-      class: X(["amap-2d-wrap", { show: Y(J) }])
-    }, de, 2));
+      loading: T
+    } = A();
+    return u(() => o.basicOption.config, () => {
+      z(o.basicOption);
+    }, { deep: !0 }), u(() => o.basicOption.config.zoom, () => {
+      _(o.basicOption);
+    }, { deep: !0 }), u(() => o.basicOption.config.center, () => {
+      D(o.basicOption);
+    }, { deep: !0 }), u(() => o.basicOption.widgets, () => {
+      W();
+    }, { deep: !0 }), u(() => o.basicOption.config.mapStyle, () => {
+      B(o.basicOption);
+    }, { deep: !0 }), u(() => o.basicOption.basic, () => {
+      h(o.basicOption);
+    }, { deep: !0 }), u(() => o.sources, () => {
+      h(o.basicOption);
+    }, { deep: !0 }), M({
+      refresh: () => h(o.basicOption),
+      refreshView: () => z(o.basicOption),
+      refreshData: () => z(o.basicOption)
+    }), (r, n) => (Y(), X("div", {
+      class: $(["amap-2d-wrap", { show: ee(T) }])
+    }, ye, 2));
   }
 });
 export {
-  be as default
+  ze as default
 };

package/es/components/scene-amap3d/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f5bf46c3"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ee406fec"]]);
 export {
   c as default
 };