ym-giswidget-2d 1.0.37 → 1.0.39

package/components/horizontally-top-toolbar/HorizontallyTopToolbar.vue2.js

@@ -128,7 +128,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["loaded"],
   setup(__props, { emit: __emit }) {
-    const modules = /* @__PURE__ */ Object.assign({ "../clear/Clear.vue": () => import("../clear/Clear.vue2.js"), "../clear/index.ts": () => import("../clear/index.js"), "../draw/Draw.vue": () => import("../draw/Draw.vue2.js"), "../draw/index.ts": () => import("../draw/index.js"), "../export/Export.vue": () => import("../export/Export.vue.js"), "../export/index.ts": () => import("../export/index.js"), "./HorizontallyTopToolbar.vue": () => import("./HorizontallyTopToolbar.vue.js"), "./index.ts": () => import("./index.js"), "../identify/Identify.vue": () => import("../identify/Identify.vue2.js"), "../identify/index.ts": () => import("../identify/index.js"), "../import/Import.vue": () => import("../import/Import.vue2.js"), "../import/index.ts": () => import("../import/index.js"), "../layer-tree/LayerTree.vue": () => import("../layer-tree/LayerTree.vue.js"), "../layer-tree/index.ts": () => import("../layer-tree/index.js"), "../legend/Legend.vue": () => import("../legend/Legend.vue.js"), "../legend/index.ts": () => import("../legend/index.js"), "../map-view/MapView.vue": () => import("../map-view/MapView.vue2.js"), "../map-view/index.ts": () => import("../map-view/index.js"), "../mouse-position/MousePositon.vue": () => import("../mouse-position/MousePositon.vue.js"), "../mouse-position/index.ts": () => import("../mouse-position/index.js"), "../multi-screen-panel/PanelMultiScreen.vue": () => import("../multi-screen-panel/PanelMultiScreen.vue.js"), "../multi-screen-panel/index.ts": () => import("../multi-screen-panel/index.js"), "../multi-screen/MultiScreen.vue": () => import("../multi-screen/MultiScreen.vue.js"), "../multi-screen/index.ts": () => import("../multi-screen/index.js"), "../popup/Popup.vue": () => import("../popup/Popup.vue.js"), "../popup/index.ts": () => import("../popup/index.js"), "../scale-line/ScaleLine.vue": () => import("../scale-line/ScaleLine.vue.js"), "../scale-line/index.ts": () => import("../scale-line/index.js"), "../select/Select.vue": () => import("../select/Select.vue2.js"), "../select/index.ts": () => import("../select/index.js"), "../swipe-layer/SwipeLayer.vue": () => import("../swipe-layer/SwipeLayer.vue2.js"), "../swipe-layer/index.ts": () => import("../swipe-layer/index.js"), "../toc-card/TocCard.vue": () => import("../toc-card/TocCard.vue.js"), "../toc-card/index.ts": () => import("../toc-card/index.js") });
+    const modules = /* @__PURE__ */ Object.assign({ "../clear/Clear.vue": () => import("../clear/Clear.vue2.js"), "../clear/index.ts": () => import("../clear/index.js"), "../draw/Draw.vue": () => import("../draw/Draw.vue2.js"), "../draw/index.ts": () => import("../draw/index.js"), "../export/Export.vue": () => import("../export/Export.vue.js"), "../export/index.ts": () => import("../export/index.js"), "./HorizontallyTopToolbar.vue": () => import("./HorizontallyTopToolbar.vue.js"), "./index.ts": () => import("./index.js"), "../identify/Identify.vue": () => import("../identify/Identify.vue2.js"), "../identify/index.ts": () => import("../identify/index.js"), "../import/Import.vue": () => import("../import/Import.vue2.js"), "../import/index.ts": () => import("../import/index.js"), "../layer-switcher/LayerSwitcher.vue": () => import("../layer-switcher/LayerSwitcher.vue.js"), "../layer-switcher/index.ts": () => import("../layer-switcher/index.js"), "../layer-tree/LayerTree.vue": () => import("../layer-tree/LayerTree.vue.js"), "../layer-tree/index.ts": () => import("../layer-tree/index.js"), "../legend/Legend.vue": () => import("../legend/Legend.vue.js"), "../legend/index.ts": () => import("../legend/index.js"), "../map-view/MapView.vue": () => import("../map-view/MapView.vue2.js"), "../map-view/index.ts": () => import("../map-view/index.js"), "../mouse-position/MousePositon.vue": () => import("../mouse-position/MousePositon.vue.js"), "../mouse-position/index.ts": () => import("../mouse-position/index.js"), "../multi-screen-panel/PanelMultiScreen.vue": () => import("../multi-screen-panel/PanelMultiScreen.vue.js"), "../multi-screen-panel/index.ts": () => import("../multi-screen-panel/index.js"), "../multi-screen/MultiScreen.vue": () => import("../multi-screen/MultiScreen.vue.js"), "../multi-screen/index.ts": () => import("../multi-screen/index.js"), "../popup/Popup.vue": () => import("../popup/Popup.vue.js"), "../popup/index.ts": () => import("../popup/index.js"), "../scale-line/ScaleLine.vue": () => import("../scale-line/ScaleLine.vue.js"), "../scale-line/index.ts": () => import("../scale-line/index.js"), "../select/Select.vue": () => import("../select/Select.vue2.js"), "../select/index.ts": () => import("../select/index.js"), "../swipe-layer/SwipeLayer.vue": () => import("../swipe-layer/SwipeLayer.vue2.js"), "../swipe-layer/index.ts": () => import("../swipe-layer/index.js"), "../toc-card/TocCard.vue": () => import("../toc-card/TocCard.vue.js"), "../toc-card/index.ts": () => import("../toc-card/index.js") });
     const emit = __emit;
     const props = __props;
     const reactiveValue = reactive({

package/components/layer-switcher/LayerSwitcher.vue.d.ts

@@ -0,0 +1,8 @@
+import { IMapService } from 'ym-gis-2d/entity';
+import { default as OLMap } from 'ym-gis-2d/mapView/Map';
+type __VLS_Props = {
+    map: OLMap;
+    layers: IMapService[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/layer-switcher/LayerSwitcher.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./LayerSwitcher.vue2.js";
+/* empty css                   */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _LayerSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2222fecf"]]);
+export {
+  _LayerSwitcher as default
+};

package/components/layer-switcher/LayerSwitcher.vue2.js

@@ -0,0 +1,51 @@
+import { defineComponent, reactive, onMounted, createElementBlock, openBlock, Fragment, renderList, normalizeStyle, normalizeClass, createElementVNode, toDisplayString } from "vue";
+const _hoisted_1 = { class: "layerSwitcher" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LayerSwitcher",
+  props: {
+    map: {},
+    layers: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const reactiveValues = reactive({
+      activeIds: []
+      //用户存储当前激活的图层id
+    });
+    onMounted(() => {
+      for (const layer of props.layers) {
+        if (layer.checked) {
+          reactiveValues.activeIds.push(layer.id);
+          props.map.addMapLayer(layer);
+        }
+      }
+    });
+    function addLayer(layer) {
+      if (reactiveValues.activeIds.indexOf(layer.id) > -1) {
+        reactiveValues.activeIds.splice(reactiveValues.activeIds.indexOf(layer.id), 1);
+        props.map.removeLayerById(layer.id);
+      } else {
+        reactiveValues.activeIds.push(layer.id);
+        props.map.addMapLayer(layer);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.layers, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            onClick: ($event) => addLayer(item),
+            class: normalizeClass(["mapTypeCard layer", reactiveValues.activeIds.indexOf(item.id) > -1 ? "active" : ""]),
+            style: normalizeStyle({ "z-index": `${props.layers.length - index}`, right: `${(props.layers.length - index) * 5}px`, "background-image": `url(${item.thumbnail})` })
+          }, [
+            createElementVNode("span", null, toDisplayString(item.title), 1)
+          ], 14, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/components/layer-switcher/index.css

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+.layerSwitcher[data-v-2222fecf] {
+  width: 106px;
+  height: 70px;
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 2;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: width 0.8s, height 0.8s;
+  -moz-transition: width 0.8s, height 0.8s, -moz-transform 0.8s;
+  /* Firefox 4 */
+  -webkit-transition: width 0.8s, height 0.8s, -webkit-transform 0.8s;
+  /* Safari and Chrome */
+  -o-transition: width 0.8s, height 0.8s, -o-transform 0.8s;
+  /* Opera */
+}
+.layerSwitcher[data-v-2222fecf]:hover {
+  width: unset;
+  padding-right: 5px;
+  background: rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+}
+.layerSwitcher:hover .layer[data-v-2222fecf] {
+  margin-left: 5px;
+  position: unset;
+}
+.layerSwitcher:hover span[data-v-2222fecf] {
+  position: unset !important;
+  margin-top: 42px;
+}
+.layerSwitcher .mapTypeCard[data-v-2222fecf] {
+  position: absolute;
+  top: 5px;
+  width: 86px;
+  height: 60px;
+  border-radius: 5px;
+  border: solid 1px black;
+  transition: right 0.8s;
+  -moz-transition: right 0.8s;
+  /* Firefox 4 */
+  -webkit-transition: right 0.8s;
+  /* Safari and Chrome */
+  -o-transition: right 0.8s;
+  /* Opera */
+  transition: right 0.8s;
+  -moz-transition: right 0.8s;
+  /* Firefox 4 */
+  -webkit-transition: right 0.8s;
+  /* Safari 和 Chrome */
+  -o-transition: right 0.8s;
+  /* Opera */
+}
+.layerSwitcher .mapTypeCard span[data-v-2222fecf] {
+  width: 84px;
+  border-radius: 2px;
+  height: 16px;
+  position: absolute;
+  bottom: 0px;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  color: #fff;
+  background: #888f88;
+  opacity: 0.8;
+}
+.layerSwitcher .layer[data-v-2222fecf] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.layerSwitcher .layer[data-v-2222fecf]:hover {
+  border: solid 1px #31a5f7;
+}
+.layerSwitcher .layer:hover span[data-v-2222fecf],
+.layerSwitcher .active span[data-v-2222fecf] {
+  background: #31a5f7;
+}

package/components/layer-switcher/index.d.ts

@@ -0,0 +1,8 @@
+export declare const LayerSwitcher: import('../../utils').WithInstall<import('vue').DefineComponent<{
+    map: import('ym-gis-2d/mapView/Map').default;
+    layers: import('ym-gis-2d/entity').IMapService[];
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    map: import('ym-gis-2d/mapView/Map').default;
+    layers: import('ym-gis-2d/entity').IMapService[];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>>;
+export default LayerSwitcher;

package/components/layer-switcher/index.js

@@ -0,0 +1,8 @@
+import "./index.css";
+import { withInstall } from "../../utils/wthInstall.js";
+import _LayerSwitcher from "./LayerSwitcher.vue.js";
+const LayerSwitcher = withInstall(_LayerSwitcher);
+export {
+  LayerSwitcher,
+  LayerSwitcher as default
+};

package/components/map-view/MapView.vue.d.ts

@@ -107,6 +107,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 url?: string | undefined;
             }[] | undefined;
             showLegend?: boolean | undefined;
+            thumbnail: string;
         } | undefined;
         interactionManager: {
             map: {

package/components/map-view/index.d.ts

@@ -106,6 +106,7 @@ export declare const MapView: import('../../utils').WithInstall<import('vue').De
                 url?: string | undefined;
             }[] | undefined;
             showLegend?: boolean | undefined;
+            thumbnail: string;
         } | undefined;
         interactionManager: {
             map: {

package/components/multi-screen/MultiScreen.vue.d.ts

@@ -113,6 +113,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 url?: string | undefined;
             }[] | undefined;
             showLegend?: boolean | undefined;
+            thumbnail: string;
         } | undefined;
         interactionManager: {
             map: {

package/components/multi-screen/index.d.ts

@@ -109,6 +109,7 @@ export declare const MultiScreen: import('../../utils').WithInstall<import('vue'
                 url?: string | undefined;
             }[] | undefined;
             showLegend?: boolean | undefined;
+            thumbnail: string;
         } | undefined;
         interactionManager: {
             map: {

package/index.d.ts

@@ -12,3 +12,4 @@ export * from './components/mouse-position';
 export * from './components/scale-line';
 export * from './components/map-view';
 export * from './components/legend';
+export * from './components/layer-switcher';

package/index.js

@@ -13,6 +13,7 @@ import { MousePositon } from "./components/mouse-position/index.js";
 import { ScaleLine } from "./components/scale-line/index.js";
 import { MapView } from "./components/map-view/index.js";
 import { Legend } from "./components/legend/index.js";
+import { LayerSwitcher } from "./components/layer-switcher/index.js";
 export {
   Clear,
   Draw,
@@ -20,6 +21,7 @@ export {
   HorizontallyTopToolbar,
   Identify,
   Import,
+  LayerSwitcher,
   Legend,
   MapView,
   MousePositon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ym-giswidget-2d",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "type": "module",
   "main": "index.js",
   "module": "index.js",