qd-changjing/plotting/plottingPanel/PlotPanel.js

/**
 * @Author: tiansiyuan
 * @Date: 2020/7/16 13:12:56
 * @LastEditors: tiansiyuan
 * @LastEditTime: 2020/7/24 14:58:19
 * @Description: 标绘面板相关方法
 */

/**
 * 获取标绘面板树形数据
 * @param plottingUrl 标绘服务地址
 * @param callback
 */
function getPlotTreeData(plottingUrl, callback) {
  // 此处使用定时器，把事件变成异步，等到标绘初始化完成后，在下一轮事件循环执行
  setTimeout(()=>{
    const symbolLibManager = L.supermap.plotting.symbolLibManager(plottingUrl);
    let plotTreeData = null;
    if (symbolLibManager.isInitializeOK()) {
      plotTreeData = analysisSymbolTree(symbolLibManager);
      callback(plotTreeData);
    } else {
      symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, function (result) {
        if (result.libIDs.length !== 0) {
          plotTreeData = analysisSymbolTree(symbolLibManager);
          callback(plotTreeData);
        }
      });
      symbolLibManager.initializeAsync();
    }
  },998);
}

function createDrawNodes(treeNode, drawControl, plottingUrl) {
  const drawNodeClick = function() {
    if (drawControl !== null) {
      drawControl.handler.libID = this.libID;
      drawControl.handler.code = this.symbolCode;
      drawControl.handler.serverUrl = this.serverUrl;

      drawControl.handler.disable();
      drawControl.handler.enable();
    }
  };

  const drawData = treeNode.drawData;

  const table = document.createElement('table');
  table.style.height = '100%';
  table.style.width = '100%';
  let i = 0;
  const rowLength = (drawData.length % 3 === 0) ? drawData.length / 3 : drawData.length / 3 + 1;
  for (let j = 0; j < rowLength; j++) {
    const tr = document.createElement('tr');
    for (let k = 0; k < 3; k++) {
      if (drawData[i]) {
        //存储菜单信息
        const td = document.createElement('td');
        const drawNode = document.createElement('div');
        drawNode.onclick = drawNodeClick;
        drawNode.style.textAlign = 'center';
        drawNode.id = drawData[i].libID + '' + drawData[i].symbolCode;
        drawNode.libID = drawData[i].libID;
        drawNode.symbolCode = drawData[i].symbolCode;
        drawNode.serverUrl = plottingUrl;
        //图片
        const img = document.createElement('img');
        img.src = drawData[i].icon;
        //文本
        const text = document.createElement('div');
        text.innerHTML = drawData[i].symbolName;

        drawNode.appendChild(img);
        drawNode.appendChild(text);
        td.appendChild(drawNode);

        tr.appendChild(td);
      }
      i++;
    }
    table.appendChild(tr);
  }

  const iconNode = document.getElementById('plotting-board-right');
  iconNode.innerHTML = '';
  iconNode.appendChild(table);
}

/**
 * 解析符号树的数据
 * @param symbolLibManager 标号库管理对象
 * @returns {Array}
 */
function analysisSymbolTree(symbolLibManager) {
  let treeData = [];
  addBasicCellTreeNodes(treeData);
  // addRouteTreeNodes(treeData);
  addSymbolLibNodes(treeData, symbolLibManager);
  return treeData;
}

/**
 * 添加基本标号数据
 * @param treeData
 */
function addBasicCellTreeNodes(treeData) {
  let cellRootNode = {
    id: 1,
    pId: 0,
    label: '基本标号',
    fullName: 'BasicCell/',
  };
  treeData.push(cellRootNode);

  const symbolCode = [24, 28, 29, 31, 34, 410, 32, 590, 360, 390, 400, 350, 26, 370, 380, 44, 48, 320,
    1019, 1022, 1024, 321, 1023, 1025,
    1013, 1014, 1016, 1017, 1026,
    1001, 1003, 1028];
  const symbolName = ['折线', '平行四边形', '圆', '椭圆', '注记', '正多边形', '多边形', '贝赛尔曲线', '闭合贝赛尔曲线',
    '集结地', '大括号', '梯形', '矩形', '弓形', '扇形', '弧线', '平行线', '注记指示框',
    '同心圆', '组合圆', '标注框', '多角标注框', '自由线', '节点链',
    '跑道形', '八字形', '箭头线', '沿线注记', '线型标注',
    '对象间连线', '多边形区域', '铁丝网'];

  cellRootNode.drawData = symbolCode.map((code, index) => {
    return {
      id: index + 2,
      pid: 0,
      icon: `../plotting/img/plottingPanel/${cellRootNode.fullName}${code}.png`,
      symbolCode: code,
      libID: 0,
      symbolName: symbolName[index],
    };
  });
}

/**
 * 添加航线标号数据
 */
function addRouteTreeNodes(treeData) {
  let cellRootNode = {
    id: 2,
    pId: 0,
    label: '航线对象',
  };
  treeData.push(cellRootNode);

  const symbolCode = [1005, 1006, 1007];
  const symbolName = ['航线1', '航线2', '航线3'];

  cellRootNode.drawData = symbolCode.map((code, index) => {
    return {
      id: index + 2,
      pid: 0,
      icon: `../plotting/img/plottingPanel/BasicCell/RouteIcon/${code}.png`,
      symbolCode: code,
      libID: 0,
      symbolName:symbolName[index],
    };
  });
}

/**
 * 添加iServer标号库的标号
 */
function addSymbolLibNodes(treeData, symbolLibManager) {
  for (let i = 0; i < symbolLibManager.getSymbolLibNumber(); i++) {
    const symbolLib = symbolLibManager.getSymbolLibByIndex(i);
    const rootSymbolInfo = symbolLib.getRootSymbolInfo();
    const rootSymbolIconUrl = symbolLib.getRootSymbolIconUrl();

    if (rootSymbolInfo.symbolNodeType === 'SYMBOL_GROUP') {
      let rootNode = {
        id: i + 3,
        pId: 0,
        label: rootSymbolInfo.symbolName,
        fullName: `${rootSymbolInfo.symbolName}/`,
        children: [],
      };

      innerAnalysisSymbolTree(rootSymbolInfo.childNodes, rootNode, rootSymbolIconUrl);
      treeData.push(rootNode);
    }
  }
}

/**
 * 循环添加子节点
 * @param childSymbolInfos
 * @param parentNode
 * @param rootSymbolIconUrl
 * @returns {*}
 */
function innerAnalysisSymbolTree(childSymbolInfos, parentNode, rootSymbolIconUrl) {
  let drawData = [];
  let treeNodeId = parentNode.id + 1;
  childSymbolInfos.forEach(childSymbolInfo => {
    if (childSymbolInfo.symbolNodeType === 'SYMBOL_GROUP') {
      const node = {
        id: treeNodeId++,
        pId: parentNode.id,
        label: childSymbolInfo.symbolName,
        fullName: `${parentNode.fullName}${childSymbolInfo.symbolName}/`,
        children: [],
      };
      parentNode.children.push(node);
      innerAnalysisSymbolTree(childSymbolInfo.childNodes, node, rootSymbolIconUrl);
    } else if (childSymbolInfo.symbolNodeType === 'SYMBOL_NODE') {
      const drawNode = {
        id: treeNodeId++,
        pId: parentNode.id,
        icon: `/src/assets/common/multiScreen/normal/plotting-symbol/${parentNode.fullName}${childSymbolInfo.symbolCode}.png`,
        symbolCode: childSymbolInfo.symbolCode,
        libID: childSymbolInfo.libID,
        symbolName: childSymbolInfo.symbolName.toString(),
      };
      drawData.push(drawNode);
    }
  });

  if (drawData.length !== 0) {
    parentNode.drawData = drawData;
  }
}

/**
 * 判断一个标号是点标号还是线面标号
 */
function judgeSymbolType({ symbolType }) {
  switch (symbolType) {
    case 2:
    case 1001:
    case 1028:
      return 'algoSymbol'; // 线面标号
    case 1005:
      return 'KJRoute'; // 空军航线
    case 1006:
      return 'HJRoute'; // 海军航线
    case 1007:
      return 'DDRoute'; // 导弹航线
    default:
      return 'dotSymbol'; // 点标号
  }
}

/**
 * 生成36位uuid
 * @returns {string}
 */
function generate36UUID() {
  const s = [];
  const hexDigits = "0123456789abcdef";
  for (let i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "-";
  return s.join("");
}

export { getPlotTreeData, createDrawNodes, judgeSymbolType, generate36UUID };