312 lines
7.9 KiB
Vue
312 lines
7.9 KiB
Vue
/**
|
|
* @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 }
|