hi-ucs/front/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(() => {
    // eslint-disable-next-line no-undef
    const symbolLibManager = L.supermap.plotting.symbolLibManager(plottingUrl)
    let plotTreeData = null
    if (symbolLibManager.isInitializeOK()) {
      plotTreeData = analysisSymbolTree(symbolLibManager)
      callback(plotTreeData)
    } else {
      symbolLibManager.on(
        // eslint-disable-next-line no-undef
        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],
    }
  })
}

/**
 * 添加航线标号数据
 */
// eslint-disable-next-line no-unused-vars
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 }