@uni-sw/u-design 2.0.4

package/es/components/UMap/map/components/MapServerPointManage/Layers/Tollgate/TollgateMenu.js

@@ -0,0 +1,593 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import React, { Component } from 'react';
+import ToolTipForm from "../ToolTipForm";
+import { ToolTipType } from "../../Enum";
+import { changeMarkerSize, changeMarkerName } from "../../CommonFunc";
+import { getTollgateCamera, getTollgateVideo } from "../../RequestFunc";
+import { getOwnMenu, loadMarkerMenu } from "../../MarkerMenu/MarkerMenu";
+import message from "../../../../../../UMessageBox/message";
+import axios from 'axios';
+import { render } from "../../../../../../../globalFunc/render";
+//菜单图层id
+var menulayerId = 'tollgateMenuLayerId20200525';
+//hover提示图层id
+var tipLayerId = 'tollgateTipLayerId20200825';
+/**
+ * 卡口菜单渲染、提示渲染、重定位修改
+ */
+var TollgateMenu = /*#__PURE__*/function (_Component) {
+  function TollgateMenu(props) {
+    var _this;
+    _classCallCheck(this, TollgateMenu);
+    _this = _callSuper(this, TollgateMenu, [props]);
+    //#region 判断地图层级
+    /**
+     * 判断图层是否大于clusterZoom层级
+     */
+    _this._checkZoom = function () {
+      var _this$props = _this.props,
+        mapDom = _this$props.mapDom,
+        clusterZoom = _this$props.clusterZoom;
+      var zoom = mapDom.getZoom().Zoom;
+      if (zoom > clusterZoom) {
+        return true;
+      }
+      return false;
+    };
+    //#endregion
+    //#region 监听、移除事件
+    /**
+     * 监听图层事件
+     */
+    _this._listenLayer = function () {
+      var _this$props2 = _this.props,
+        mapDom = _this$props2.mapDom,
+        layers = _this$props2.layers,
+        markerDragEnable = _this$props2.markerDragEnable,
+        pointEvent = _this$props2.pointEvent;
+      Object.keys(layers).forEach(function (layerCode) {
+        mapDom.bindEventForLayer('leftClick', function (e) {
+          pointEvent && pointEvent('leftClick', 'tollgate', e, layerCode);
+        }, layerCode);
+        mapDom.bindEventForLayer('dbClick', function (e) {
+          pointEvent && pointEvent('dbClick', 'tollgate', e, layerCode);
+        }, layerCode);
+        mapDom.bindEventForLayer('rightClick', function (e) {
+          pointEvent && pointEvent('dbClick', 'tollgate', e, layerCode);
+          if (_this._checkZoom()) {
+            _this._showMapMenu(e);
+          }
+        }, layerCode);
+        mapDom.bindEventForLayer('moveOver', function (e) {
+          pointEvent && pointEvent('moveOver', 'tollgate', e, layerCode);
+          if (_this._checkZoom() && !_this.menuDisPlay) {
+            _this._showMapTip(e);
+          }
+        }, layerCode);
+        mapDom.bindEventForLayer('moveOut', function (e) {
+          pointEvent && pointEvent('moveOut', 'tollgate', e, layerCode);
+          if (_this._checkZoom()) {
+            _this._hideMapTip(e);
+          } else {
+            _this._setMapCursor('default');
+            _this._clearMapTip();
+            _this.mouseHover = false;
+          }
+        }, layerCode);
+        //只有允许拖移动点位时，才监听draggEnd事件
+        if (markerDragEnable) {
+          mapDom.bindEventForLayer('draggEnd', function (e) {
+            pointEvent && pointEvent('draggEnd', 'tollgate', e, layerCode);
+          }, layerCode);
+        }
+      });
+    };
+    /**
+     * 移除图层事件
+     */
+    _this._removeLayerEvent = function () {
+      var _this$props3 = _this.props,
+        mapDom = _this$props3.mapDom,
+        layers = _this$props3.layers,
+        markerDragEnable = _this$props3.markerDragEnable;
+      Object.keys(layers).forEach(function (layerCode) {
+        mapDom.offEventForLayer('rightClick', layerCode);
+        mapDom.offEventForLayer('moveOver', layerCode);
+        mapDom.offEventForLayer('moveOut', layerCode);
+        //清除允许拖移动点位时的拖拽事件
+        if (markerDragEnable) {
+          mapDom.offEventForLayer('draggEnd', layerCode);
+        }
+      });
+    };
+    /**
+     * 监听地图左键、右键事件
+     */
+    _this._listenMap = function () {
+      var mapDom = _this.props.mapDom;
+      var leftEvent = mapDom.bindEventForMap('leftClick', function () {
+        return _this._clearMapMenu();
+      });
+      if (leftEvent.ErrCode === 0) {
+        _this.mapLeftClick = leftEvent.Id;
+      }
+      var rightEvent = mapDom.bindEventForMap('rightClick', function () {
+        return _this._clearMapMenu();
+      });
+      if (rightEvent.ErrCode === 0) {
+        _this.mapRightClick = rightEvent.Id;
+      }
+    };
+    /**
+     * 移除地图左键、右键事件
+     */
+    _this._removeMapEvent = function () {
+      var mapDom = _this.props.mapDom;
+      if (_this.mapLeftClick) {
+        mapDom.removeEventForMap('leftClick', _this.mapLeftClick);
+      }
+      if (_this.mapRightClick) {
+        mapDom.removeEventForMap('rightClick', _this.mapRightClick);
+      }
+    };
+    //#endregion
+    //#region tips提示显隐
+    /***
+     * 设置地图鼠标样式
+     */
+    _this._setMapCursor = function (type) {
+      var _this$props4 = _this.props,
+        mapClassName = _this$props4.mapClassName,
+        markerDragEnable = _this$props4.markerDragEnable;
+      //点位不允许拖拽时  无需改变鼠标样式
+      if (!markerDragEnable) {
+        return;
+      }
+      //备注： 只有地图DOM节点的class为mapClassName时才生效
+      var a = document.getElementsByClassName(mapClassName)[0];
+      if (!!a) {
+        a.style.cursor = type;
+      }
+    };
+    /**
+     * 鼠标移入 显示tips提示
+     */
+    _this._showMapTip = function (data) {
+      var attr = data.attr;
+      var _this$props5 = _this.props,
+        toolTipMode = _this$props5.toolTipMode,
+        mapDom = _this$props5.mapDom;
+      _this._setMapCursor('grab');
+      if (attr && attr.coveringId.indexOf(':') > 0) {
+        if (_this.mouseHover) {
+          return;
+        }
+        _this.mouseHover = true; //避免二次触发
+        var marker = JSON.parse(attr.coveringId);
+        if (marker) {
+          _this._clearMapTip();
+          _this.currentMarker = marker;
+          if (toolTipMode === ToolTipType.HOVER) {
+            changeMarkerName(mapDom, attr.coveringId, attr.layerId, marker.MarkerName === '' ? marker.DeviceCode : marker.MarkerName);
+          }
+          //坐标
+          var coordinate = {
+            lng: marker.Lng,
+            lat: marker.Lat
+          };
+          //像素区域内点位密集时，避免出现多个tips提示
+          if (_this.tipOverlay) {
+            return;
+          }
+          //设置弹出框内容，可以HTML自定义
+          _this._createTips(coordinate);
+        }
+        changeMarkerSize(mapDom, attr.coveringId, attr.layerId, 1.1);
+      }
+    };
+    /**
+     * 加载tips到地图上
+     * @param {Object} coordinate 地图坐标
+     */
+    _this._createTips = function (coordinate) {
+      var _this$props6 = _this.props,
+        mapDom = _this$props6.mapDom,
+        hidePointNameTips = _this$props6.hidePointNameTips;
+      var res = mapDom.createBaseLayer({
+        name: tipLayerId,
+        id: tipLayerId
+      });
+      //图层已创建
+      if (res.ErrCode === 55218) {
+        _this.tipOverlay = tipLayerId;
+      } else if (res.ErrCode !== 0) {
+        return;
+      } else {
+        _this.tipOverlay = res.Id;
+      }
+      if (hidePointNameTips) {
+        return;
+      }
+      var tmp = _this._loadTipsDom();
+      mapDom.createDomPoint(tipLayerId, {
+        dom: tmp,
+        position: {
+          lng: coordinate.lng,
+          lat: coordinate.lat,
+          height: 0
+        },
+        align: 'right',
+        top: 10
+      });
+    };
+    /**
+     * 创建tips提示的DOM
+     */
+    _this._loadTipsDom = function () {
+      var element = document.createElement('div');
+      render(/*#__PURE__*/React.createElement(ToolTipForm, {
+        name: _this.currentMarker.MarkerName,
+        markerDragEnable: _this.props.markerDragEnable,
+        textLocale: _this.props.textLocale
+      }), element);
+      return element;
+    };
+    /**
+     * 鼠标移出 隐藏tips提示
+     */
+    _this._hideMapTip = function (data) {
+      var attr = data.attr;
+      var _this$props7 = _this.props,
+        toolTipMode = _this$props7.toolTipMode,
+        mapDom = _this$props7.mapDom;
+      _this._setMapCursor('default');
+      if (attr && attr.coveringId.indexOf(':') > 0) {
+        _this.mouseHover = false; //避免二次触发
+        if (toolTipMode === ToolTipType.HOVER) {
+          changeMarkerName(mapDom, attr.coveringId, attr.layerId, '');
+        }
+        var marker = JSON.parse(attr.coveringId);
+        if (marker) {
+          _this._clearMapTip();
+        }
+        changeMarkerSize(mapDom, attr.coveringId, attr.layerId, 1.0);
+      }
+    };
+    /**
+     * 移除tips
+     */
+    _this._clearMapTip = function () {
+      if (_this.tipOverlay) {
+        var mapDom = _this.props.mapDom;
+        mapDom.delBaseLayerById(tipLayerId);
+        _this.tipOverlay = null;
+      }
+    };
+    //#endregion
+    //#region 菜单显隐
+    /**
+     * 相机图层点击 展示菜单
+     */
+    _this._showMapMenu = function (e) {
+      var showMenuKeys = _this.props.showMenuKeys;
+      if (!showMenuKeys || showMenuKeys.length < 1) {
+        return;
+      }
+      if (e && e.attr && e.attr.coveringId) {
+        var marker = JSON.parse(e.attr.coveringId);
+        if (marker) {
+          _this._clearMapMenu();
+          _this.currentMarker = marker;
+          //坐标
+          var coordinate = e.coords;
+          //像素区域内点位密集时，避免出现多个右键菜单
+          if (_this.overlay) {
+            return;
+          }
+          _this.menuDisPlay = true;
+          _this._createMenu(coordinate, e.position);
+        }
+      }
+    };
+    /**
+     * 加载右键菜单到地图上
+     * @param {Object} coordinate 地图坐标
+     */
+    _this._createMenu = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(coordinate, MousePosition) {
+        var mapDom, res, tmp;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              mapDom = _this.props.mapDom;
+              res = mapDom.createBaseLayer({
+                name: menulayerId,
+                id: menulayerId
+              }); //图层已创建
+              if (!(res.ErrCode === 55218)) {
+                _context.n = 1;
+                break;
+              }
+              _this.overlay = menulayerId;
+              _context.n = 3;
+              break;
+            case 1:
+              if (!(res.ErrCode !== 0)) {
+                _context.n = 2;
+                break;
+              }
+              return _context.a(2);
+            case 2:
+              _this.overlay = res.Id;
+            case 3:
+              _context.n = 4;
+              return _this._loadMenuDom(MousePosition);
+            case 4:
+              tmp = _context.v;
+              mapDom.createDomPoint(menulayerId, {
+                dom: tmp,
+                position: {
+                  lng: coordinate.lng,
+                  lat: coordinate.lat,
+                  height: 0
+                },
+                align: 'left',
+                top: 10
+              });
+            case 5:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    /**
+     * 创建菜单DOM
+     */
+    _this._loadMenuDom = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(MousePosition) {
+        var showMenuKeys, element, menuList, tollgateMenu, top;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              showMenuKeys = _this.props.showMenuKeys;
+              element = document.createElement('div');
+              menuList = getOwnMenu(showMenuKeys, _this.currentMarker);
+              _context2.n = 1;
+              return _this._loadTollgateMenu(menuList);
+            case 1:
+              tollgateMenu = _context2.v;
+              top = _this.getMenuPosition(tollgateMenu, MousePosition);
+              render(/*#__PURE__*/React.createElement(React.Fragment, null, loadMarkerMenu(tollgateMenu, null, _this._righClickMenu, true, top)), element);
+              return _context2.a(2, element);
+          }
+        }, _callee2);
+      }));
+      return function (_x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    /**
+     * 根据是否需要展示卡口启动菜单  构建启动的菜单项
+     */
+    _this._loadTollgateMenu = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(tollgateMenu) {
+        var _this$props8, showMenuKeys, textLocale, cameraList, timeFunc;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              _this$props8 = _this.props, showMenuKeys = _this$props8.showMenuKeys, textLocale = _this$props8.textLocale; //如果展示  卡口启动菜单  则查询卡口启动的相机列表信息
+              if (!(showMenuKeys.indexOf('RIGHT_CLICK_TOLLGATE_START') >= 0)) {
+                _context3.n = 2;
+                break;
+              }
+              _context3.n = 1;
+              return _this._getTollgateCamera();
+            case 1:
+              cameraList = _context3.v;
+              if (0 === cameraList.length) {
+                tollgateMenu = tollgateMenu.filter(function (item) {
+                  return item.key !== 'RIGHT_CLICK_TOLLGATE_START';
+                });
+              } else {
+                tollgateMenu.forEach(function (item) {
+                  if (item.key === 'RIGHT_CLICK_TOLLGATE_START') {
+                    var _cameraList = _this.state.tollgateDeviceList.map(function (item) {
+                      return {
+                        key: item.CameraCode,
+                        label: item.CameraName,
+                        showTitle: true
+                      };
+                    });
+                    item.child = [{
+                      key: 'chooseCamera',
+                      label: textLocale.tollgateChooseTips || '请选择相机/摄像机',
+                      noClick: true
+                    }].concat(_toConsumableArray(_cameraList));
+                  }
+                });
+              }
+            case 2:
+              //菜单不存在后  清除菜单
+              if (0 === tollgateMenu.length) {
+                timeFunc = setTimeout(function () {
+                  _this._clearMapMenu();
+                  clearTimeout(timeFunc);
+                }, 0);
+              }
+              return _context3.a(2, tollgateMenu);
+          }
+        }, _callee3);
+      }));
+      return function (_x4) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    /**
+     * 获取右键菜单的位置
+     */
+    _this.getMenuPosition = function (menuList, MousePosition) {
+      var mapGuid = _this.props.mapGuid;
+      var mapEle = document.getElementById(mapGuid);
+      var mapPosition = mapEle.getBoundingClientRect();
+      var menuHeight = menuList.length * 34;
+      var top = null;
+      if (menuHeight + MousePosition.y > mapPosition.height) {
+        top = mapPosition.height - menuHeight - MousePosition.y;
+      }
+      return top + 'px';
+    };
+    /**
+     * 获取卡口相机信息
+     */
+    _this._getTollgateCamera = function () {
+      return new Promise(function (resolve) {
+        var _this$currentMarker = _this.currentMarker,
+          MarkerCode = _this$currentMarker.MarkerCode,
+          DeviceCode = _this$currentMarker.DeviceCode;
+        //卡口摄像机
+        var videoMarker = [];
+        //卡口相机
+        var cameraMarker = [];
+        var request = [getTollgateVideo(DeviceCode || MarkerCode, function (data) {
+          return videoMarker = data;
+        }), getTollgateCamera(DeviceCode || MarkerCode, function (data) {
+          return cameraMarker = data;
+        })];
+        axios.all(request).then(axios.spread(function () {
+          if (Array.isArray(cameraMarker) && Array.isArray(videoMarker)) {
+            var isCamera = false;
+            if (cameraMarker.length === 0 && videoMarker.length === 0) {
+              message.destroy();
+              var textLocale = _this.props.textLocale;
+              message.info(textLocale.tollegateNoCam || '该卡口未绑定任何摄像机或相机');
+              resolve([]);
+              return;
+            }
+            if (cameraMarker.length !== 0 && videoMarker.length === 0) {
+              isCamera = true;
+            }
+            _this.setState({
+              tollgateDeviceList: isCamera ? cameraMarker : videoMarker,
+              isCamera: isCamera
+            }, function () {
+              resolve(_this.state.tollgateDeviceList);
+            });
+          } else {
+            resolve([]);
+          }
+        })).catch(function () {
+          resolve([]);
+        });
+      });
+    };
+    /**
+     * 右键菜单事件触发
+     * @param {String} menuKey     一层菜单key
+     * @param {Object} markerInfo  点位信息
+     * @param {String} childKey    二层菜单key
+     */
+    _this._righClickMenu = function (menuKey, markerInfo, childKey) {
+      var menuClick = _this.props.menuClick;
+      var clickMenuInfo = {
+        menuKey: menuKey,
+        markerInfo: _this.currentMarker,
+        childKey: childKey,
+        type: 'tollgate',
+        deviceList: _this.state.tollgateDeviceList,
+        isCamera: _this.state.isCamera
+      };
+      if (menuClick && typeof menuClick === 'function') {
+        menuClick(clickMenuInfo);
+      }
+      _this._clearMapMenu();
+    };
+    /**
+     * 移除菜单
+     */
+    _this._clearMapMenu = function () {
+      if (_this.overlay) {
+        var mapDom = _this.props.mapDom;
+        mapDom.delBaseLayerById(menulayerId);
+        _this.overlay = null;
+      }
+      _this.menuDisPlay = false;
+    };
+    _this.state = {
+      clickMenuInfo: null,
+      //菜单点击操作信息
+      isCamera: false,
+      //设备是否为相机
+      tollgateDeviceList: [] //卡口设备数组
+    };
+    _this.overlay = null; //右键菜单图层
+    _this.tipOverlay = null; //tip图层
+    _this.currentMarker = null; //当前右键的marker
+    _this.mouseHover = false; //已有鼠标悬浮的元素  避免二次触发
+    _this.menuDisPlay = false; //有菜单打开
+    //地图左键事件ID
+    _this.mapLeftClick = null;
+    //地图右键事件ID
+    _this.mapRightClick = null;
+    return _this;
+  }
+  _inherits(TollgateMenu, _Component);
+  return _createClass(TollgateMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props9 = this.props,
+        mapDom = _this$props9.mapDom,
+        layers = _this$props9.layers;
+      if (!mapDom || !layers) {
+        return;
+      }
+      this._listenLayer();
+      this._listenMap();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props0 = this.props,
+        mapDom = _this$props0.mapDom,
+        layers = _this$props0.layers;
+      if (!mapDom || !layers) {
+        return;
+      }
+      this._removeLayerEvent();
+      this._removeMapEvent();
+    }
+  }, {
+    key: "render",
+    value:
+    //#endregion
+
+    function render() {
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+  }]);
+}(Component);
+export { TollgateMenu as default };

package/es/components/UMap/map/components/MapServerPointManage/Layers/ToolTipForm.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import "./ToolTipInfo.less";
+
+/**
+ * 点位信息提示窗口
+ * @param {*} props
+ */
+export default function ToolTipForm(_ref) {
+  var name = _ref.name,
+    markerDragEnable = _ref.markerDragEnable,
+    textLocale = _ref.textLocale;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tipInfo-root"
+  }, /*#__PURE__*/React.createElement("span", null, textLocale.pointNameTip, name), markerDragEnable && /*#__PURE__*/React.createElement("p", null, "(", textLocale.moveIconTip, ")"));
+}

package/es/components/UMap/map/components/MapServerPointManage/Layers/ToolTipInfo.less

@@ -0,0 +1,19 @@
+@import '../../../../../../style/global.less';
+.tipInfo-root {
+  position: relative;
+  width: auto;
+  max-width: 400px;
+  height: auto;
+  padding: 10px;
+  background: #333333a2;
+  color: @u-text-color-white;
+  font-size: 14px;
+  top: 16px;
+  transform: translate(16px, 100%);
+  span {
+    word-break: break-all;
+  }
+  p {
+    margin: 5px 0 0;
+  }
+}