@vtx/cs-map 1.0.78 → 1.0.80

package/lib/tools/style/index.less

@@ -1,282 +1,307 @@
-.cs-tools {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    padding: 0;
-    margin: 0;
-
-    .cs-tools-item-wrap {
-        cursor: pointer;
-        color: #fff;
-        transition: all 0.3s;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-bottom: 10px;
-        width: 44px;
-        height: 44px;
-        background: url('../assets/footer.png') no-repeat 0 0;
-        background-size: 100% 100%;
-        font-size: 20px;
-
-        i {
-            background: linear-gradient(0deg, #3dc6ff 0%, #97e0ff 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        &:last-child {
-            &::before {
-                height: 0;
-            }
-        }
-    }
-
-    .cs-active-tools-item-wrap {
-        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);
-        color: #fff;
-    }
-}
-
-.cs-tools-item-popover {
-    .ant-popover-inner {
-        padding: 0;
-        background: rgba(0, 35, 65, 0.9);
-        border: 1px solid rgba(1, 211, 252, 0.5);
-        box-shadow: 0 0 5px rgba(1, 211, 252, 0.75) inset;
-        border-radius: 5px;
-    }
-
-    .ant-popover-inner-content {
-        color: #fff;
-        min-width: 130px;
-    }
-
-    .ant-popover-arrow-content {
-        background: rgba(0, 35, 65, 0.9);
-
-        &::before {
-            background: rgba(1, 211, 252, 0.5);
-        }
-    }
-}
-
-.cs-tools-btn {
-    background: rgba(0, 35, 65, 0.9);
-    border: 1px solid #26425f;
-    color: #97e0ff;
-}
-
-.cs-tools-layer-tree-wrap {
-    max-height: 400px;
-    overflow-y: auto;
-    background: transparent;
-
-    &::-webkit-scrollbar {
-        /*滚动条整体样式*/
-        width: 0; /*高宽分别对应横竖滚动条的尺寸*/
-        height: 0;
-    }
-
-    .cs-tools-layer-tree {
-        background: transparent;
-        color: #fff;
-
-        .ant-tree-icon__customize {
-            margin-right: 4px;
-
-            .cs-tools-layer-tree-legend {
-                max-height: 24px;
-                padding-bottom: 4px;
-            }
-        }
-    }
-}
-
-.cs-autoComplete {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .ant-select-selector {
-        background: rgba(4, 32, 61, 0.96) !important;
-        color: #fff;
-        border: 1px solid #26425f;
-    }
-}
-
-.cs-content {
-    display: flex;
-    align-items: center;
-}
-
-.cs-close-btn {
-    color: #fff !important;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.cs-tools-close-btn {
-    position: absolute;
-    top: 15px;
-    right: 10px;
-    z-index: 999;
-    color: #fff;
-    font-size: 18px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.cs-search-wrap {
-    background: rgba(4, 32, 61, 0.96);
-    .ant-select-auto-complete {
-        color: #fff;
-    }
-    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
-        background: rgba(4, 32, 61, 0.96);
-        border-color: #26425f;
-        box-shadow: 0px 2px 7px 0px rgba(6, 93, 181, 0.5);
-        border-radius: 4px;
-    }
-
-    .ant-select-dropdown {
-        background: rgba(4, 32, 61, 0.96);
-    }
-    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-        background: rgba(6, 93, 181, 0.5);
-        color: #fff;
-    }
-    .ant-select-item-option-grouped {
-        color: #fff;
-    }
-    .ant-select-item-option-content {
-        color: #fff;
-    }
-    .ant-select-item-group {
-        color: #aaa;
-    }
-}
-
-.base-map-switch-active {
-    width: 80%;
-    height: 80%;
-    border-radius: 50%;
-    overflow: hidden;
-}
-
-.base-map-switch-list-wrap {
-    width: 300px;
-
-    .base-map-switch-list-title {
-        font-size: 18px;
-    }
-
-    .base-map-switch-list {
-        max-height: 400px;
-        overflow-y: scroll;
-
-        &::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 0; /*高宽分别对应横竖滚动条的尺寸*/
-            height: 0;
-        }
-
-        .base-map-switch-list-label {
-            font-size: 14px;
-            margin: 5px 0;
-        }
-
-        .base-map-switch-list-item-wrap {
-            border: 1px solid #888;
-            border-radius: 5px;
-            padding: 5px;
-        }
-
-        .base-map-switch-list-item {
-            cursor: pointer;
-
-            .base-map-switch-list-item-img {
-                width: 100%;
-                border: solid 1px #444;
-                border-radius: 9px;
-            }
-
-            .base-map-switch-list-item-label {
-                margin-top: 4px;
-                text-align: center;
-                font-size: 12px;
-                color: #fff;
-            }
-
-            &:hover {
-                .base-map-switch-list-item-img {
-                    border-color: #fff;
-                    box-shadow: 0 0 8px #fff, 0 0 8px #fff;
-                }
-            }
-        }
-
-        .base-map-switch-list-item-active {
-            .base-map-switch-list-item-img {
-                border: double 4px rgb(189, 236, 248);
-            }
-
-            .base-map-switch-list-item-label {
-                color: rgb(189, 236, 248);
-            }
-        }
-    }
-}
-
-.cs-tools-layer {
-    user-select: none;
-    max-height: 400px;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-        /*滚动条整体样式*/
-        width: 0; /*高宽分别对应横竖滚动条的尺寸*/
-        height: 0;
-    }
-
-    .cs-tools-layer-check-all {
-        width: 100%;
-        border-bottom: 1px silver solid;
-        display: flex;
-        padding-bottom: 8px;
-    }
-
-    .cs-tools-layer-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        margin-top: 6px;
-        white-space: nowrap;
-    }
-
-    .ant-checkbox-wrapper {
-        color: #fff;
-        .cs-tools-layer-tree-legend {
-            max-height: 24px;
-            margin-right: 4px;
-            vertical-align: bottom;
-        }
-    }
-
-    .cs-tools-layer-list {
-        padding-top: 2px;
-
-        .cs-tools-layer-sub-list {
-            max-height: 400px;
-            overflow-y: auto;
-
-            &::-webkit-scrollbar {
-                /*滚动条整体样式*/
-                width: 0; /*高宽分别对应横竖滚动条的尺寸*/
-                height: 0;
-            }
-        }
-    }
-}
+.cs-tools {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 0;
+    margin: 0;
+
+    .cs-tools-item-wrap {
+        cursor: pointer;
+        color: #fff;
+        transition: all 0.3s;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 10px;
+        width: 44px;
+        height: 44px;
+        background: url('../assets/footer.png') no-repeat 0 0;
+        background-size: 100% 100%;
+        font-size: 20px;
+
+        i {
+            background: linear-gradient(0deg, #3dc6ff 0%, #97e0ff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        &:last-child {
+            &::before {
+                height: 0;
+            }
+        }
+    }
+
+    .cs-active-tools-item-wrap {
+        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);
+        color: #fff;
+    }
+}
+
+.cs-tools-item-popover {
+    .ant-popover-inner {
+        padding: 0;
+        background: rgba(0, 35, 65, 0.9);
+        border: 1px solid rgba(1, 211, 252, 0.5);
+        box-shadow: 0 0 5px rgba(1, 211, 252, 0.75) inset;
+        border-radius: 5px;
+    }
+
+    .ant-popover-inner-content {
+        color: #fff;
+        min-width: 130px;
+    }
+
+    .ant-popover-arrow-content {
+        background: rgba(0, 35, 65, 0.9);
+
+        &::before {
+            background: rgba(1, 211, 252, 0.5);
+        }
+    }
+}
+
+.cs-tools-btn {
+    background: rgba(0, 35, 65, 0.9);
+    border: 1px solid #26425f;
+    color: #97e0ff;
+}
+
+.cs-tools-layer-tree-wrap {
+    max-height: 400px;
+    overflow-y: auto;
+    background: transparent;
+
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 0; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 0;
+    }
+
+    .cs-tools-layer-tree {
+        background: transparent;
+        color: #fff;
+
+        .ant-tree-icon__customize {
+            margin-right: 4px;
+
+            .cs-tools-layer-tree-legend {
+                max-height: 24px;
+                padding-bottom: 4px;
+            }
+        }
+    }
+}
+
+.cs-autoComplete {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ant-select-selector {
+        background: rgba(4, 32, 61, 0.96) !important;
+        color: #fff;
+        border: 1px solid #26425f;
+    }
+}
+
+.cs-content {
+    display: flex;
+    align-items: center;
+}
+
+.cs-close-btn {
+    color: #fff !important;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.cs-tools-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    z-index: 999;
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+
+.cs-map-tools-tip {
+    &-title {
+        color: #fff;
+        font-size: 18px;
+    }
+    &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 10px;
+        font-size: 16px;
+        color: #fff;
+
+        &-text {
+            color: #4B89DD;
+            margin-left: 14px;
+        }
+
+        &-title {
+            margin-left: 20px;
+        }
+    }
+}
+
+.cs-search-wrap {
+    background: rgba(4, 32, 61, 0.96);
+    .ant-select-auto-complete {
+        color: #fff;
+    }
+    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+        background: rgba(4, 32, 61, 0.96);
+        border-color: #26425f;
+        box-shadow: 0px 2px 7px 0px rgba(6, 93, 181, 0.5);
+        border-radius: 4px;
+    }
+
+    .ant-select-dropdown {
+        background: rgba(4, 32, 61, 0.96);
+    }
+    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+        background: rgba(6, 93, 181, 0.5);
+        color: #fff;
+    }
+    .ant-select-item-option-grouped {
+        color: #fff;
+    }
+    .ant-select-item-option-content {
+        color: #fff;
+    }
+    .ant-select-item-group {
+        color: #aaa;
+    }
+}
+
+.cs-map-base-map-switch-active {
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.cs-map-base-map-switch-list-wrap {
+    width: 300px;
+
+    .base-map-switch-list-title {
+        font-size: 18px;
+    }
+
+    .base-map-switch-list {
+        max-height: 400px;
+        overflow-y: scroll;
+
+        &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 0; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 0;
+        }
+
+        .base-map-switch-list-label {
+            font-size: 14px;
+            margin: 5px 0;
+        }
+
+        .base-map-switch-list-item-wrap {
+            border: 1px solid #888;
+            border-radius: 5px;
+            padding: 5px;
+        }
+
+        .base-map-switch-list-item {
+            cursor: pointer;
+
+            .base-map-switch-list-item-img {
+                width: 100%;
+                border: solid 1px #444;
+                border-radius: 9px;
+            }
+
+            .base-map-switch-list-item-label {
+                margin-top: 4px;
+                text-align: center;
+                font-size: 12px;
+                color: #fff;
+            }
+
+            &:hover {
+                .base-map-switch-list-item-img {
+                    border-color: #fff;
+                    box-shadow: 0 0 8px #fff, 0 0 8px #fff;
+                }
+            }
+        }
+
+        .base-map-switch-list-item-active {
+            .base-map-switch-list-item-img {
+                border: double 4px rgb(189, 236, 248);
+            }
+
+            .base-map-switch-list-item-label {
+                color: rgb(189, 236, 248);
+            }
+        }
+    }
+}
+
+.cs-tools-layer {
+    user-select: none;
+    max-height: 400px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 0; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 0;
+    }
+
+    .cs-tools-layer-check-all {
+        width: 100%;
+        border-bottom: 1px silver solid;
+        display: flex;
+        padding-bottom: 8px;
+    }
+
+    .cs-tools-layer-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 6px;
+        white-space: nowrap;
+    }
+
+    .ant-checkbox-wrapper {
+        color: #fff;
+        .cs-tools-layer-tree-legend {
+            max-height: 24px;
+            margin-right: 4px;
+            vertical-align: bottom;
+        }
+    }
+
+    .cs-tools-layer-list {
+        padding-top: 2px;
+
+        .cs-tools-layer-sub-list {
+            max-height: 400px;
+            overflow-y: auto;
+
+            &::-webkit-scrollbar {
+                /*滚动条整体样式*/
+                width: 0; /*高宽分别对应横竖滚动条的尺寸*/
+                height: 0;
+            }
+        }
+    }
+}

package/lib/tools/tip/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _itemWrap = _interopRequireDefault(require("../components/item-wrap"));
+var _tip = _interopRequireDefault(require("./assets/tip.png"));
+var _ctrl_left = _interopRequireDefault(require("./assets/ctrl_left.png"));
+var _left = _interopRequireDefault(require("./assets/left.png"));
+var _right = _interopRequireDefault(require("./assets/right.png"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var prefix = 'cs-map-tools-tip';
+var Content = function Content() {
+  var list = [{
+    img: _ctrl_left["default"],
+    text: '旋转',
+    title: 'ctrl键+鼠标左键'
+  }, {
+    img: _left["default"],
+    text: '拖动视角',
+    title: '鼠标左键'
+  }, {
+    img: _right["default"],
+    text: '平移视角',
+    title: '鼠标右键'
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(prefix)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(prefix, "-title"))
+  }, "\u64CD\u4F5C\u63D0\u793A"), list.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(prefix, "-item")),
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+      src: item.img,
+      alt: ""
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(prefix, "-item-text"))
+    }, item.text)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(prefix, "-item-title"))
+    }, item.title));
+  }));
+};
+var Tip = function Tip(props) {
+  var show = props.show;
+  if (show) {
+    return /*#__PURE__*/_react["default"].createElement(_itemWrap["default"], {
+      content: /*#__PURE__*/_react["default"].createElement(Content, null)
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      title: "\u64CD\u4F5C\u63D0\u793A",
+      src: _tip["default"],
+      alt: "",
+      style: {
+        width: '50%',
+        height: '50%'
+      }
+    }));
+  }
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+};
+var _default = exports["default"] = Tip;
+//# sourceMappingURL=index.js.map

package/lib/tools/tip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_itemWrap","_tip","_ctrl_left","_left","_right","_classnames","obj","__esModule","prefix","Content","list","img","ctrl_left","text","title","left","right","createElement","className","classnames","concat","map","item","index","key","src","alt","Tip","props","show","content","tipPng","style","width","height","Fragment","_default","exports"],"sources":["tools/tip/index.js"],"sourcesContent":["import React from 'react';\nimport ItemWrap from \"../components/item-wrap\";\nimport tipPng from './assets/tip.png';\nimport ctrl_left from './assets/ctrl_left.png';\nimport left from './assets/left.png';\nimport right from './assets/right.png';\nimport classnames from 'classnames';\n\nconst prefix = 'cs-map-tools-tip';\n\nconst Content = () => {\n    const list = [\n        {img: ctrl_left, text: '旋转', title: 'ctrl键+鼠标左键'},\n        {img: left, text: '拖动视角', title: '鼠标左键'},\n        {img: right, text: '平移视角', title: '鼠标右键'},\n    ]\n    return (\n        <div className={classnames(prefix)}>\n            <div className={classnames(`${prefix}-title`)}>操作提示</div>\n            {list.map((item, index) => (\n                <div\n                    className={classnames(`${prefix}-item`)}\n                    key={index}\n                >\n                    <div>\n                        <img src={item.img} alt=\"\"/>\n                        <span className={classnames(`${prefix}-item-text`)}>{item.text}</span>\n                    </div>\n\n                    <div className={classnames(`${prefix}-item-title`)}>{item.title}</div>\n                </div>\n            ))}\n        </div>\n    )\n}\nconst Tip = (props) => {\n    const {show} = props;\n\n    if (show) {\n        return (\n            <ItemWrap content={<Content />}>\n                <img title=\"操作提示\" src={tipPng} alt=\"\" style={{width: '50%', height: '50%'}}/>\n            </ItemWrap>\n        )\n    }\n\n    return <></>\n}\n\nexport default Tip;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,IAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,UAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,WAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAoC,SAAAD,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAEpC,IAAME,MAAM,GAAG,kBAAkB;AAEjC,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAClB,IAAMC,IAAI,GAAG,CACT;IAACC,GAAG,EAAEC,qBAAS;IAAEC,IAAI,EAAE,IAAI;IAAEC,KAAK,EAAE;EAAY,CAAC,EACjD;IAACH,GAAG,EAAEI,gBAAI;IAAEF,IAAI,EAAE,MAAM;IAAEC,KAAK,EAAE;EAAM,CAAC,EACxC;IAACH,GAAG,EAAEK,iBAAK;IAAEH,IAAI,EAAE,MAAM;IAAEC,KAAK,EAAE;EAAM,CAAC,CAC5C;EACD,oBACIjB,MAAA,YAAAoB,aAAA;IAAKC,SAAS,EAAE,IAAAC,sBAAU,EAACX,MAAM;EAAE,gBAC/BX,MAAA,YAAAoB,aAAA;IAAKC,SAAS,EAAE,IAAAC,sBAAU,KAAAC,MAAA,CAAIZ,MAAM,WAAQ;EAAE,GAAC,0BAAS,CAAC,EACxDE,IAAI,CAACW,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;IAAA,oBAClB1B,MAAA,YAAAoB,aAAA;MACIC,SAAS,EAAE,IAAAC,sBAAU,KAAAC,MAAA,CAAIZ,MAAM,UAAO,CAAE;MACxCgB,GAAG,EAAED;IAAM,gBAEX1B,MAAA,YAAAoB,aAAA,2BACIpB,MAAA,YAAAoB,aAAA;MAAKQ,GAAG,EAAEH,IAAI,CAACX,GAAI;MAACe,GAAG,EAAC;IAAE,CAAC,CAAC,eAC5B7B,MAAA,YAAAoB,aAAA;MAAMC,SAAS,EAAE,IAAAC,sBAAU,KAAAC,MAAA,CAAIZ,MAAM,eAAY;IAAE,GAAEc,IAAI,CAACT,IAAW,CACpE,CAAC,eAENhB,MAAA,YAAAoB,aAAA;MAAKC,SAAS,EAAE,IAAAC,sBAAU,KAAAC,MAAA,CAAIZ,MAAM,gBAAa;IAAE,GAAEc,IAAI,CAACR,KAAW,CACpE,CAAC;EAAA,CACT,CACA,CAAC;AAEd,CAAC;AACD,IAAMa,GAAG,GAAG,SAANA,GAAGA,CAAIC,KAAK,EAAK;EACnB,IAAOC,IAAI,GAAID,KAAK,CAAbC,IAAI;EAEX,IAAIA,IAAI,EAAE;IACN,oBACIhC,MAAA,YAAAoB,aAAA,CAACjB,SAAA,WAAQ;MAAC8B,OAAO,eAAEjC,MAAA,YAAAoB,aAAA,CAACR,OAAO,MAAE;IAAE,gBAC3BZ,MAAA,YAAAoB,aAAA;MAAKH,KAAK,EAAC,0BAAM;MAACW,GAAG,EAAEM,eAAO;MAACL,GAAG,EAAC,EAAE;MAACM,KAAK,EAAE;QAACC,KAAK,EAAE,KAAK;QAAEC,MAAM,EAAE;MAAK;IAAE,CAAC,CACtE,CAAC;EAEnB;EAEA,oBAAOrC,MAAA,YAAAoB,aAAA,CAAApB,MAAA,YAAAsC,QAAA,MAAI,CAAC;AAChB,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,cAEcV,GAAG","ignoreList":[]}