@uni-sw/u-design 2.0.4

package/es/components/UMap/map/components/PointDraw/PointStyle.js

@@ -0,0 +1,163 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+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 _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; }
+/**
+ * @Description 点位样式
+ * @author L08472
+ * @time 2022-06-02
+ */
+import React from 'react';
+var measureCanvas = document.createElement('canvas');
+var measureDict = {};
+/**
+ * @method 获取点位可显示的宽度
+ * @param name 名称
+ * @param maxWidth 最大宽度
+ * @return 显示的字符
+ */
+export var _getWidth = function _getWidth(name) {
+  var maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var ctx = measureCanvas.getContext('2d');
+  ctx.font = 'normal 14px sans-serif';
+  var ellipsis = '...';
+  var ellipsisWidth = ctx.measureText(ellipsis).width;
+  // 整个 name 不超长，直接返回
+  var fullWidth = ctx.measureText(name).width;
+  if (fullWidth <= maxWidth) {
+    return {
+      width: Math.ceil(fullWidth),
+      label: name
+    };
+  }
+  // 超长：从前往后累加字符，保证“当前子串 + ...” 不超过 maxWidth
+  var words = '';
+  var curWidth = 0;
+  var _iterator = _createForOfIteratorHelper(name),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var ch = _step.value;
+      var chWidth = measureDict[ch] ? measureDict[ch] : ctx.measureText(ch).width;
+      measureDict[ch] = chWidth;
+      // 如果再加这个字符，就会使 “当前 + ...” 超过 maxWidth，就停
+      if (curWidth + chWidth + ellipsisWidth > maxWidth) {
+        break;
+      }
+      words += ch;
+      curWidth += chWidth;
+    }
+    // 如果一个字符都放不下，那就直接用 "..."（极端情况）
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (words === '') {
+    words = ellipsis;
+    curWidth = ellipsisWidth;
+  } else {
+    words += ellipsis;
+    curWidth += ellipsisWidth;
+  }
+  return {
+    width: Math.ceil(curWidth),
+    label: words
+  };
+};
+//#region dom样式 最外层的div都需要加id id格式：DOM_POINT_PRE+deviceCode+instanceKey
+// dom点前缀
+export var POINT_DOM_PRE = 'mapPoint_';
+/**
+ * @method dom样式
+ * @param {String}
+ */
+export var domStyle1 = function domStyle1(point, devImg, clickEvent, contextMenu, dbcEvent, alwaysShowName) {
+  var instanceKey = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
+  var name = point.name,
+    deviceCode = point.deviceCode;
+  var dom = /*#__PURE__*/React.createElement("div", {
+    className: alwaysShowName ? 'pd-map-point-show' : 'pd-map-point-showHover',
+    onClick: clickEvent,
+    onContextMenu: contextMenu,
+    id: POINT_DOM_PRE + deviceCode + instanceKey,
+    onDoubleClick: dbcEvent,
+    hasPop: "false"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pd-map-point-show-mask"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: devImg,
+    alt: "devImg",
+    style: {
+      transform: "rotate(".concat(point.rotationAngle, "deg)")
+    },
+    className: "pd-map-point-show-img"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pd-map-point-show-name point-name-box",
+    title: name
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: "pd-map-point-show-arrow"
+  }));
+  return dom;
+};
+//#endregion
+//#region canvas样式
+/**
+ * @method 标记样式1 canvas：白底黑字带小箭头
+ * @param {String}
+ */
+export var pointBycanvas1 = function pointBycanvas1(name) {
+  var isFix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var cas = document.createElement('canvas');
+  cas.title = name;
+  var ctx = cas.getContext('2d');
+  ctx.font = 'normal 14px sans-serif';
+  var tran = {
+    with: 10,
+    height: 10
+  }; // 三角形宽高10（保持不变）
+  var width = ctx.measureText(name).width;
+  var option = isFix ? {
+    width: width,
+    label: name
+  } : _getWidth(name, 100);
+  var rect1 = {
+    with: 200,
+    height: 34,
+    padding: 5
+  }; // 矩形宽200 高34 padding值5
+  rect1.with = option.width + rect1.padding * 2;
+  var pad = 4;
+  cas.width = rect1.with + pad * 2;
+  cas.height = rect1.height + tran.height + pad * 2;
+  var x0 = pad;
+  var y0 = pad;
+  // 白色矩形（不贴边）
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(x0, y0, rect1.with, rect1.height);
+  ctx.fillStyle = '#000000';
+  ctx.font = 'normal 14px sans-serif';
+  var m = ctx.measureText(option.label);
+  var textY = y0 + Math.round((rect1.height - (m.actualBoundingBoxAscent + m.actualBoundingBoxDescent)) / 2 + m.actualBoundingBoxAscent);
+  // x 坐标保持你的写法，只是加了整体偏移
+  ctx.fillText(option.label, x0 + rect1.padding, textY);
+  ctx.fillStyle = '#ffffff';
+  ctx.save();
+  ctx.beginPath();
+  var baseY = y0 + rect1.height - 1;
+  ctx.moveTo(x0 + rect1.padding, baseY);
+  ctx.lineTo(x0 + rect1.padding + tran.with, baseY);
+  ctx.lineTo(x0, baseY + tran.height);
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+  return cas;
+};
+export var POINT_NAME_ARROR_DIR = {
+  middle: 'middle',
+  left: 'left'
+};
+export var styleDescription = {
+  pointBycanvas1: {
+    arrowDirection: POINT_NAME_ARROR_DIR.left
+  }
+};

package/es/components/UMap/map/components/PointDraw/core.d.ts

@@ -0,0 +1,330 @@
+export type MutableKeys<T> = {
+    [K in keyof T]-?: T[K] extends Function ? never : K;
+}[keyof T];
+export declare const MAP_TYPE: {
+    readonly plane: 1;
+    readonly model: 2;
+    readonly gis: 3;
+    readonly scene: 4;
+    readonly stream: 5;
+};
+export type MAP_TYPE = typeof MAP_TYPE[keyof typeof MAP_TYPE];
+export declare const DRAW_TYPE: {
+    readonly useDom: "useDom";
+    readonly useLabel: "useLabel";
+    readonly useModel: "useModel";
+};
+export type DRAW_TYPE = typeof DRAW_TYPE[keyof typeof DRAW_TYPE];
+export declare const POINT_EVENT_TYPE: {
+    readonly leftClick: 1;
+    readonly rightClick: 2;
+    readonly dbClick: 3;
+};
+export type POINT_EVENT_TYPE = typeof POINT_EVENT_TYPE[keyof typeof POINT_EVENT_TYPE];
+/** 点位加载器类型
+ * @param cluster: 2d点位聚合
+ * @param full: 全量加载
+ * @param partial: 3d点位按需加载
+ * @param partialCluster: 3d点位按需加载 + 聚合
+ */
+export declare const POINT_LOAD_TYPE: {
+    readonly cluster: 0;
+    readonly full: 1;
+    readonly partial: 2;
+    readonly partialCluster: 3;
+};
+export type POINT_LOAD_TYPE = typeof POINT_LOAD_TYPE[keyof typeof POINT_LOAD_TYPE];
+export type ClusterInfo = {
+    /** 聚合类 */
+    clusterType?: string;
+    /** 可聚合的最大层级 */
+    clusterZoom: number;
+    /** 聚合半径 */
+    clusterRadius: number;
+    /** 聚合图标 */
+    clusterIcon: string;
+    /** 聚合图层id */
+    clusterLayerID: string;
+};
+export interface IFloorInfo {
+    msBid: string | null;
+    msFid: string | null;
+    mapOrigin: any;
+}
+export type Position = {
+    lng: number;
+    lat: number;
+    height: number;
+};
+export type PullBuilds = Record<string, {
+    floor: number;
+}>;
+export type ModelStatus = {
+    /** 聚焦的建筑物id */
+    focusBuildingId: string;
+    /** 聚焦的模型id */
+    focusModelId: string;
+    /** 显示的模型id */
+    showModelIds: string[];
+    /** 隐藏的模型id */
+    hiddenModelIds: string[];
+    /** 模型楼层信息 */
+    model2Floor: Record<string, {
+        visible: boolean;
+        floor: number;
+    }>;
+    /** 拉开模型楼层信息 */
+    pullModel2Floor: Record<string, {
+        visible: boolean;
+        floor: number;
+    }>;
+};
+export type StyleByDistance = {
+    scaleByDistance?: {
+        near: number;
+        nearValue: number;
+        far: number;
+        farValue: number;
+    };
+    disableDepthTestDistance?: number;
+};
+export interface IHideCondition {
+    key: keyof IPoint;
+    hideValues: any[];
+}
+export type IClusterPoint = {
+    cId: string;
+    points: IDrawPointData[];
+    position: {
+        lng: number;
+        lat: number;
+    };
+};
+export type UpdateMapDataParams = {
+    mapObj?: any;
+    mapType?: MAP_TYPE;
+    mapControl?: any;
+    clusterPanelEvent?: () => void;
+    alwaysShowName?: boolean;
+};
+export type DrawPointParams = {
+    /** 需要绘制的点位列表 */
+    pointList: IPoint[];
+    /** 绘制点位类型 */
+    useLabel: boolean;
+    /** 点位加载类型 */
+    pointLoadType?: POINT_LOAD_TYPE;
+    /** 点位加载类型传参 */
+    pointLoadTypeValue?: {
+        near: number;
+        far: number;
+    };
+    /** 是否重新绘制 */
+    isRedraw?: boolean;
+    /** 聚合信息 */
+    clusterInfo?: ClusterInfo[];
+    /** 点位点击事件 */
+    pointClick?: (event: {
+        pageX: number;
+        pageY: number;
+    }, point: IDrawPointData, cluster: boolean, type: POINT_EVENT_TYPE) => void;
+    /** 点位双击事件 */
+    pointDbc?: (event: {
+        pageX: number;
+        pageY: number;
+    }, point: IDrawPointData, cluster: boolean, type: POINT_EVENT_TYPE) => void;
+    /** 是否显示全名 */
+    fullFillOfName?: boolean;
+    /** label时候的near far */
+    styleByDistance?: StyleByDistance;
+};
+/** 传入点位基本信息 */
+export interface IPoint {
+    id: string;
+    name: string;
+    deviceCode: string;
+    devType: number;
+    devSubType: number;
+    deviceStatus: number;
+    coordinateX: number;
+    coordinateY: number;
+    coordinateZ: number;
+    rotationAngle: number;
+    pointAngle: string;
+    pointAngleObj: {
+        heading: number;
+        pitch: number;
+        roll: number;
+        nameHeight: number;
+    };
+    msBid: string | null;
+    msFid: string | null;
+    iconPath: string;
+    modelId: string;
+    highCamId?: string;
+    pointLayerId?: string;
+    style?: Record<string, any>;
+    /** 用于聚合 */
+    clusterType?: string;
+}
+type PointStaus<T = boolean> = {
+    draw: T;
+    label: T;
+};
+/** 绘制点位基本信息 */
+export interface IDrawPointData extends IPoint {
+    /** 点位id */
+    pId: string;
+    /** 传入点位信息 */
+    point: IPoint;
+    /** 绘制类型 */
+    pointDrawType: DRAW_TYPE;
+    /** 是否能够展示（受图层和模型隐藏控制） */
+    canShow: boolean;
+    /** 点位所在的图层 */
+    pointLayer: string;
+    /** 绘制点id */
+    drawId: string;
+    /** 绘制名称id */
+    labelId: string;
+    /** 是否为内置模型 */
+    innerModel?: boolean;
+    /** 绘制的图标id */
+    modelIconId?: string;
+    /** 是否已完成点位挂载 */
+    __mounted__: PointStaus;
+    /** 是否显示 */
+    __visible__: PointStaus;
+    /** 位置信息 */
+    __position__: PointStaus<Position>;
+}
+/** 外部绑定点位基本信息 */
+export interface IOutBindPoint {
+    layer: string;
+    id: string;
+    type: 'dom' | 'overlay' | 'model';
+    position: {
+        lng: number;
+        lat: number;
+        height: number;
+    };
+    modelId?: string;
+    visControlByModel?: boolean;
+    visControlCondition?: Record<string, any>;
+    callback?: (pos: any) => void;
+    /** 自己赋予 */
+    canShow: boolean;
+    __visible__: boolean;
+    __position__: Position;
+}
+export declare class PointStore {
+    private byPId;
+    private byDeviceCode;
+    private byDrawId;
+    private byModelId;
+    /**
+   * 添加已经绘制过的点
+   * @param drawPoint 绘制点数据
+   */
+    add(drawPoint: IDrawPointData): void;
+    /**
+   * 更新绘制点id（用于原来没有挂载的点，后面挂载了后）
+   * @param drawPoint 绘制点数据
+   */
+    updateDrawId(drawPoint: IDrawPointData): void;
+    /**
+   * 删除点
+   * @param pId
+   */
+    delete(pId: string): void;
+    /**
+   * 清空
+   */
+    clear(): void;
+    /**
+   * 根据pId获取点
+   * @param pId 点Id
+   */
+    getByPId(pId: string): IDrawPointData | undefined;
+    /**
+   * 根据设备编码获取点
+   * @param deviceCode  设备编码
+   */
+    getByDeviceCode(deviceCode: string): IDrawPointData | undefined;
+    /**
+   * 根据绘制Id获取点
+   * @param drawId 绘制Id
+   */
+    getByDrawId(drawId: string): IDrawPointData | undefined;
+    /** 获取所有的modelId */
+    getModelIds(): string[];
+    /**
+   * 获取指定modelId下的所有点
+   * @param includes 指定modelId
+   * @param isIncludes 是包含是排除，默认包含
+   */
+    getByModelId(modelIds?: string[], isIncludes?: boolean): IDrawPointData[];
+    /**
+   * 获取所有点
+   * @param drawed 是否仅包含已绘制的点，默认是所有点
+   */
+    getAll(drawed?: boolean): IDrawPointData[];
+    /**
+   * 对点进行批量操作
+   * @param changeFunc 改变函数
+   */
+    forEach(func: (rec: IDrawPointData) => void): void;
+    /**
+     * 判断是否为空
+     */
+    isEmpty(): boolean;
+}
+export declare class OutBindPointStore {
+    /** 外部绑定点位 */
+    private byId;
+    private byModelId;
+    /** 添加外部绑定点 */
+    add(outBindPoint: IOutBindPoint): void;
+    /** 删除外部绑定点 */
+    delete(id: string): void;
+    /** 清空 */
+    clear(): void;
+    /** 获取所有外部绑定点 */
+    getAll(): IOutBindPoint[];
+    /** 对外部绑定点进行批量操作 */
+    forEach(func: (rec: IOutBindPoint) => void): void;
+    /** 判断是否为空 */
+    isEmpty(): boolean;
+    /**
+   * 获取指定modelId下的所有点
+   * @param includes 指定modelId
+   * @param isIncludes 是包含是排除，默认包含
+   */
+    getByModelId(modelIds?: string[], isIncludes?: boolean): IOutBindPoint[];
+}
+export declare const emptyFun: () => void;
+/**
+ * 获取高度，如果传入高度，则用传入高度，否则用point高度
+ * @param point 点
+ * @param height 高度
+ */
+export declare function getPointPosition(point: {
+    coordinateX: number;
+    coordinateY: number;
+    coordinateZ?: number;
+}, height?: number): Position;
+/** 角度转弧度 */
+export declare const deg2rad: (angle?: number) => number;
+/**
+ * 缩写名字到固定长度
+ * @param str 字符串
+ * @param maxCn 最大中文长度
+ */
+export declare function getCharLengthName(str: string, maxCn?: number): string;
+/**
+ * 将传入的距离范围，返回一个距离到缩放层级的函数
+ * @param dNear 近距离
+ * @param dFar 远距离
+ */
+export declare function getDistance2Zoom(dNear: number, dFar: number): (distance: number, maxZoom: number) => number;
+export {};