ym-giswidget-2d 1.0.20 → 1.0.21

package/components/layer-tree/LayerTree.vue.d.ts

@@ -4,12 +4,15 @@ type __VLS_Props = {
     data: IMapService[];
     map: OLMap;
     editLayerTag?: string;
+    showOpacity?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     loaded: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLoaded?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    showOpacity: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     tocTree: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ArrayConstructor;
@@ -359,12 +362,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         getCheckedKeys: (leafOnly?: boolean) => import('element-plus').TreeKey[];
         getCurrentNode: () => import('element-plus').TreeNodeData;
         getCurrentKey: () => any;
-        setCheckedNodes: (nodes: import('element-plus/es/components/tree/src/model/node').default[], leafOnly
-        /**
-         * 将树数据转成数组
-         * @param nodeData
-         */
-        ?: boolean) => void;
+        setCheckedNodes: (nodes: import('element-plus/es/components/tree/src/model/node').default[], leafOnly?: boolean) => void;
         setCheckedKeys: (keys: import('element-plus').TreeKey[], leafOnly?: boolean) => void;
         setChecked: (data: import('element-plus').TreeKey | import('element-plus').TreeNodeData, checked: boolean, deep: boolean) => void;
         getHalfCheckedNodes: () => import('element-plus').TreeNodeData[];
@@ -752,12 +750,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         getCheckedKeys: (leafOnly?: boolean) => import('element-plus').TreeKey[];
         getCurrentNode: () => import('element-plus').TreeNodeData;
         getCurrentKey: () => any;
-        setCheckedNodes: (nodes: import('element-plus/es/components/tree/src/model/node').default[], leafOnly
-        /**
-         * 将树数据转成数组
-         * @param nodeData
-         */
-        ?: boolean) => void;
+        setCheckedNodes: (nodes: import('element-plus/es/components/tree/src/model/node').default[], leafOnly?: boolean) => void;
         setCheckedKeys: (keys: import('element-plus').TreeKey[], leafOnly?: boolean) => void;
         setChecked: (data: import('element-plus').TreeKey | import('element-plus').TreeNodeData, checked: boolean, deep: boolean) => void;
         getHalfCheckedNodes: () => import('element-plus').TreeNodeData[];

package/components/layer-tree/LayerTree.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./LayerTree.vue2.js";
 /* empty css               */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const _LayerTree = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8dd9ae4"]]);
+const _LayerTree = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-70251e18"]]);
 export {
   _LayerTree as default
 };

package/components/layer-tree/LayerTree.vue2.js

@@ -1,7 +1,8 @@
-import { ElTooltip } from "element-plus/es";
+import { ElTooltip, ElSlider } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/slider/style/css";
 import "element-plus/es/components/tooltip/style/css";
-import { defineComponent, ref, toRaw, reactive, onMounted, computed, createElementBlock, openBlock, createVNode, unref, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, nextTick } from "vue";
+import { defineComponent, ref, toRaw, reactive, onMounted, computed, createElementBlock, openBlock, createVNode, unref, withCtx, createElementVNode, createCommentVNode, withModifiers, normalizeClass, createTextVNode, toDisplayString, nextTick } from "vue";
 import { ElMessage, ElTree } from "element-plus";
 import LayerManager from "ym-gis-2d/layers/LayerManager";
 import { mapServiceTreeTransform } from "ym-gis-2d/utils/LayerUtil";
@@ -14,12 +15,14 @@ import editLayerImg from "../../assets/img/editLayerIcon.png.js";
 const _hoisted_1 = { class: "custom-tree-node" };
 const _hoisted_2 = { class: "icontest" };
 const _hoisted_3 = ["src", "id", "onClick"];
+const _hoisted_4 = { class: "opacity-text" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayerTree",
   props: {
     data: {},
     map: {},
-    editLayerTag: {}
+    editLayerTag: {},
+    showOpacity: { type: Boolean, default: false }
   },
   emits: ["loaded"],
   setup(__props, { emit: __emit }) {
@@ -33,7 +36,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       defaultIds: [],
       currentEditLayerId: ""
     });
+    const treenodecontentheight = ref("49px");
     onMounted(async () => {
+      if (!props.showOpacity) {
+        treenodecontentheight.value = "26px";
+      }
       initLayers();
     });
     const getLayerImg = computed(() => (item) => {
@@ -112,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         ElMessage({
           showClose: true,
-          message: "服务不支持",
+          message: "服务不支持开启编辑",
           type: "warning"
         });
       }
@@ -156,6 +163,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return true;
       }
     }
+    function onOpacityChange(data) {
+      const layer = props.map.getLayersById(data.id);
+      if (layer && data.opacity != void 0) {
+        layer == null ? void 0 : layer.setOpacity(data.opacity);
+      }
+    }
     function getLayerArray(nodeData) {
       let result = [];
       if (!nodeData || nodeData.length == 0) {
@@ -173,6 +186,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_el_tooltip = ElTooltip;
+      const _component_el_slider = ElSlider;
       return openBlock(), createElementBlock("div", null, [
         createVNode(unref(ElTree), {
           class: "toc-tree el-current",
@@ -190,13 +204,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "allow-drop": handleEnter
         }, {
           default: withCtx(({ node, data }) => [
-            createElementVNode("span", _hoisted_1, [
+            createElementVNode("div", _hoisted_1, [
               createElementVNode("span", _hoisted_2, [
                 createElementVNode("img", {
+                  onClick: [
+                    _cache[0] || (_cache[0] = withModifiers(() => {
+                    }, ["stop"])),
+                    ($event) => iconClick(data)
+                  ],
                   src: getLayerImg.value(data),
                   class: "treeIconImg",
-                  id: "treeIcon_" + data.id,
-                  onClick: ($event) => iconClick(data)
+                  id: "treeIcon_" + data.id
                 }, null, 8, _hoisted_3),
                 createElementVNode("div", {
                   class: normalizeClass(["layer-span", unref(reactiveValue).currentEditLayerId == data.id ? "active" : ""])
@@ -212,7 +230,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1032, ["content"])
                 ], 2)
-              ])
+              ]),
+              props.showOpacity && data.url ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                }, ["stop"])),
+                class: "opacity-container"
+              }, [
+                createVNode(_component_el_slider, {
+                  onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                  }, ["stop"])),
+                  modelValue: data.opacity,
+                  "onUpdate:modelValue": ($event) => data.opacity = $event,
+                  "show-tooltip": false,
+                  min: 0,
+                  max: 1,
+                  step: 0.01,
+                  onChange: ($event) => onOpacityChange(data)
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "onChange"]),
+                createElementVNode("span", _hoisted_4, toDisplayString((data.opacity * 100).toFixed()) + "%", 1)
+              ])) : createCommentVNode("", true)
             ])
           ]),
           _: 1

package/components/layer-tree/index.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-.layer-btn[data-v-d8dd9ae4] {
+.layer-btn[data-v-70251e18] {
   background-color: var(--system-primary-color);
   color: var(--system-primary-text-color);
   font-size: var(--system-primary-text-size);
@@ -12,29 +12,31 @@
   cursor: pointer;
   border-radius: 3px;
 }
-.add-toc-tree[data-v-d8dd9ae4] {
+.add-toc-tree[data-v-70251e18] {
   color: var(--el-text-color-regular) !important;
 }
-.el-tree[data-v-d8dd9ae4] {
+.el-tree[data-v-70251e18] {
   background: unset;
   color: var(--system-primary-text-color);
   font-size: var(--system-primary-text-size);
   overflow: auto;
   max-height: 400px;
 }
-.el-tree[data-v-d8dd9ae4] .el-tree-node :hover {
+.el-tree[data-v-70251e18] .el-tree-node :hover {
   background: unset;
 }
-.el-tree[data-v-d8dd9ae4] .el-tree-node :focus {
+.el-tree[data-v-70251e18] .el-tree-node :focus {
   background: unset;
 }
-.el-tree[data-v-d8dd9ae4] .el-tree-node .el-tree-node__content {
+.el-tree[data-v-70251e18] .el-tree-node .el-tree-node__content {
   background: unset;
+  align-items: unset;
+  height: 100%;
 }
-.el-tree .active[data-v-d8dd9ae4] {
+.el-tree .active[data-v-70251e18] {
   color: var(--system-primary-text-active-color);
 }
-.el-tree .layer-span[data-v-d8dd9ae4] .el-only-child__content {
+.el-tree .layer-span[data-v-70251e18] .el-only-child__content {
   display: block;
   width: 95px;
   word-wrap: break-word;
@@ -46,14 +48,30 @@
   white-space: nowrap;
   /*强制不换行*/
 }
-.el-tree .icontest[data-v-d8dd9ae4] {
+.el-tree .custom-tree-node .icontest[data-v-70251e18] {
   display: flex;
   font-size: var(--system-primary-text-size);
 }
-.el-tree .icontest .treeIconImg[data-v-d8dd9ae4] {
+.el-tree .custom-tree-node .icontest .treeIconImg[data-v-70251e18] {
   height: 17px;
   margin: 2px;
 }
-[data-v-d8dd9ae4] .el-checkbox__label {
+.el-tree .custom-tree-node .opacity-container[data-v-70251e18] {
+  display: flex;
+}
+.el-tree .custom-tree-node .opacity-container .opacity-text[data-v-70251e18] {
+  margin-left: 13px;
+}
+.el-tree .el-slider[data-v-70251e18] {
+  height: 20px;
+  margin-bottom: 8px;
+}
+.el-tree .el-slider[data-v-70251e18] .el-slider__runway {
+  background-color: var(--el-slider-runway-bg-color) !important;
+}
+.el-tree .el-slider[data-v-70251e18] .el-slider__runway .el-slider__bar {
+  background-color: var(--el-slider-main-bg-color) !important;
+}
+[data-v-70251e18] .el-checkbox__label {
   margin-left: 14px;
 }

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

@@ -2,15 +2,19 @@ export declare const LayerTree: import('../../utils').WithInstall<import('vue').
     data: import('ym-gis-2d/entity').IMapService[];
     map: import('ym-gis-2d/mapView/Map').default;
     editLayerTag?: string;
+    showOpacity?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     loaded: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{
     data: import('ym-gis-2d/entity').IMapService[];
     map: import('ym-gis-2d/mapView/Map').default;
     editLayerTag?: string;
+    showOpacity?: boolean;
 }> & Readonly<{
     onLoaded?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    showOpacity: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     tocTree: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: ArrayConstructor;

package/components/toc-card/TocCard.vue.d.ts

@@ -4,10 +4,13 @@ type __VLS_Props = {
     data: IMapService[];
     map: OLMap;
     editLayerTag?: string;
+    showOpacity?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     loaded: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLoaded?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    showOpacity: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/toc-card/TocCard.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TocCard.vue2.js";
 /* empty css             */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const _TocCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8745417a"]]);
+const _TocCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-40bae35a"]]);
 export {
   _TocCard as default
 };

package/components/toc-card/TocCard.vue2.js

@@ -8,7 +8,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     data: {},
     map: {},
-    editLayerTag: {}
+    editLayerTag: {},
+    showOpacity: { type: Boolean, default: true }
   },
   emits: ["loaded"],
   setup(__props, { emit: __emit }) {
@@ -25,8 +26,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             data: props.data,
             map: props.map,
             editLayerTag: props.editLayerTag,
+            showOpacity: props.showOpacity,
             onLoaded: loadedLayer
-          }, null, 8, ["data", "map", "editLayerTag"])
+          }, null, 8, ["data", "map", "editLayerTag", "showOpacity"])
         ]),
         _: 1
       });

package/components/toc-card/index.css

@@ -1,4 +1,4 @@
-.toc-card[data-v-8745417a] {
+.toc-card[data-v-40bae35a] {
   background-color: var(--system-primary-color);
   position: absolute;
   width: 245px;

package/components/toc-card/index.d.ts

@@ -2,13 +2,17 @@ export declare const TocCard: import('../../utils').WithInstall<import('vue').De
     data: import('ym-gis-2d/entity').IMapService[];
     map: import('ym-gis-2d/mapView/Map').default;
     editLayerTag?: string;
+    showOpacity?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     loaded: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{
     data: import('ym-gis-2d/entity').IMapService[];
     map: import('ym-gis-2d/mapView/Map').default;
     editLayerTag?: string;
+    showOpacity?: boolean;
 }> & Readonly<{
     onLoaded?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>>;
+}>, {
+    showOpacity: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>>;
 export default TocCard;

package/package.json

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