基础标绘

This commit is contained in:
zyl
2025-11-04 20:11:04 +08:00
parent 9cbcbed6f5
commit 4a441f3e04
12 changed files with 200 additions and 100 deletions

View File

@ -34,7 +34,8 @@ export default {
addXlsx: '添加作战数据', addXlsx: '添加作战数据',
showAttr: '查看属性', showAttr: '查看属性',
importHeader: '导入表头', importHeader: '导入表头',
resetPerspective: '重置透视' resetPerspective: '重置透视',
addEvent: '添加态势事件',
}, },
iconTitle: { iconTitle: {
reset: '默认视角', reset: '默认视角',

View File

@ -34,6 +34,8 @@ export default {
showAttr: 'show Attribute', showAttr: 'show Attribute',
importHeader: 'import Header', importHeader: 'import Header',
resetPerspective: 'reset Perspective', resetPerspective: 'reset Perspective',
addEvent: 'add Event',
}, },
iconTitle: { iconTitle: {
reset: 'default view', reset: 'default view',

View File

@ -34,6 +34,7 @@ export default {
showAttr: '查看屬性', showAttr: '查看屬性',
importHeader: '導入表头', importHeader: '導入表头',
resetPerspective: '重置透視', resetPerspective: '重置透視',
addEvent: '添加態勢事件',
}, },
iconTitle: { iconTitle: {
reset: '默認視角', reset: '默認視角',

View File

@ -35,10 +35,16 @@ const treeObj = ref() //树形的实例
let zNodes: any = ref([])//树形结构数据 let zNodes: any = ref([])//树形结构数据
let nodes: any = ref([])//选中的node节点 let nodes: any = ref([])//选中的node节点
let input2 = ref('') let input2 = ref('')
onMounted(() => {
let formData = new FormData() let formData = new FormData()
// let data = []
formData.append('id', window["planId"]) formData.append('id', window["planId"])
onMounted(() => {
// let data = []
})
const initTreeCallBack = () => {
TsApi.queryTsSource(formData).then(async res => { TsApi.queryTsSource(formData).then(async res => {
console.log('queryTsSource', res) console.log('queryTsSource', res)
if (res.code == 200) { if (res.code == 200) {
@ -47,14 +53,11 @@ onMounted(() => {
} }
zNodes.value = res.data zNodes.value = res.data
console.log("data", zNodes.value) console.log("data", zNodes.value)
treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value) treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value)
window.treeObj = treeObj.value window.treeObj = treeObj.value
} }
})
}) console.log("initTreeCallBack++++++++++++++++++++", zNodes.value)
const initTreeCallBack = () => {
let arr = zNodes.value let arr = zNodes.value
let layerTypes = [ let layerTypes = [
"arcgisWximagery", "arcgisWximagery",
@ -98,6 +101,7 @@ const initTreeCallBack = () => {
// initMapData(layers[i].sourceType, layers[i].detail, null) // initMapData(layers[i].sourceType, layers[i].detail, null)
} }
} }
})
} }
const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => { const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
let entityObject let entityObject

View File

@ -7,7 +7,7 @@
<div <div
v-for="item in menus" v-for="item in menus"
class="itemBox" class="itemBox"
@click="itemClick(item, eventBus)" @click="itemClicks(item)"
> >
<div class="itemIcon"> <div class="itemIcon">
<svg-icon :name="item.key" :size="14"></svg-icon> <svg-icon :name="item.key" :size="14"></svg-icon>
@ -37,6 +37,10 @@ const {rightMenus} = useRightOperate()
const menus: any = ref([]) //右侧菜单 const menus: any = ref([]) //右侧菜单
const rightClickTreeNode: any = ref() const rightClickTreeNode: any = ref()
const {itemClick} = useRightMenu() const {itemClick} = useRightMenu()
const eventBus: any = inject('bus')
const itemClicks = (item) => {
itemClick(item, eventBus)
}
const initMenus = (arr: any, treeNode: any) => { const initMenus = (arr: any, treeNode: any) => {
let rightMenu: any = [] let rightMenu: any = []
console.log('rightMenu2222', rightMenu) console.log('rightMenu2222', rightMenu)

View File

@ -1,5 +1,6 @@
import {$changeComponentPop} from "../../../utils/communication"; import {$changeComponentPop} from "../../../utils/communication";
export const useRightOperate = () => { export const useRightOperate = () => {
const addDirectory = () => { const addDirectory = () => {
$changeComponentPop('.adddirectoryBox', true) $changeComponentPop('.adddirectoryBox', true)
@ -8,8 +9,8 @@ export const useRightOperate = () => {
const addResource = () => { const addResource = () => {
console.log("addResource") console.log("addResource")
} }
const addEvent = () => { const addEvent = (eventBus) => {
$(".newEvent")[0].style.display = "block" eventBus.emit('openAddEvent', true)
} }
const rightMenus: any = reactive({ const rightMenus: any = reactive({
addDirectory: { addDirectory: {

View File

@ -64,7 +64,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
const add = throttle(async () => { const add = throttle(async () => {
let parentId = getKeyOfSelectedNode(window.treeObj, 'id') let parentId = getKeyOfSelectedNode(window.treeObj, 'id')
let fnone = getSelectedNode(window.treeObj) let fnone = getSelectedNode(window.treeObj)
addMapSource({id: new YJ.Tools().randomString(), type: 'directory', pId: parentId}, res => { addMapSource('directory', parentId, {id: new YJ.Tools().randomString(), name: form.sourceName,}, res => {
if (res.code == 0 || res.code == 200) { if (res.code == 0 || res.code == 200) {
ElMessage({ ElMessage({
message: '添加成功', message: '添加成功',
@ -135,7 +135,7 @@ const add = throttle(async () => {
// } // }
const cancel = () => { const cancel = () => {
$changeComponentPop('.adddirectory', false) $changeComponentPop('.tsdirectory', false)
form.sourceName = '图层' form.sourceName = '图层'
ruleForm.value?.resetFields() ruleForm.value?.resetFields()
} }

View File

@ -83,6 +83,7 @@ const createEarth = async () => {
setTimeout(() => { setTimeout(() => {
new YJ.Tools(window.earth_ts).flyHome() new YJ.Tools(window.earth_ts).flyHome()
}, 1000) }, 1000)
console.log("createEarth++++++++++++++++++++")
cabin.value.initTreeCallBack() cabin.value.initTreeCallBack()
} }
const closeSituationEdit = () => { const closeSituationEdit = () => {

View File

@ -34,7 +34,7 @@
</div> </div>
<div class="list" v-if="currentTypeId!=''"> <div class="list" v-if="currentTypeId!=''">
<div v-for="item in elementList" class="itemBox"> <div v-for="item in elementList" class="itemBox" @click="addMarker(item)">
<div class="imgbg"> <div class="imgbg">
<img :src="service + (item.posterDataUrl||item.militaryDataUrl)"/> <img :src="service + (item.posterDataUrl||item.militaryDataUrl)"/>
</div> </div>
@ -74,17 +74,17 @@ const defaultProps = {
const activIndex = ref(0) const activIndex = ref(0)
const tabs = [ const tabs = [
{name: "人工模型", dataType: 'tree', key: "model"}, {name: "人工模型", dataType: 'tree', key: "model",},
{name: "军事标绘", dataType: 'tree', key: "graph"}, {name: "军事标绘", dataType: 'tree', key: "graph", funName: 'DrawPoint',},
{ {
name: "基础标绘", dataType: 'list', children: name: "基础标绘", dataType: 'list', children:
[ [
{name: "点", source_name: "点标注", funName: 'DrawPoint', type: "point"}, {name: "点", source_name: "点标注", funName: 'DrawPoint', type: "point"},
{name: "线", source_name: "", funName: 'DrawPolyline', type: ""}, {name: "线", source_name: "线标注", funName: 'DrawPolyline', type: "line"},
{name: "面", source_name: "", funName: 'DrawPolygon', type: ""}, {name: "面", source_name: "面标注", funName: 'DrawPolygon', type: "panel"},
{name: "圆", source_name: "", funName: 'DrawCircle', type: ""}, {name: "圆", source_name: "圆标注", funName: 'DrawCircle', type: "circle"},
{name: "攻击箭头", source_name: "", funName: 'DrawAttackArrow', type: ""}, {name: "攻击箭头", source_name: "攻击箭头", funName: 'DrawAttackArrow', type: "attackArrow"},
{name: "钳形箭头", source_name: "", funName: 'DrawPincerArrow', type: ""} {name: "钳形箭头", source_name: "钳形箭头", funName: 'DrawPincerArrow', type: "pincerArrow"}
] ]
}, },
{name: "特效", dataType: 'list', children: [{name: "火焰"}]}, {name: "特效", dataType: 'list', children: [{name: "火焰"}]},
@ -137,11 +137,18 @@ const getModelListByType = (id) => {
if (activIndex.value == 0) { if (activIndex.value == 0) {
formData.append('modelTypeId', id) formData.append('modelTypeId', id)
ModelApi.showModelByType(formData).then((res) => { ModelApi.showModelByType(formData).then((res) => {
res.data.forEach(item => {
item.funName = 'DrawPoint'
item.type = 'model'
})
elementList.value = res.data elementList.value = res.data
}) })
} else { } else {
formData.append('militaryTypeId', id) formData.append('militaryTypeId', id)
GraphApi.showModelByType(formData).then((res) => { GraphApi.showModelByType(formData).then((res) => {
res.data.forEach(item => {
item.funName = 'DrawPoint'
})
elementList.value = res.data elementList.value = res.data
}) })
} }
@ -162,14 +169,40 @@ let getGraphTypeList = async () => {
// 添加标绘 // 添加标绘
let addMarker = (item) => { let addMarker = (item) => {
let nodes = getSelectedNodes(window['treeObj']) let nodes = getSelectedNodes(window['treeObj'])
console.log("绘制" + item.name) console.log("绘制", item)
console.log("获取选中的节点", nodes) console.log("获取选中的节点", nodes)
let id = new YJ.Tools().randomString() let id = new YJ.Tools().randomString()
let pId = nodes.length >= 1 ? nodes[0].id : -1 let pId = -1
if (nodes.length) {
pId = nodes[0].sourceType == 'directory' ? nodes[0].id : nodes[0].parentId
}
// let pId = nodes.length >= 1 ? nodes[0].id : -1
window.draw = new YJ.Draw[item.funName](earth_ts) window.draw = new YJ.Draw[item.funName](earth_ts)
window.draw.start((a, position) => { window.draw.start((a, position) => {
console.log(position) console.log(position)
addMapSource({id, type: item.type, name: item.source_name, position, pId}) if (position != undefined) {
let obj = {id, name: item.source_name, position}
switch (item.type) {
case 'model':
obj.modelDataUrl = item.modelDataUrl
obj.name = item.modelName
break
case 'line':
case 'panel':
case 'attackArrow':
case 'pincerArrow':
delete obj.position
obj.positions = position
break
case 'circle':
obj.center = position.center
obj.radius = position.radius
break
}
addMapSource(item.type, pId, obj)
}
}) })
} }

View File

@ -3,21 +3,32 @@ import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
const {cusAddNodes, getSelectedNode} = useTreeNode() const {cusAddNodes, getSelectedNode} = useTreeNode()
export function addMapSource(option, cb: any = null) { export function initMapData(type, data) {
console.log("添加到地球上", option)
let id = option.id || new YJ.Tools().randomString()
let name = option.name
let entityObject
let options let options
let baseURL = localStorage.getItem('ip') let entityObject
switch (option.type) { switch (type) {
case 'point': case 'point':
console.log({id, name, position: option.position}) entityObject = new YJ.Obj.BillboardObject(window['earth_ts'], data)
entityObject = new YJ.Obj.BillboardObject(window['earth_ts'], {id, name, position: option.position}) break
console.log("添加dian") case 'model':
break; entityObject = new YJ.Obj.Model(window['earth_ts'], data)
break
case 'line':
entityObject = new YJ.Obj.PolylineObject(window['earth_ts'], data)
break
case 'panel':
entityObject = new YJ.Obj.PolygonObject(window['earth_ts'], data)
break
case 'circle':
entityObject = new YJ.Obj.CircleObject(window['earth_ts'], data)
break
case 'attackArrow':
entityObject = new YJ.Obj.AttackArrowObject(window['earth_ts'], data)
break
case 'pincerArrow':
entityObject = new YJ.Obj.PincerArrowObject(window['earth_ts'], data)
break
} }
if (entityObject) { if (entityObject) {
function getOptions() { function getOptions() {
let opt = structuredClone(entityObject.options) let opt = structuredClone(entityObject.options)
@ -26,15 +37,59 @@ export function addMapSource(option, cb: any = null) {
} }
options = getOptions() options = getOptions()
if (entityObject.options.id) {
(window as any)._entityMap.set(entityObject.options.id, entityObject)
} }
console.log('options', options) return options
} else return null
}
export function addMapSource(type, pId, option, cb: any = null) {
console.log("添加到地球上", option)
let options
let baseURL = localStorage.getItem('ip')
/*switch (type) {
case 'point':
data = {id, name, position: option.position}
break;
case 'line':
case 'panel':
data = {id, name, positions: option.positions}
break
case 'circle':
data = {id, name, positions: option.positions}
break
case 'attackArrow':
break
case 'pincerArrow':
break
case 'model':
data = {
id,
name,
position: option.position,
url: baseURL + option.modelDataUrl,
maximumScale: 1,
rotate: {
x: 0,
y: 0,
z: 0
}
}
break
}*/
options = initMapData(type, option)
// 进数据库 // 进数据库
let dbOption = { let dbOption = {
"id": option.id, "id": option.id,
"sourceName": name, "sourceName": option.name,
"sourceType": option.type, "sourceType": type,
"sourcePath": "", "sourcePath": "",
"parentId": option.pId, "parentId": pId,
"treeIndex": 0, "treeIndex": 0,
"isShow": 1, "isShow": 1,
"detail": JSON.stringify(options) || '{}', "detail": JSON.stringify(options) || '{}',
@ -46,20 +101,9 @@ export function addMapSource(option, cb: any = null) {
console.log("addTsSource", res) console.log("addTsSource", res)
cb && cb(res) cb && cb(res)
// 上树 // 上树
cusAddNodes(window.treeObj, getSelectedNode(window.treeObj), [dbOption], true) let selectedNode = window.treeObj.getNodeByParam('id', pId)
cusAddNodes(window.treeObj, selectedNode, [dbOption], true)
}) })
} }
export function initMapData(type, data) {
let entityObject
switch (type) {
case 'point':
console.log("ssssssss+++", window['earth_ts'])
entityObject = new YJ.Obj.BillboardObject(window['earth_ts'], data)
}
if (entityObject) {
if (entityObject.options.id) {
(window as any)._entityMap.set(entityObject.options.id, entityObject)
}
}
}

View File

@ -114,9 +114,10 @@ const second = ref(0)
const times = ref(0)//闪烁间隔 const times = ref(0)//闪烁间隔
const numbers = ref(0)//闪烁次数 const numbers = ref(0)//闪烁次数
const isContainModelPosition = ref(true) const isContainModelPosition = ref(true)
const eventBus: any = inject('bus')
form['datetime'] = new Date(2000, 1, 1, 12, 0, 0) form['datetime'] = new Date(2000, 1, 1, 12, 0, 0)
const isShowPup = ref(true) const isShowPup = ref(false)
const eventTree: { children: ({ label: string } | { label: string })[]; id: string; label: string }[] = [ const eventTree: { children: ({ label: string } | { label: string })[]; id: string; label: string }[] = [
{ {
id: "normal", id: "normal",
@ -142,6 +143,15 @@ const handleNodeClick = (data: Tree, node, TreeNode, event) => {
currentKey.value = data.id; // data.id 为节点的唯一 key需与 tree 的 node-key 对应) currentKey.value = data.id; // data.id 为节点的唯一 key需与 tree 的 node-key 对应)
form.name = data.label form.name = data.label
} }
eventBus.on('openAddEvent', (data, cb, type) => {
// selectCallback = cb
// addType.value = type
isShowPup.value = data
// if (data) {
// getModelList()
// getSetting()
// }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -152,7 +162,6 @@ const handleNodeClick = (data: Tree, node, TreeNode, event) => {
//left: 50%; //left: 50%;
//width: 40vw; //width: 40vw;
//height: 50vh; //height: 50vh;
display: none;
.set_detail { .set_detail {
display: flex; display: flex;

View File

@ -49,7 +49,7 @@ export const showRightMenuTs = (event: any, treeObj: any, selectedNodes, nodeTyp
} }
} }
for (let i = arr.length - 1; i >= 0; i--) { for (let i = arr.length - 1; i >= 0; i--) {
if (['pictureLocation', 'importPanorama'].includes(arr[i])) { if (['pictureLocation', 'importPanorama', 'setView', 'resetView',].includes(arr[i])) {
arr.splice(i, 1); // 从索引 i 开始删除 1 个元素 arr.splice(i, 1); // 从索引 i 开始删除 1 个元素
} }
} }