npm - potato-map3d-ui2 - Versions diffs - 0.0.16 → 0.0.18 - Mend

potato-map3d-ui2 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/map3d-ui2.es.js CHANGED Viewed

@@ -1,60 +1,291 @@
-import { defineComponent, toRefs, onMounted, openBlock, createElementBlock, unref, renderSlot, createElementVNode, normalizeClass, createTextVNode } from "vue";
+import { defineComponent, onMounted, onUnmounted, openBlock, createElementBlock, renderSlot, createElementVNode, normalizeClass, createTextVNode } from "vue";
+const __uno = "";
 const { tudou3d } = window;
 function initMap(options) {
   const { id, mapOptions } = options;
   const map = new tudou3d.Map(id, mapOptions);
   return map;
 }
-const _hoisted_1$2 = ["id"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const defaultMapIds = {
+  mainMapId: "mainMapId",
+  rollMapId: "rollMapId",
+  splitMapId: "splitMapId"
+};
+const mapConfig = {
+  offLine: false,
+  scene: {
+    center: {
+      lat: 34.265944,
+      lng: 108.937913,
+      alt: 223552084e-1,
+      heading: 0,
+      pitch: -90
+    },
+    allowTextureFilterAnisotropic: true
+  },
+  fxaa: true,
+  globe: {
+    preloadAncestors: false
+  },
+  terrain: {
+    url: "//data.mars3d.cn/terrain",
+    show: true,
+    requestVertexNormals: true
+  },
+  control: {
+    infoBox: false,
+    baseLayerPicker: false
+  },
+  basemaps: [
+    {
+      id: 1,
+      name: "天地图卫星",
+      type: "group",
+      show: true,
+      layers: [
+        {
+          type: "tdt",
+          name: "卫星",
+          layer: "img_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e"
+          ]
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "img_z",
+          key: ["de2d36347d44020b5bab35b48c958801"]
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: "天地图电子",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          type: "tdt",
+          name: "底图",
+          layer: "vec_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e"
+          ]
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "vec_z",
+          key: ["de2d36347d44020b5bab35b48c958801"]
+        }
+      ]
+    },
+    {
+      id: 3,
+      name: "天地图地形地图",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          type: "tdt",
+          name: "底图",
+          layer: "ter_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e"
+          ]
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "ter_z",
+          key: ["de2d36347d44020b5bab35b48c958801"]
+        }
+      ]
+    },
+    {
+      id: 7,
+      name: "天地图",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          type: "tdt",
+          name: "底图",
+          layer: "ter_d",
+          key: [
+            "79dbab637f181bf953e0334bfd179f3e",
+            "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+            "de2d36347d44020b5bab35b48c958801",
+            "d0c7b65873a6b8961d42f656b6ef7ae7",
+            "d5ddf0de8791e734dc8a8296b90cea5e"
+          ]
+        },
+        {
+          name: "注记",
+          type: "tdt",
+          layer: "ter_z",
+          key: ["de2d36347d44020b5bab35b48c958801"]
+        }
+      ]
+    },
+    {
+      id: 4,
+      name: "离线天地图卫星",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857imgD/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "卫星",
+          minimumLevel: 3,
+          maximumLevel: 16,
+          minimumTerrainLevel: 3,
+          maximumTerrainLevel: 18
+        }
+      ]
+    },
+    {
+      id: 5,
+      name: "离线天地图电子",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857img/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "电子",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16
+        },
+        {
+          url: "/mapdata/maptile/wgs3857imgZ/{z}/{x}/{y}.png",
+          type: "xyz",
+          name: "注记",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16
+        }
+      ]
+    },
+    {
+      id: 6,
+      name: "离线天地图地形地图",
+      type: "group",
+      show: false,
+      layers: [
+        {
+          url: "/mapdata/maptile/wgs3857vec/{z}/{x}/{y}.jpg",
+          type: "xyz",
+          name: "电子",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16
+        },
+        {
+          type: "xyz",
+          name: "注记",
+          minimumLevel: 1,
+          maximumLevel: 13,
+          minimumTerrainLevel: 1,
+          maximumTerrainLevel: 16
+        }
+      ]
+    }
+  ]
+};
+const { mainMapId } = defaultMapIds;
+const mapsObject = {};
+function setMap(options) {
+  const { mapId, map } = options;
+  const key = mapId || mainMapId;
+  mapsObject[key] = map;
+  window.mapsObject = mapsObject;
+}
+function getMap(options) {
+  const { mapId } = options;
+  const key = mapId || mainMapId;
+  const map = mapsObject[key];
+  if (!map) {
+    console.log(`当前mapId:${mapId}的map对象不存在`);
+  }
+  return map;
+}
+function removeMap(options) {
+  const { mapId } = options;
+  const key = mapId || mainMapId;
+  const map = mapsObject[key];
+  if (map) {
+    map.destroy();
+    delete mapsObject[key];
+  } else {
+    console.log(`mapId为${mapId}的map对象已删除`);
+  }
+}
+const _hoisted_1$3 = ["id"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     mapOptions: {
       type: Object,
-      required: true
+      default: null
     },
     mapId: {
-      type: [String],
-      default: "map3d"
+      type: String,
+      default: defaultMapIds.mainMapId
     }
   },
-  setup(__props) {
+  emits: ["onInitMap"],
+  setup(__props, { emit }) {
     const props = __props;
-    const { mapOptions, mapId } = toRefs(props);
+    const { mapOptions } = props;
     onMounted(() => {
-      window.map = initMap({
-        id: mapId.value,
-        mapOptions: mapOptions.value
+      const map = initMap({
+        id: `${props.mapId}-map`,
+        mapOptions: mapOptions || mapConfig
       });
+      setMap({ mapId: props.mapId, map });
+      emit("onInitMap", map);
+    });
+    onUnmounted(() => {
+      removeMap({ mapId: props.mapId });
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "map3d-class",
-        id: unref(mapId)
-      }, null, 8, _hoisted_1$2);
+        class: "w-100% h-100%",
+        id: `${__props.mapId}-map`
+      }, null, 8, _hoisted_1$3);
     };
   }
 });
-const index_vue_vue_type_style_index_0_scoped_914d176b_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const Map3dt = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-914d176b"]]);
 const _imports_0$1 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSLpo47moLzorr7orqEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0i5bel5YW3LeWcsOWbvuaOp+WItiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzMC4wMDAwMDAsIC00MzAuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i5Zyw5Zu+5o6n5Yi25bGV5byAIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjIuMDAwMDAwLCAyNTIuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IuWcsOWbvue8qeWwjyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjguMDAwMDAwLCAxNzguMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iui3r+W+hCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI0IDEzIDQgMTEgMjAgMTEgMjAgMTMiPjwvcG9seWdvbj4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
-const _hoisted_1$1 = /* @__PURE__ */ createElementVNode("img", {
+const _hoisted_1$2 = /* @__PURE__ */ createElementVNode("img", {
   src: _imports_0$1,
   class: "w-24px h-24px"
 }, null, -1);
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    map: {
-      type: Object,
-      default: null
+    mapId: {
+      type: String,
+      default: defaultMapIds.mainMapId
     },
     placement: {
       type: String,
@@ -63,12 +294,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { map } = toRefs(props);
     function zoomOut() {
-      const mapControl = map.value || window.map;
-      if (mapControl) {
-        const height = mapControl.viewer.camera.positionCartographic.height / 10;
-        mapControl.viewer.camera.zoomOut(height);
+      const map = getMap({ mapId: props.mapId });
+      if (map) {
+        const height = map.viewer.camera.positionCartographic.height / 10;
+        map.viewer.camera.zoomOut(height);
       } else {
         console.log("没有map对象");
       }
@@ -79,7 +309,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onClick: zoomOut
       }, [
         renderSlot(_ctx.$slots, "img", {}, () => [
-          _hoisted_1$1
+          _hoisted_1$2
         ]),
         createElementVNode("span", {
           class: normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
@@ -96,16 +326,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _imports_0 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSLpo47moLzorr7orqEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0i5bel5YW3LeWcsOWbvuaOp+WItiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzMC4wMDAwMDAsIC0zOTguMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i5Zyw5Zu+5o6n5Yi25bGV5byAIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjIuMDAwMDAwLCAyNTIuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IuWcsOWbvuaUvuWkpyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjguMDAwMDAwLCAxNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iui3r+W+hCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIxMy4xNDI4NTcyIDEzLjE0Mjg1NzIgMTMuMTQyODU3MiAyMCAxMC44NTcxNDI4IDIwIDEwLjg1NzE0MjggMTMuMTQyODU3MiA0IDEzLjE0Mjg1NzIgNCAxMC44NTcxNDI4IDEwLjg1NzE0MjggMTAuODU3MTQyOCAxMC44NTcxNDI4IDQgMTMuMTQyODU3MiA0IDEzLjE0Mjg1NzIgMTAuODU3MTQyOCAyMCAxMC44NTcxNDI4IDIwIDEzLjE0Mjg1NzIiPjwvcG9seWdvbj4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("img", {
+const _hoisted_1$1 = /* @__PURE__ */ createElementVNode("img", {
   src: _imports_0,
   class: "w-24px h-24px"
 }, null, -1);
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    map: {
-      type: Object,
-      default: null
+    mapId: {
+      type: String,
+      default: defaultMapIds.mainMapId
     },
     placement: {
       type: String,
@@ -114,12 +344,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { map } = toRefs(props);
     function zoomIn() {
-      const mapControl = map.value || window.map;
-      if (mapControl) {
-        const height = mapControl.viewer.camera.positionCartographic.height / 10;
-        mapControl.viewer.camera.zoomIn(height);
+      const map = getMap({ mapId: props.mapId });
+      if (map) {
+        const height = map.viewer.camera.positionCartographic.height / 10;
+        map.viewer.camera.zoomIn(height);
       } else {
         console.log("没有map对象");
       }
@@ -130,7 +359,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onClick: zoomIn
       }, [
         renderSlot(_ctx.$slots, "img", {}, () => [
-          _hoisted_1
+          _hoisted_1$1
         ]),
         createElementVNode("span", {
           class: normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
@@ -146,11 +375,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1 = { class: "group w-28px h-28px rd-4px bg-#000 f-c-c p-2px float-left m-2px cursor-pointer relative z-999 hover:bg-blue" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    placement: {
+      type: String,
+      default: "left"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "img"),
+        createElementVNode("span", {
+          class: normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
+        }, [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("div", {
+            class: normalizeClass(["absolute top-50% translate-y--50% w-0px h-0px b-5px b-solid b-transparent", __props.placement === "left" ? "right--10px b-l-#000 " : "left--10px b-r-#000"])
+          }, null, 2)
+        ], 2)
+      ]);
+    };
+  }
+});
 const potatoMap3dUi2 = {
   install: (app) => {
-    app.component("map3dt", Map3dt);
-    app.component("zoomOut", _sfc_main$1);
-    app.component("zoomIn", _sfc_main);
+    app.component("map3dt", _sfc_main$3);
+    app.component("ControlZoomOut", _sfc_main$2);
+    app.component("ControlZoomIn", _sfc_main$1);
+    app.component("ControlMask", _sfc_main);
   }
 };
 export {

package/dist/map3d-ui2.umd.js CHANGED Viewed

@@ -2,62 +2,293 @@
   typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory(require("vue")) : typeof define === "function" && define.amd ? define(["vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global["map3d-ui2"] = factory(global.Vue));
 })(this, function(vue) {
   "use strict";
+  const __uno = "";
   const { tudou3d } = window;
   function initMap(options) {
     const { id, mapOptions } = options;
     const map = new tudou3d.Map(id, mapOptions);
     return map;
   }
-  const _hoisted_1$2 = ["id"];
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const defaultMapIds = {
+    mainMapId: "mainMapId",
+    rollMapId: "rollMapId",
+    splitMapId: "splitMapId"
+  };
+  const mapConfig = {
+    offLine: false,
+    scene: {
+      center: {
+        lat: 34.265944,
+        lng: 108.937913,
+        alt: 223552084e-1,
+        heading: 0,
+        pitch: -90
+      },
+      allowTextureFilterAnisotropic: true
+    },
+    fxaa: true,
+    globe: {
+      preloadAncestors: false
+    },
+    terrain: {
+      url: "//data.mars3d.cn/terrain",
+      show: true,
+      requestVertexNormals: true
+    },
+    control: {
+      infoBox: false,
+      baseLayerPicker: false
+    },
+    basemaps: [
+      {
+        id: 1,
+        name: "天地图卫星",
+        type: "group",
+        show: true,
+        layers: [
+          {
+            type: "tdt",
+            name: "卫星",
+            layer: "img_d",
+            key: [
+              "79dbab637f181bf953e0334bfd179f3e",
+              "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+              "de2d36347d44020b5bab35b48c958801",
+              "d0c7b65873a6b8961d42f656b6ef7ae7",
+              "d5ddf0de8791e734dc8a8296b90cea5e"
+            ]
+          },
+          {
+            name: "注记",
+            type: "tdt",
+            layer: "img_z",
+            key: ["de2d36347d44020b5bab35b48c958801"]
+          }
+        ]
+      },
+      {
+        id: 2,
+        name: "天地图电子",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            type: "tdt",
+            name: "底图",
+            layer: "vec_d",
+            key: [
+              "79dbab637f181bf953e0334bfd179f3e",
+              "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+              "de2d36347d44020b5bab35b48c958801",
+              "d0c7b65873a6b8961d42f656b6ef7ae7",
+              "d5ddf0de8791e734dc8a8296b90cea5e"
+            ]
+          },
+          {
+            name: "注记",
+            type: "tdt",
+            layer: "vec_z",
+            key: ["de2d36347d44020b5bab35b48c958801"]
+          }
+        ]
+      },
+      {
+        id: 3,
+        name: "天地图地形地图",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            type: "tdt",
+            name: "底图",
+            layer: "ter_d",
+            key: [
+              "79dbab637f181bf953e0334bfd179f3e",
+              "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+              "de2d36347d44020b5bab35b48c958801",
+              "d0c7b65873a6b8961d42f656b6ef7ae7",
+              "d5ddf0de8791e734dc8a8296b90cea5e"
+            ]
+          },
+          {
+            name: "注记",
+            type: "tdt",
+            layer: "ter_z",
+            key: ["de2d36347d44020b5bab35b48c958801"]
+          }
+        ]
+      },
+      {
+        id: 7,
+        name: "天地图",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            type: "tdt",
+            name: "底图",
+            layer: "ter_d",
+            key: [
+              "79dbab637f181bf953e0334bfd179f3e",
+              "7dea3b9cbee02a0d5d15699a4d2cf9cb",
+              "de2d36347d44020b5bab35b48c958801",
+              "d0c7b65873a6b8961d42f656b6ef7ae7",
+              "d5ddf0de8791e734dc8a8296b90cea5e"
+            ]
+          },
+          {
+            name: "注记",
+            type: "tdt",
+            layer: "ter_z",
+            key: ["de2d36347d44020b5bab35b48c958801"]
+          }
+        ]
+      },
+      {
+        id: 4,
+        name: "离线天地图卫星",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            url: "/mapdata/maptile/wgs3857imgD/{z}/{x}/{y}.jpg",
+            type: "xyz",
+            name: "卫星",
+            minimumLevel: 3,
+            maximumLevel: 16,
+            minimumTerrainLevel: 3,
+            maximumTerrainLevel: 18
+          }
+        ]
+      },
+      {
+        id: 5,
+        name: "离线天地图电子",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            url: "/mapdata/maptile/wgs3857img/{z}/{x}/{y}.jpg",
+            type: "xyz",
+            name: "电子",
+            minimumLevel: 1,
+            maximumLevel: 13,
+            minimumTerrainLevel: 1,
+            maximumTerrainLevel: 16
+          },
+          {
+            url: "/mapdata/maptile/wgs3857imgZ/{z}/{x}/{y}.png",
+            type: "xyz",
+            name: "注记",
+            minimumLevel: 1,
+            maximumLevel: 13,
+            minimumTerrainLevel: 1,
+            maximumTerrainLevel: 16
+          }
+        ]
+      },
+      {
+        id: 6,
+        name: "离线天地图地形地图",
+        type: "group",
+        show: false,
+        layers: [
+          {
+            url: "/mapdata/maptile/wgs3857vec/{z}/{x}/{y}.jpg",
+            type: "xyz",
+            name: "电子",
+            minimumLevel: 1,
+            maximumLevel: 13,
+            minimumTerrainLevel: 1,
+            maximumTerrainLevel: 16
+          },
+          {
+            type: "xyz",
+            name: "注记",
+            minimumLevel: 1,
+            maximumLevel: 13,
+            minimumTerrainLevel: 1,
+            maximumTerrainLevel: 16
+          }
+        ]
+      }
+    ]
+  };
+  const { mainMapId } = defaultMapIds;
+  const mapsObject = {};
+  function setMap(options) {
+    const { mapId, map } = options;
+    const key = mapId || mainMapId;
+    mapsObject[key] = map;
+    window.mapsObject = mapsObject;
+  }
+  function getMap(options) {
+    const { mapId } = options;
+    const key = mapId || mainMapId;
+    const map = mapsObject[key];
+    if (!map) {
+      console.log(`当前mapId:${mapId}的map对象不存在`);
+    }
+    return map;
+  }
+  function removeMap(options) {
+    const { mapId } = options;
+    const key = mapId || mainMapId;
+    const map = mapsObject[key];
+    if (map) {
+      map.destroy();
+      delete mapsObject[key];
+    } else {
+      console.log(`mapId为${mapId}的map对象已删除`);
+    }
+  }
+  const _hoisted_1$3 = ["id"];
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       mapOptions: {
         type: Object,
-        required: true
+        default: null
       },
       mapId: {
-        type: [String],
-        default: "map3d"
+        type: String,
+        default: defaultMapIds.mainMapId
       }
     },
-    setup(__props) {
+    emits: ["onInitMap"],
+    setup(__props, { emit }) {
       const props = __props;
-      const { mapOptions, mapId } = vue.toRefs(props);
+      const { mapOptions } = props;
       vue.onMounted(() => {
-        window.map = initMap({
-          id: mapId.value,
-          mapOptions: mapOptions.value
+        const map = initMap({
+          id: `${props.mapId}-map`,
+          mapOptions: mapOptions || mapConfig
         });
+        setMap({ mapId: props.mapId, map });
+        emit("onInitMap", map);
+      });
+      vue.onUnmounted(() => {
+        removeMap({ mapId: props.mapId });
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: "map3d-class",
-          id: vue.unref(mapId)
-        }, null, 8, _hoisted_1$2);
+          class: "w-100% h-100%",
+          id: `${__props.mapId}-map`
+        }, null, 8, _hoisted_1$3);
       };
     }
   });
-  const index_vue_vue_type_style_index_0_scoped_914d176b_lang = "";
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-  const Map3dt = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-914d176b"]]);
   const _imports_0$1 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSLpo47moLzorr7orqEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0i5bel5YW3LeWcsOWbvuaOp+WItiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzMC4wMDAwMDAsIC00MzAuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i5Zyw5Zu+5o6n5Yi25bGV5byAIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjIuMDAwMDAwLCAyNTIuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IuWcsOWbvue8qeWwjyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjguMDAwMDAwLCAxNzguMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iui3r+W+hCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI0IDEzIDQgMTEgMjAgMTEgMjAgMTMiPjwvcG9seWdvbj4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
-  const _hoisted_1$1 = /* @__PURE__ */ vue.createElementVNode("img", {
+  const _hoisted_1$2 = /* @__PURE__ */ vue.createElementVNode("img", {
     src: _imports_0$1,
     class: "w-24px h-24px"
   }, null, -1);
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
-      map: {
-        type: Object,
-        default: null
+      mapId: {
+        type: String,
+        default: defaultMapIds.mainMapId
       },
       placement: {
         type: String,
@@ -66,12 +297,11 @@
     },
     setup(__props) {
       const props = __props;
-      const { map } = vue.toRefs(props);
       function zoomOut() {
-        const mapControl = map.value || window.map;
-        if (mapControl) {
-          const height = mapControl.viewer.camera.positionCartographic.height / 10;
-          mapControl.viewer.camera.zoomOut(height);
+        const map = getMap({ mapId: props.mapId });
+        if (map) {
+          const height = map.viewer.camera.positionCartographic.height / 10;
+          map.viewer.camera.zoomOut(height);
         } else {
           console.log("没有map对象");
         }
@@ -82,7 +312,7 @@
           onClick: zoomOut
         }, [
           vue.renderSlot(_ctx.$slots, "img", {}, () => [
-            _hoisted_1$1
+            _hoisted_1$2
           ]),
           vue.createElementVNode("span", {
             class: vue.normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
@@ -99,16 +329,16 @@
     }
   });
   const _imports_0 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDxnIGlkPSLpo47moLzorr7orqEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0i5bel5YW3LeWcsOWbvuaOp+WItiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzMC4wMDAwMDAsIC0zOTguMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i5Zyw5Zu+5o6n5Yi25bGV5byAIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjIuMDAwMDAwLCAyNTIuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IuWcsOWbvuaUvuWkpyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjguMDAwMDAwLCAxNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iui3r+W+hCIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIxMy4xNDI4NTcyIDEzLjE0Mjg1NzIgMTMuMTQyODU3MiAyMCAxMC44NTcxNDI4IDIwIDEwLjg1NzE0MjggMTMuMTQyODU3MiA0IDEzLjE0Mjg1NzIgNCAxMC44NTcxNDI4IDEwLjg1NzE0MjggMTAuODU3MTQyOCAxMC44NTcxNDI4IDQgMTMuMTQyODU3MiA0IDEzLjE0Mjg1NzIgMTAuODU3MTQyOCAyMCAxMC44NTcxNDI4IDIwIDEzLjE0Mjg1NzIiPjwvcG9seWdvbj4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
-  const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("img", {
+  const _hoisted_1$1 = /* @__PURE__ */ vue.createElementVNode("img", {
     src: _imports_0,
     class: "w-24px h-24px"
   }, null, -1);
-  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
-      map: {
-        type: Object,
-        default: null
+      mapId: {
+        type: String,
+        default: defaultMapIds.mainMapId
       },
       placement: {
         type: String,
@@ -117,12 +347,11 @@
     },
     setup(__props) {
       const props = __props;
-      const { map } = vue.toRefs(props);
       function zoomIn() {
-        const mapControl = map.value || window.map;
-        if (mapControl) {
-          const height = mapControl.viewer.camera.positionCartographic.height / 10;
-          mapControl.viewer.camera.zoomIn(height);
+        const map = getMap({ mapId: props.mapId });
+        if (map) {
+          const height = map.viewer.camera.positionCartographic.height / 10;
+          map.viewer.camera.zoomIn(height);
         } else {
           console.log("没有map对象");
         }
@@ -133,7 +362,7 @@
           onClick: zoomIn
         }, [
           vue.renderSlot(_ctx.$slots, "img", {}, () => [
-            _hoisted_1
+            _hoisted_1$1
           ]),
           vue.createElementVNode("span", {
             class: vue.normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
@@ -149,11 +378,37 @@
       };
     }
   });
+  const _hoisted_1 = { class: "group w-28px h-28px rd-4px bg-#000 f-c-c p-2px float-left m-2px cursor-pointer relative z-999 hover:bg-blue" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "index",
+    props: {
+      placement: {
+        type: String,
+        default: "left"
+      }
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.renderSlot(_ctx.$slots, "img"),
+          vue.createElementVNode("span", {
+            class: vue.normalizeClass(["invisible group-hover:visible w-max bg-#000 absolute top-50% translate-y--50% text-14px p-4px rd-4px c-#fff lh-16px", __props.placement === "left" ? "right-150% " : "left-150%"])
+          }, [
+            vue.renderSlot(_ctx.$slots, "default"),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["absolute top-50% translate-y--50% w-0px h-0px b-5px b-solid b-transparent", __props.placement === "left" ? "right--10px b-l-#000 " : "left--10px b-r-#000"])
+            }, null, 2)
+          ], 2)
+        ]);
+      };
+    }
+  });
   const potatoMap3dUi2 = {
     install: (app) => {
-      app.component("map3dt", Map3dt);
-      app.component("zoomOut", _sfc_main$1);
-      app.component("zoomIn", _sfc_main);
+      app.component("map3dt", _sfc_main$3);
+      app.component("ControlZoomOut", _sfc_main$2);
+      app.component("ControlZoomIn", _sfc_main$1);
+      app.component("ControlMask", _sfc_main);
     }
   };
   return potatoMap3dUi2;

package/dist/style.css CHANGED Viewed

@@ -1,5 +1 @@
-.map3d-class[data-v-914d176b] {
-  width: 100%;
-  height: 100%;
-}
+ *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.f-c-c{display:flex;align-items:center;justify-content:center;}.group:hover .group-hover\:visible{visibility:visible;}.invisible{visibility:hidden;}.absolute{position:absolute;}.relative{position:relative;}.left--10px{left:-10px;}.left-150\%{left:150%;}.right--10px{right:-10px;}.right-150\%{right:150%;}.top-50\%{top:50%;}.z-999{z-index:999;}.float-left{float:left;}.m-2px{margin:2px;}.h-0px{height:0;}.h-100\%{height:100%;}.h-24px{height:24px;}.h-28px{height:28px;}.w-0px{width:0;}.w-100\%{width:100%;}.w-24px{width:24px;}.w-28px{width:28px;}.w-max{width:max-content;}.translate-y--50\%{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.cursor-pointer{cursor:pointer;}.b-5px{border-width:5px;}.b-transparent{border-color:transparent;}.b-l-\#000{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(0,0,0,var(--un-border-left-opacity));}.b-r-\#000{--un-border-opacity:1;--un-border-right-opacity:var(--un-border-opacity);border-right-color:rgba(0,0,0,var(--un-border-right-opacity));}.rd-4px{border-radius:4px;}.b-solid{border-style:solid;}.bg-\#000{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));}.hover\:bg-blue:hover{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}.p-2px{padding:2px;}.p-4px{padding:4px;}.text-14px{font-size:14px;}.lh-16px{line-height:16px;}.c-\#fff{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}

package/package.json CHANGED Viewed

@@ -1,35 +1,35 @@
-{
-  "name": "potato-map3d-ui2",
-  "private": false,
-  "version": "0.0.16",
-  "main": "./dist/map3d-ui2.umd.js",
-  "module": "./dist/map3d-ui2.es.js",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/map3d-ui2.es.js",
-      "require": "./dist/map3d-ui2.umd.js"
-    },
-    "./*": "./*"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vite-plugin-dts": "^2.2.0",
-    "vue": "^3.2.47"
-  },
-  "devDependencies": {
-    "@types/node": "^18.15.11",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "typescript": "^4.9.3",
-    "unocss": "^0.53.6",
-    "vite": "^4.3.2",
-    "vue-tsc": "^1.2.0"
-  }
-}
+{
+  "name": "potato-map3d-ui2",
+  "private": false,
+  "version": "0.0.18",
+  "main": "./dist/map3d-ui2.umd.js",
+  "module": "./dist/map3d-ui2.es.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/map3d-ui2.es.js",
+      "require": "./dist/map3d-ui2.umd.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vite-plugin-dts": "^2.2.0",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.11",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "typescript": "^4.9.3",
+    "unocss": "^0.53.6",
+    "vite": "^4.3.2",
+    "vue-tsc": "^1.2.0"
+  }
+}