/** * @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 };