zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加面、集结地、箭头、双箭头绘制和编辑

Browse Source
This commit is contained in:
zh
2025-09-05 18:41:33 +08:00
parent 80f63fcca1
commit 4b0473b928
26 changed files with 1205 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components.d.ts vendored
View File

@ -9,14 +9,12 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
BaseDialog: typeof import('./src/components/dialog/baseDialog.vue')['default']
Dialog: typeof import('./src/components/dialog/index.vue')['default']
Directory: typeof import('./src/components/dialog/directory.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
@ -26,7 +24,6 @@ declare module 'vue' {
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElUpload: typeof import('element-plus/es')['ElUpload']
Index_b: typeof import('./src/components/SvgIcon/index_b.vue')['default']
Pagination: typeof import('./src/components/Pagination/index.vue')['default']

22
src/renderer/public/sdk/YJEarth.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/renderer/src/api/tree/index.ts
View File

@ -12,13 +12,18 @@ export const TreeApi = {
return await request.post({
url: `/source/addOtherSource`,
data
}).then((res) => {
ElMessage({
message: '添加成功',
type: 'success'
})
})
},
//新增节点
//新增目录
addDirectory: async (data: any) => {
return await request.post({
url: `/source/addOtherSource`,
url: `/source/addDirectory`,
data
}).then((res) => {
ElMessage({

4
src/renderer/src/components/dialog/baseDialog.vue
View File

@ -2,6 +2,8 @@
<div class="YJ-custom-base-dialog" :class="className" ref="baseDialog" :id="id" :style="{
width: width,
height: height,
top: top,
left: left,
position: fix ? 'fixed' : 'absolute'
}" v-if="dialogVisible" v-show="dialogVisible">
<div class="title-box" ref="titleBox"><span class="title">{{ title }}</span><span class="close-box"
@ -268,7 +270,7 @@ defineExpose({
color: #fff;
}
.el-tabs__item:nth-child(2) {
padding: 0;
padding-left: 0;
}
.el-tabs__item.is-active, .el-tabs__item:hover {
color: #fff;

3
src/renderer/src/components/dialog/directory.vue
View File

@ -67,7 +67,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
const add = throttle(async () => {
let parentId = getKeyOfSelectedNode(window.treeObj, 'id')
let fnone = getSelectedNode(window.treeObj)
const res = await TreeApi.addDirectory({
const res:any = await TreeApi.addDirectory({
id: new YJ.Tools().randomString(),
sourceName: form.sourceName,
parentId
})

2
src/renderer/src/main.ts
View File

@ -25,7 +25,7 @@ import '../public/tree/jquery.ztree.exhide.js'
import '../public/tree/fuzzysearch.js'
import '../public/tree/newFuzzySearch'
import Pagination from './components/Pagination/index.vue'
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
// process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
const i18n = createI18n({
legacy: false,
locale: 'zh-CN',

188
src/renderer/src/views/components/bottomSide/bottomSide.vue
View File

@ -19,7 +19,7 @@ import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import { initMapData } from '../tree/initMapData'
const { t } = useI18n()
const eventBus = inject("bus");
const eventBus: any = inject("bus");
const i8n = ref({
DrawRect: 'rect',
@ -42,7 +42,7 @@ const bottomMenuList = ref([
sourceType: 'groundText',
className: 'public',
fun: () => {
eventBus.emit("openDialog", 'groundText');
eventBus.emit("openDialog", 'addGroundText');
}
},
{
@ -51,7 +51,8 @@ const bottomMenuList = ref([
sourceType: 'standText',
className: 'public',
fun: () => {
eventBus.emit("openDialog", 'standText');
eventBus.emit("openDialog", 'addStandText');
// eventBus.emit("openDialog", 'standText');
}
},
{
@ -82,7 +83,7 @@ const bottomMenuList = ref([
// "treeIndex": 0,
"params": options
}
TreeApi.addDirectory(params)
TreeApi.addOtherSource(params)
})
}
},
@ -115,7 +116,7 @@ const bottomMenuList = ref([
// "treeIndex": 0,
"params": options
}
TreeApi.addDirectory(params)
TreeApi.addOtherSource(params)
})
}
},
@ -137,7 +138,7 @@ const bottomMenuList = ref([
name: name,
positions: positions,
})
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
@ -147,7 +148,7 @@ const bottomMenuList = ref([
// "treeIndex": 0,
"params": options
}
TreeApi.addDirectory(params)
TreeApi.addOtherSource(params)
})
}
},
@ -158,7 +159,7 @@ const bottomMenuList = ref([
className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawPolygon(window.earth)
Draw.start((a, positions) => {
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标！',
@ -166,11 +167,27 @@ const bottomMenuList = ref([
})
return
}
let PolygonObject = new YJ.Obj.PolygonObject(window.earth, { id: new YJ.Tools().randomString(), positions: positions })
PolygonObject.onClick = (a, b, c) => {
console.log(a, b, c)
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '面标注'
let options: any = await initMapData('panel', {
id: id,
name: name,
positions: positions,
})
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
"sourceName": name,
"sourceType": "panel",
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
// "treeIndex": 0,
"params": options
}
eventBus.emit("openDialog", 'panel', PolygonObject.options.id);
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
})
}
},
@ -178,32 +195,169 @@ const bottomMenuList = ref([
sourceName: '圆标注',
key: 'DrawCircle',
sourceType: 'circle',
className: 'public'
className: 'public',
},
{
sourceName: '矩形',
key: 'DrawRect',
sourceType: 'rectangle',
className: 'public'
className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawRect(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标！',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '矩形'
let options: any = await initMapData('panel', {
id: id,
name: name,
positions: positions,
})
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
"sourceName": name,
"sourceType": "rectangle",
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
// "treeIndex": 0,
"params": options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
})
}
},
{
sourceName: '集结地',
key: 'DrawAssemble',
sourceType: 'rendezvous',
className: 'public'
className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawAssemble(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标！',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '集结地'
let options: any = await initMapData('rendezvous', {
id: id,
name: name,
positions: positions,
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
"sourceName": name,
"sourceType": "rendezvous",
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
// "treeIndex": 0,
"params": options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
})
}
},
{
sourceName: '箭头',
key: 'DrawAttackArrow',
sourceType: 'attackArrow',
className: 'public'
className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawAttackArrow(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标！',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '箭头'
let options: any = await initMapData('attackArrow', {
id: id,
name: name,
positions: positions,
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
"sourceName": name,
"sourceType": "attackArrow",
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
// "treeIndex": 0,
"params": options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
})
}
},
{
sourceName: '钳形箭头',
key: 'DrawPincerArrow',
sourceType: 'pincerArrow',
className: 'public'
className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawPincerArrow(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 5) {
ElMessage({
message: '至少需要绘制五个坐标！',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '双箭头'
let options: any = await initMapData('pincerArrow', {
id: id,
name: name,
positions: positions,
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
"sourceName": name,
"sourceType": "pincerArrow",
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
// "treeIndex": 0,
"params": options
}
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
})
}
}
// {
// sourceName: "锁定",

9
src/renderer/src/views/components/propertyBox/addGroundText.vue
View File

@ -1,5 +1,5 @@
<template>
<Dialog ref="baseDialog" title="贴地文字" left="180px" top="100px">
<Dialog ref="baseDialog" title="贴地文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
<template #content>
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea>
</template>
@ -16,8 +16,8 @@ import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData'
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const text = ref("")
eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open()
@ -40,6 +40,7 @@ const confirm = () => {
name: name,
positions: positions,
})
delete options.host
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
@ -49,7 +50,7 @@ const confirm = () => {
// "treeIndex": 0,
"params": options
}
TreeApi.addDirectory(params)
TreeApi.addOtherSource(params)
})
}
defineExpose({

9
src/renderer/src/views/components/propertyBox/addStandText.vue
View File

@ -1,5 +1,5 @@
<template>
<Dialog ref="baseDialog" title="立体文字" left="180px" top="100px">
<Dialog ref="baseDialog" title="立体文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
<template #content>
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea>
</template>
@ -16,8 +16,8 @@ import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData'
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const text = ref("")
eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open()
@ -40,6 +40,7 @@ const confirm = () => {
name: name,
positions: positions,
})
delete options.host
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
"id": id,
@ -49,7 +50,7 @@ const confirm = () => {
// "treeIndex": 0,
"params": options
}
TreeApi.addDirectory(params)
TreeApi.addOtherSource(params)
})
}
defineExpose({

368
src/renderer/src/views/components/propertyBox/attackArrow.vue Normal file
View File

@ -0,0 +1,368 @@
<template>
<Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="attackArrow"
:closeCallback="closeCallback">
<template #content>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row" style="align-items: flex-start;">
<div class="col">
<span class="label">名称</span>
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
</div>
<div class="col" style="flex: 0 0 60%;">
<div class="row">
<div class="col input-select-unit-box">
<span class="label" style="margin-right: 0px;">投影面积:</span>
<input class="input input-text" readonly type="text" v-model="area">
<el-select v-model="areaUnit">
<el-option label="平方米" value="m2"></el-option>
<el-option label="平方千米" value="km2"></el-option>
<el-option label="亩" value="mu"></el-option>
<el-option label="公顷" value="ha"></el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">动画时长</span>
<div class="input-number input-number-unit-3">
<input class="input blur" type="number" title="" min="500" max="9999999" v-model="entityOptions.spreadTime">
<span class="unit">ms</span>
<span class="arrow"></span>
</div>
</div>
<div class="col" style="flex: 0 0 60%;">
<div class="row">
<div class="col">
<span class="label">动画</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.spreadState">
</div>
<div class="col">
<span class="label">动画重复</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.loop">
</div>
</div>
</div>
</div>
</div>
<div class="div-item">
<div class="row">
<el-tabs v-model="activeName">
<el-tab-pane label="属性信息" name="1">
<attribute :entityOptions="entityOptions"></attribute>
</el-tab-pane>
<el-tab-pane label="空间信息" name="2">
<div class="row">
<div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span>
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
</el-option>
</el-select>
</div>
<div class="col">
<span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
<span class="unit">m</span>
<span class="arrow"></span>
</div>
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
:disabled="heightMode == 2">应用</button>
</div>
</div>
<div class="row">
<div class="table spatial-info-table">
<div class="table-head">
<div class="tr">
<div class="th"></div>
<div class="th">经度（X）</div>
<div class="th">纬度（Y）</div>
<div class="th">高度（Z）</div>
</div>
</div>
<div class="table-body">
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
<div class="td">{{ i + 1 }}</div>
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
</div>
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
</div>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
v-model="entityOptions.height" min="-9999999" max="999999999"
v-if="activeTd.index == i && activeTd.name == 'alt'">
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="面风格" name="3">
<div class="row">
<div class="col">
<span class="label">面颜色</span>
<div class="color" ref="colorRef"></div>
</div>
<div class="col">
<span class="label">描边颜色</span>
<div class="lineColor" ref="lineColorRef"></div>
</div>
<div class="col">
<span class="label">描边宽度</span>
<div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
<span class="unit">px</span>
<span class="arrow"></span>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="标签风格" name="4">
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
</el-tab-pane>
</el-tabs>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<div style="position: absolute; left: 24px; display: flex;">
<button @click="nodeEdit"><svg class="icon-edit">
<use xlink:href="#yj-icon-edit"></use>
</svg>二次编辑</button>
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const title = ref('箭头')
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const options = ref({});
const colorRef = ref(null)
const lineColorRef = ref(null)
eventBus.on("openPolygonEdit", () => {
baseDialog.value?.open()
});
const area = ref(0)
const areaUnit = ref('m2')
const height = ref(10)
const heightModeData = ref([
{
name: '海拔高度',
value: '海拔高度',
key: 0
},
{
name: '相对地表',
value: '相对地表',
key: 1
},
{
name: '依附模型',
value: '依附模型',
key: 2
}
])
const activeName = ref('1')
const activeTd = ref({
index: -1,
name: ''
})
const positions = ref([])
const heightMode = ref(0)
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const open = async (id: any, type: any) => {
if(type && type === 'pincerArrow') {
title.value = '双箭头'
}
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
heightMode.value = entityOptions.value.heightMode
area.value = entityOptions.value.areaByMeter
positions.value = structuredClone(that.options.positions)
that.areaChangeCallBack = () => {
switch (areaUnit.value) {
case 'm2'://平方米
area.value = entityOptions.value.areaByMeter
break
case 'km2'://平方千米
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
break
case 'mu'://亩
area.value = Number(
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
)
break
case 'ha'://公顷
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
break
default:
area.value = entityOptions.value.areaByMeter
}
}
let spreadState = entityOptions.value.spreadState
heightModeChange(heightMode.value)
setTimeout(() => {
entityOptions.value.spreadState = spreadState
}, 50);
baseDialog.value?.open()
await nextTick()
let colorPicker = new window.YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
entityOptions.value.color = color
}, //点击确认按钮事件回调
clear: () => {
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let linecolorPicker = new window.YJColorPicker({
el: lineColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: entityOptions.value.lineColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
entityOptions.value.lineColor = color
}, //点击确认按钮事件回调
clear: () => {
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
}
const heightModeChange = (val) => {
that.heightMode = heightMode.value
}
const heightConfirm = () => {
if (entityOptions.value.operate.positionEditing) {
that.positionEditing = false
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
}
else {
that.closeNodeEdit(this)
that.heightMode = that.heightMode
setTimeout(() => {
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
}, 100);
}
}
const inputDblclick = async (event, i, anme) => {
if (heightMode.value == 2) {
return
}
activeTd.value = {
index: i,
name: anme
}
await nextTick()
let inputElm = event.target.getElementsByClassName('input')[0]
if (inputElm) {
inputElm.focus()
}
}
const inputBlurCallBack = (event, i, name, digit = 2) => {
activeTd.value = {
index: -1,
name: ''
}
}
const translate = () => {
entityOptions.value.spreadState = false
that.openPositionEditing(() => {
entityOptions.value.options.positions = structuredClone(that.options.positions)
})
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
entityOptions.value.closeNodeEdit()
entityOptions.value.reset()
eventBus.emit("destroyComponent")
}
const nodeEdit = () => {
entityOptions.value.spreadState = false
that.nodeEdit((e, positions, areaByMeter) => {
entityOptions.value.options.positions = structuredClone(positions)
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
let params = structuredClone(that.options)
baseDialog.value?.close()
delete params.host
let params2 = {
"id": params.id,
"sourceName": params.name,
"params": params,
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()
}
watch(
() => areaUnit.value,
(val) => {
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
that.areaChangeCallBack()
}
},
{ immediate: true }
);
defineExpose({
open
})
</script>
<style scoped lang="scss"></style>

6
src/renderer/src/views/components/propertyBox/attribute.vue
View File

@ -208,8 +208,8 @@
import { ref } from 'vue';
import { inject } from "vue";
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const attributeType = ref('richText')
const props = defineProps({
@ -263,7 +263,7 @@ const attributeSelect = ref([
const cameraName = ref('')
const addlinkInput = ref('')
const linkEditActive = ref({})
const linkEditActive:any = ref({})
const openRichTextEditor = () => {
eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val) => {

58
src/renderer/src/views/components/propertyBox/billboardObject.vue
View File

@ -60,19 +60,19 @@
<div class="row" style="margin-bottom: 5px;">
<div class="col">
<span class="label">X轴:</span>
<input style="border: none;background: none;" class="input convert-x" readonly="readonly" v-model="x">
<input style="border: none;background: none;" class="input convert-x" readonly v-model="x">
</div>
</div>
<div class="row" style="margin-bottom: 5px;">
<div class="col">
<span class="label">Y轴:</span>
<input style="border: none;background: none;" class="input convert-y" readonly="readonly" v-model="y">
<input style="border: none;background: none;" class="input convert-y" readonly v-model="y">
</div>
</div>
<div class="row">
<div class="col">
<span class="label">Z轴:</span>
<input style="border: none;background: none;" class="input convert-z" readonly="readonly" v-model="z">
<input style="border: none;background: none;" class="input convert-z" readonly v-model="z">
</div>
</div>
</div>
@ -158,7 +158,7 @@
<div class="row">
<div class="col">
<span style="flex: 0 0 40px;">经度</span>
<input class="input lng" readonly="readonly" :value="entityOptions.lng">
<input class="input lng" readonly :value="entityOptions.lng">
</div>
<div class="col">
</div>
@ -166,7 +166,7 @@
<div class="row">
<div class="col">
<span style="flex: 0 0 40px;">纬度</span>
<input class="input lat" readonly="readonly" :value="entityOptions.lat">
<input class="input lat" readonly :value="entityOptions.lat">
</div>
<div class="col">
</div>
@ -177,17 +177,17 @@
<div class="col" style="flex-direction: column;">
<div class="row" style="margin-bottom: 15px;">
<span style="flex: 0 0 40px;">经度</span>
<input class="input lng-dm-d" style="flex: 1;" readonly="readonly" :value="lngDmD">
<input class="input lng-dm-d" style="flex: 1;" readonly :value="lngDmD">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
<input class="input lng-dm-m" style="flex: 1;" readonly="readonly" :value="lngDmM">
<input class="input lng-dm-m" style="flex: 1;" readonly :value="lngDmM">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
<span class="top-line"></span>
</div>
<div class="row">
<span style="flex: 0 0 40px;">纬度</span>
<input class="input lat-dm-d" style="flex: 1;" readonly="readonly" :value="latDmD">
<input class="input lat-dm-d" style="flex: 1;" readonly :value="latDmD">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
<input class="input lat-dm-m" style="flex: 1;" readonly="readonly" :value="latDmM">
<input class="input lat-dm-m" style="flex: 1;" readonly :value="latDmM">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
<span class="bottom-line"></span>
</div>
@ -199,21 +199,21 @@
<div class="col" style="flex-direction: column;">
<div class="row" style="margin-bottom: 15px;">
<span style="flex: 0 0 40px;">经度</span>
<input class="input lng-dms-d" style="flex: 1;" readonly="readonly" :value="lngDmsD">
<input class="input lng-dms-d" style="flex: 1;" readonly :value="lngDmsD">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
<input class="input lng-dms-m" style="flex: 1;" readonly="readonly" :value="lngDmsM">
<input class="input lng-dms-m" style="flex: 1;" readonly :value="lngDmsM">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
<input class="input lng-dms-s" style="flex: 1;" readonly="readonly" :value="lngDmsS">
<input class="input lng-dms-s" style="flex: 1;" readonly :value="lngDmsS">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
<span class="top-line"></span>
</div>
<div class="row">
<span style="flex: 0 0 40px;">纬度</span>
<input class="input lat-dms-d" style="flex: 1;" readonly="readonly" :value="latDmsD">
<input class="input lat-dms-d" style="flex: 1;" readonly :value="latDmsD">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
<input class="input lat-dms-m" style="flex: 1;" readonly="readonly" :value="latDmsM">
<input class="input lat-dms-m" style="flex: 1;" readonly :value="latDmsM">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
<input class="input lat-dms-s" style="flex: 1;" readonly="readonly" :value="latDmsS">
<input class="input lat-dms-s" style="flex: 1;" readonly :value="latDmsS">
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
<span class="bottom-line"></span>
</div>
@ -312,15 +312,15 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const epsg_map = ref([{
"name": "WGS 84 / UTM zone 3N",
"epsg": "EPSG:32603",
"def": "+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs"
}])
let array = []
let array:any[] = []
for (const [key, value] of window.earth.proj.epsg_map) {
let item = structuredClone(value)
item.name = item.name + `(${item.epsg}})`
@ -367,7 +367,7 @@ const heightModeData = ref([
}
])
const activeName = ref('1')
const entityOptions = ref({});
const entityOptions:any = ref({});
const x = ref();
const y = ref();
const z = ref();
@ -390,7 +390,7 @@ const open = async (id) => {
baseDialog.value?.open()
await nextTick()
let labelColorPicker = new YJColorPicker({
let labelColorPicker = new window.YJColorPicker({
el: labelColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
@ -410,7 +410,7 @@ const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
that.reset()
eventBus.emit("destroyComponent")
eventBus?.emit("destroyComponent")
}
@ -445,10 +445,10 @@ const heightModeChange = (val) => {
case 1:
case '1':
if (window.earth.viewer.scene.terrainProvider.availability) {
Cesium.sampleTerrainMostDetailed(
window.Cesium.sampleTerrainMostDetailed(
window.earth.viewer.scene.terrainProvider,
[
Cesium.Cartographic.fromDegrees(
window.Cesium.Cartographic.fromDegrees(
entityOptions.value.lng,
entityOptions.value.lat
)
@ -465,10 +465,10 @@ const heightModeChange = (val) => {
break
case 3:
case '3':
let objectsToExclude = []
let objectsToExclude: any[] = []
for (let [key, value] of window.earth.entityMap) {
if (value.type === 'RadarScanStereoscopic' && value.entity) {
objectsToExclude.push(value.entity)
objectsToExclude.push((value as any).entity)
}
}
entityOptions.value.getClampToHeight(entityOptions.value.options.position, objectsToExclude).then(h => {
@ -502,10 +502,10 @@ const changHeight = () => {
break
case 1:
if (window.earth.viewer.scene.terrainProvider.availability) {
Cesium.sampleTerrainMostDetailed(
window.Cesium.sampleTerrainMostDetailed(
window.earth.viewer.scene.terrainProvider,
[
Cesium.Cartographic.fromDegrees(
window.Cesium.Cartographic.fromDegrees(
entityOptions.value.lng,
entityOptions.value.lat
)
@ -621,10 +621,10 @@ const close = () => {
}
const clickChangeImage = () => {
eventBus.emit("openImageSelect")
eventBus?.emit("openImageSelect")
}
const clickChangeDefaultImage = () => {
eventBus.emit("openImageSelect")
eventBus?.emit("openImageSelect")
}
const fontChange = (val) => {
entityOptions.value.labelFontFamily = val

15
src/renderer/src/views/components/propertyBox/curvelineObject.vue
View File

@ -17,7 +17,7 @@
<el-option label="投影长度" value="1"></el-option>
<el-option label="地表长度" value="2"></el-option>
</el-select>
<input v-model="length" class="input-text" readonly="readonly">
<input v-model="length" class="input-text" readonly>
<el-select v-model="lengthUnit">
<el-option label="米" value="m"></el-option>
<el-option label="千米" value="km"></el-option>
@ -198,8 +198,8 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const length = ref(0)
const lengthUnit = ref('m')
@ -307,7 +307,7 @@ const activeTd = ref({
index: -1,
name: ''
})
const entityOptions = ref({});
const entityOptions:any = ref({});
const linePositions = ref([])
const colorRef = ref(null)
const extendColorRef = ref(null)
@ -336,7 +336,7 @@ const open = async (id) => {
baseDialog.value?.open()
await nextTick()
let colorPicker = new YJColorPicker({
let colorPicker = new (window as any).YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
@ -350,7 +350,7 @@ const open = async (id) => {
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let extendColorPicker = new YJColorPicker({
let extendColorPicker = new (window as any).YJColorPicker({
el: extendColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
@ -375,6 +375,9 @@ const heightConfirm = () => {
}
}
const inputDblclick = async (event, i, anme) => {
if(heightMode.value == 2) {
return
}
activeTd.value = {
index: i,
name: anme

7
src/renderer/src/views/components/propertyBox/fontSelect.ts
View File

@ -29,15 +29,18 @@ function getFontList() {
return fontData
}
function getFontFamily(key) {
// @ts-ignore
function getFontFamily(key:any) {
for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) {
return fontData[i].font;
}
}
}
function getFontFamilyName(key) {
// @ts-ignore
function getFontFamilyName(key:any) {
for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) {
return fontData[i].name;

164
src/renderer/src/views/components/propertyBox/groundText.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<Dialog ref="baseDialog" title="贴地文字属性" left="180px" top="100px" className="ground-text"
:closeCallback="closeCallback">
<template #content>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">名称</span>
<textarea v-model="entityOptions.text"></textarea>
</div>
<div class="col">
<span class="label">颜色</span>
<div class="color" ref="colorRef" </div>
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">经度</span>
<input class="input" type="number" title="" min="-180" max="180"
v-model="entityOptions.lng">
</div>
<div class="col">
<span class="label">纬度</span>
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat">
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">旋转角度</span>
<input type="range" max="360" min="0" step="1" v-model="entityOptions.angle">
<div class="input-number input-number-unit"
style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="360" step="1"
v-model="entityOptions.angle">
<span class="unit">°</span>
<span class="arrow"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">调整大小</span>
<input type="range" max="100000" min="0" step="0.01" v-model="entityOptions.scale">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100000" step="0.01"
v-model="entityOptions.scale">
<span class="arrow"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">滚动速度</span>
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100" step="1"
v-model="entityOptions.speed">
<span class="arrow"></span>
</div>
</div>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<div style="position: absolute; left: 24px; display: flex;">
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="remove">删除</button>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const text = ref("")
eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open()
});
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const colorRef = ref(null)
const open = async (id: any) => {
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
baseDialog.value?.open()
await nextTick()
let colorPicker = new window.YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
entityOptions.value.color = color
}, //点击确认按钮事件回调
clear: () => {
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
baseDialog.value?.close()
let params = structuredClone(that.options)
// 删除不必要的属性
delete params.host
delete params.name
let params2 = {
"id": params.id,
"sourceName": params.name,
"params": params,
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()
}
const remove = () => {
entityOptions.value.remove()
close()
}
const translate = () => {
entityOptions.value.positionEditing = true
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
that.reset()
eventBus?.emit("destroyComponent")
}
defineExpose({
open
})
</script>
<style scoped lang="scss"></style>

2
src/renderer/src/views/components/propertyBox/labelStyle.vue
View File

@ -99,7 +99,7 @@ const fontChange = (val) => {
}
onMounted(() => {
let labelColorPicker = new YJColorPicker({
let labelColorPicker = new (window as any).YJColorPicker({
el: labelColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度

305
src/renderer/src/views/components/propertyBox/polygonObject.vue
View File

@ -1,20 +1,24 @@
<template>
<Dialog ref="baseDialog" title="面属性" left="180px" top="100px" :closeCallback="closeCallback">
<Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
<template #content>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row" style="align-items: flex-start;">
<div class="col">
<span class="label">名称</span>
<input class="input" maxlength="40" type="text" v-model="options.name">
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
</div>
<div class="col" style="flex: 0 0 60%;">
<div class="row">
<div class="col input-select-unit-box">
<span class="label" style="margin-right: 0px;">投影面积:</span>
<input class="input input-text" readonly="readonly" type="text">
<div class="input-select-unit"></div>
<input class="input input-text" readonly type="text" v-model="area">
<el-select v-model="areaUnit">
<el-option label="平方米" value="m2"></el-option>
<el-option label="平方千米" value="km2"></el-option>
<el-option label="亩" value="mu"></el-option>
<el-option label="公顷" value="ha"></el-option>
</el-select>
</div>
</div>
</div>
@ -22,24 +26,29 @@
</div>
<div class="div-item">
<div class="row">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tabs v-model="activeName">
<el-tab-pane label="属性信息" name="1">
<attribute></attribute>
<attribute :entityOptions="entityOptions"></attribute>
</el-tab-pane>
<el-tab-pane label="空间信息" name="2">
<div class="row">
<div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span>
<div class="height-mode"></div>
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
v-model="heightMode" @change="heightModeChange" placeholder="请选择">
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
</el-option>
</el-select>
</div>
<div class="col">
<span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box">
<input class="input height" type="number" title="" min="-9999999" max="999999999">
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
<span class="unit">m</span>
<span class="arrow"></span>
</div>
<button class="confirm height-confirm" style="margin-left: 5px;">确认</button>
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
:disabled="heightMode == 2">应用</button>
</div>
</div>
<div class="row">
@ -53,6 +62,25 @@
</div>
</div>
<div class="table-body">
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
<div class="td">{{ i + 1 }}</div>
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
</div>
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
</div>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
v-model="entityOptions.height" min="-9999999" max="999999999"
v-if="activeTd.index == i && activeTd.name == 'alt'">
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
</div>
</div>
</div>
</div>
</div>
@ -70,21 +98,32 @@
<div class="col">
<span class="label">描边宽度</span>
<div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="0" max="99" @model="lineWidth">
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
<span class="unit">px</span>
<span class="arrow"></span>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="标签风格" name="5">角色管理</el-tab-pane>
<el-tab-pane label="标签风格" name="4">
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
</el-tab-pane>
</el-tabs>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<button>确定</button>
<div style="position: absolute; left: 24px; display: flex;">
<button @click="nodeEdit"><svg class="icon-edit">
<use xlink:href="#yj-icon-edit"></use>
</svg>二次编辑</button>
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template>
</Dialog>
</template>
@ -92,12 +131,17 @@
<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const activeName = ref('1')
const baseDialog = ref(null);
const eventBus = inject("bus");
const { cusUpdateNode } = useTreeNode()
const title = ref('面')
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const options = ref({});
const colorRef = ref(null)
const lineColorRef = ref(null)
@ -105,107 +149,192 @@ eventBus.on("openPolygonEdit", () => {
baseDialog.value?.open()
});
const lineWidth = ref('')
const area = ref(0)
const areaUnit = ref('m2')
const height = ref(10)
const heightModeData = ref([
{
name: '海拔高度',
value: '海拔高度',
key: 0
},
{
name: '相对地表',
value: '相对地表',
key: 1
},
{
name: '依附模型',
value: '依附模型',
key: 2
}
])
const open = async (id) => {
let that = window.earth.entityMap.get(id)
options.value = structuredClone(that.options)
const activeName = ref('1')
const activeTd = ref({
index: -1,
name: ''
})
const positions = ref([])
const heightMode = ref(0)
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const open = async (id: any, type: any) => {
if(type && type === 'rectangle') {
title.value = '矩形'
}
else if(type && type === 'rendezvous') {
title.value = '集结地'
}
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
heightMode.value = entityOptions.value.heightMode
area.value = entityOptions.value.areaByMeter
positions.value = structuredClone(that.options.positions)
that.areaChangeCallBack = () => {
switch (areaUnit.value) {
case 'm2'://平方米
area.value = entityOptions.value.areaByMeter
break
case 'km2'://平方千米
area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
break
case 'mu'://亩
area.value = Number(
(entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
)
break
case 'ha'://公顷
area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
break
default:
area.value = entityOptions.value.areaByMeter
}
}
heightModeChange(heightMode.value)
baseDialog.value?.open()
await nextTick()
let colorPicker = new YJColorPicker({
let colorPicker = new window.YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: options.value.color,
defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
options.value.color = color
entityOptions.value.color = color
}, //点击确认按钮事件回调
clear: () => {
options.value.color = 'rgba(255,255,255,1)'
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let linecolorPicker = new YJColorPicker({
let linecolorPicker = new window.YJColorPicker({
el: lineColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: options.value.lineColor,
defaultColor: entityOptions.value.lineColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
options.value.lineColor = color
entityOptions.value.lineColor = color
}, //点击确认按钮事件回调
clear: () => {
options.value.lineColor = 'rgba(255,255,255,1)'
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let labelColorPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelColor')[0],
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: this.labelColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
this.labelColor = color
}, //点击确认按钮事件回调
clear: () => {
this.labelColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let lineColorPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelLineColor')[0],
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: this.labelLineColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
this.labelLineColor = color
}, //点击确认按钮事件回调
clear: () => {
this.labelLineColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let labelBackgroundColorStartPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelBackgroundColorStart')[0],
size: 'mini',
alpha: true,
defaultColor: this.labelBackgroundColorStart,
disabled: false,
openPickerAni: 'opacity',
sure: color => {
this.labelBackgroundColorStart = color
},
clear: () => {
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
}
})
let labelBackgroundColorEndPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelBackgroundColorEnd')[0],
size: 'mini',
alpha: true,
defaultColor: this.labelBackgroundColorEnd,
disabled: false,
openPickerAni: 'opacity',
sure: color => {
this.labelBackgroundColorEnd = color
},
clear: () => {
this.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
}
})
}
const handleClick = () => { }
const heightModeChange = (val) => {
that.heightMode = heightMode.value
}
const heightConfirm = () => {
if (entityOptions.value.operate.positionEditing) {
that.positionEditing = false
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
}
else {
that.closeNodeEdit(this)
that.heightMode = that.heightMode
setTimeout(() => {
entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
}, 100);
}
}
const inputDblclick = async (event, i, anme) => {
if(heightMode.value == 2) {
return
}
activeTd.value = {
index: i,
name: anme
}
await nextTick()
let inputElm = event.target.getElementsByClassName('input')[0]
if (inputElm) {
inputElm.focus()
}
}
const inputBlurCallBack = (event, i, name, digit = 2) => {
activeTd.value = {
index: -1,
name: ''
}
}
const translate = () => {
that.openPositionEditing(() => {
entityOptions.value.options.positions = structuredClone(that.options.positions)
})
}
const closeCallback = () => {
console.log('closeCallback');
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
entityOptions.value.closeNodeEdit()
entityOptions.value.reset()
eventBus.emit("destroyComponent")
}
const nodeEdit = () => {
that.nodeEdit((e, positions, areaByMeter) => {
console.log('positions', positions)
entityOptions.value.options.positions = structuredClone(positions)
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
baseDialog.value?.close()
let params = structuredClone(that.options)
delete params.host
let params2 = {
"id": params.id,
"sourceName": params.name,
"params": params,
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()
}
watch(
() => areaUnit.value,
(val) => {
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
that.areaChangeCallBack()
}
},
{ immediate: true }
);
defineExpose({
open
})

48
src/renderer/src/views/components/propertyBox/polylineObject.vue
View File

@ -17,7 +17,7 @@
<el-option label="投影长度" :value="1"></el-option>
<el-option label="地表长度" :value="2"></el-option>
</el-select>
<input v-model="length" class="input-text" readonly="readonly">
<input v-model="length" class="input-text" readonly>
<el-select v-model="lengthUnit">
<el-option label="米" value="m"></el-option>
<el-option label="千米" value="km"></el-option>
@ -71,18 +71,18 @@
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
</div>
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
</div>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
v-model="item.alt" min="-9999999" max="999999999"
v-if="activeTd.index == i && activeTd.name == 'alt'">
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span>
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span>
</div>
</div>
</div>
@ -183,7 +183,9 @@
<button @click="nodeEdit"><svg class="icon-edit">
<use xlink:href="#yj-icon-edit"></use>
</svg>二次编辑</button>
<button style="margin-left: 10px;" @click="translate">平移</button>
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
@ -196,20 +198,17 @@ import { ref, getCurrentInstance } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData'
import { getFontList } from './fontSelect'
import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const length = ref(0)
const lengthUnit = ref('m')
const fontList = ref(getFontList())
const height = ref(10)
const heightModeData = ref([
{
@ -313,36 +312,36 @@ const activeTd = ref({
index: -1,
name: ''
})
const entityOptions = ref({});
const entityOptions: any = ref({});
const linePositions = ref([])
const colorRef = ref(null)
const extendColorRef = ref(null)
const heightMode = ref(0)
let originalOptions
let that
let originalOptions: any
let that: any
const open = async (id) => {
const open = async (id: any) => {
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
heightMode.value = entityOptions.value.heightMode
length.value = entityOptions.value.lengthByMeter
linePositions.value = structuredClone(that.options.positions)
that.lengthChangeCallBack = ()=>{
that.lengthChangeCallBack = () => {
if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000
}
else {
length.value = entityOptions.value.lengthByMeter
}
length.value = entityOptions.value.lengthByMeter / 1000
}
else {
length.value = entityOptions.value.lengthByMeter
}
}
heightModeChange(heightMode.value)
baseDialog.value?.open()
await nextTick()
let colorPicker = new YJColorPicker({
let colorPicker = new (window as any).YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
@ -356,7 +355,7 @@ const open = async (id) => {
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let extendColorPicker = new YJColorPicker({
let extendColorPicker = new (window as any).YJColorPicker({
el: extendColorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
@ -382,6 +381,9 @@ const heightConfirm = () => {
that.smooth = that.smooth
}
const inputDblclick = async (event, i, anme) => {
if(heightMode.value == 2) {
return
}
activeTd.value = {
index: i,
name: anme
@ -449,7 +451,7 @@ const confirm = () => {
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({"id": params.id, "sourceName": params.name, "params": JSON.stringify(params)})
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()

8
src/renderer/src/views/components/propertyBox/richText.vue
View File

@ -10,7 +10,7 @@
<div ref="editorContainer" id="editor-container"></div>
<div class="richText-footer">
<button class="primary" @click="confirm">确认</button>
<button class="cancel">取消</button>
<button class="cancel" @click="close">取消</button>
</div>
</div>
</div>
@ -26,8 +26,8 @@ const props = defineProps({
const host = window.location.host
const visible = ref(false)
const baseDialog = ref(null);
const eventBus = inject("bus");
const baseDialog:any = ref(null);
const eventBus:any = inject("bus");
const toolbarContainer = ref()
const editorContainer = ref()
@ -50,7 +50,7 @@ const open = (t = '', content = '') => {
title.value = t
visible.value = true
nextTick(() => {
const { createEditor, createToolbar } = window.wangEditor
const { createEditor, createToolbar } = (window as any).wangEditor
const editorConfig = {
placeholder: '请输入正文...',
MENU_CONF: {

111
src/renderer/src/views/components/propertyBox/standText.vue
View File

@ -1,10 +1,44 @@
<template>
<Dialog ref="baseDialog" title="贴地文字" left="180px" top="100px">
<Dialog ref="baseDialog" title="立体t文字属性" left="180px" top="100px" className="ground-text"
:closeCallback="closeCallback">
<template #content>
<textarea style="height: 76px; width: 270px;"></textarea>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">名称</span>
<textarea v-model="entityOptions.text"></textarea>
</div>
<div class="col">
<span class="label">颜色</span>
<div class="color" ref="colorRef" </div>
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">滚动速度</span>
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100" step="1" v-model="entityOptions.speed">
<span class="arrow"></span>
</div>
</div>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<button>确定</button>
<div style="position: absolute; left: 24px; display: flex;">
<button @click="nodeEdit"><svg class="icon-edit">
<use xlink:href="#yj-icon-edit"></use>
</svg>二次编辑</button>
</div>
<button @click="remove">删除</button>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template>
</Dialog>
</template>
@ -12,13 +46,78 @@
<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null);
const eventBus = inject("bus");
eventBus.on("openDialog", () => {
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open()
});
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const colorRef = ref(null)
const open = async (id: any) => {
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
baseDialog.value?.open()
await nextTick()
let colorPicker = new window.YJColorPicker({
el: colorRef.value,
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
entityOptions.value.color = color
}, //点击确认按钮事件回调
clear: () => {
entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
baseDialog.value?.close()
let params = structuredClone(that.options)
// 删除不必要的属性
delete params.host
delete params.name
let params2 = {
"id": params.id,
"sourceName": params.name,
"params": params,
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()
}
const remove = () => {
that.remove()
close()
}
const nodeEdit = () => {
that.nodeEdit()
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
that.reset()
eventBus?.emit("destroyComponent")
}
defineExpose({
open
})
</script>
<style scoped lang="scss"></style>

1
src/renderer/src/views/components/tree/components/hooks/rightOperate.ts
View File

@ -29,7 +29,6 @@ export const useRightOperate = () => {
let selectNodes = getSelectedNodes(window.treeObj);
if(selectNodes && selectNodes[selectNodes.length-1]) {
let params = JSON.parse(selectNodes[selectNodes.length-1].params)
console.log('params', params)
eventBus.emit("openDialog", selectNodes[selectNodes.length-1].sourceType, params.id);
}
}

30
src/renderer/src/views/components/tree/hooks/tree.ts
View File

@ -384,13 +384,9 @@ export const useTree = () => {
id: 1,
parentId: 0,
sourceName: '111',
isShow: true
},
{
id: 2,
parentId: 0,
sourceName: '222',
isShow: true
isShow: true,
sourceType: '',
params: ''
}
])
@ -407,13 +403,27 @@ export const useTree = () => {
const initTree = async (selector: string = '#treeDemo') => {
let res = await TreeApi.getTreeList()
console.log('res', res)
if ([0,200].includes(res.code)) {
if ([0, 200].includes(res.code)) {
res.data.sort((a: any, b: any) => {
if(a.treeIndex&&b.treeIndex)
return a.treeIndex - b.treeIndex
if (a.treeIndex && b.treeIndex) {
return a.treeIndex - b.treeIndex
}
if (a.treeIndex) {
return -1;
}
if (b.treeIndex) {
return 1;
}
return 0;
})
for (let i = res.data.length-1; i >= 0; i--) {
if (!res.data[i].id) {
res.data.splice(i,1);
}
}
zNodes.value = res.data
treeObj.value = $.fn.zTree.init($(selector), setting, zNodes.value)
console.log(res.data)
window.treeObj = treeObj.value
window.AllNodes = treeObj.value.getNodes()
initTreeCallBack()

23
src/renderer/src/views/components/tree/initMapData.ts
View File

@ -2,6 +2,12 @@ export const initMapData = async (type, data) => {
let entityObject
let options
switch (type) {
case 'groundText':
entityObject = new YJ.Obj.GroundText(window.earth, data)
break
case 'standText':
entityObject = new YJ.Obj.StandText(window.earth, data)
break
case 'point':
entityObject = new YJ.Obj.BillboardObject(window.earth, data)
break
@ -11,21 +17,22 @@ export const initMapData = async (type, data) => {
case 'curve':
entityObject = await new YJ.Obj.CurvelineObject(window.earth, data)
break
case 'polygon':
case 'panel':
case 'rectangle':
entityObject = new YJ.Obj.PolygonObject(window.earth, data)
break
case 'groundText':
entityObject = new YJ.Obj.GroundText(window.earth, data)
case 'rendezvous':
entityObject = new YJ.Obj.AssembleObject(window.earth, data)
break
case 'standText':
entityObject = new YJ.Obj.StandText(window.earth, data)
case 'attackArrow':
entityObject = new YJ.Obj.AttackArrowObject(window.earth, data)
break
case 'pincerArrow':
entityObject = new YJ.Obj.PincerArrowObject(window.earth, data)
break
case 'circle':
entityObject = new YJ.Obj.CircleObject(window.earth, data)
break
case 'rectangle':
entityObject = new YJ.Obj.RectangleObject(window.earth, data)
break
case 'ellipse':
entityObject = new YJ.Obj.EllipseObject(window.earth, data)
break

33
src/renderer/src/views/home/index.vue
View File

@ -24,7 +24,10 @@ import billboardObject from '../components/propertyBox/billboardObject.vue'
import polygonObject from '../components/propertyBox/polygonObject.vue'
import polylineObject from '../components/propertyBox/polylineObject.vue'
import curvelineObject from '../components/propertyBox/curvelineObject.vue'
import attackArrow from '../components/propertyBox/attackArrow.vue'
import richText from '../components/propertyBox/richText.vue'
import groundText from '../components/propertyBox/groundText.vue'
import standText from '../components/propertyBox/standText.vue'
import addDirectory from '@/components/dialog/directory.vue'
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
@ -32,23 +35,33 @@ import { GisApi } from '@/api/gisApi'
const firstMenuRef = ref(null)
const bottomMenuRef = ref(null)
const eventBus = inject("bus");
const eventBus: any = inject("bus");
let currentComponent = shallowRef()
let dynamicComponentRef = ref()
let addStandTextRef = ref()
let tree = ref()
eventBus.on("openDialog", async (sourceType: any, id: any) => {
switch (sourceType) {
case 'groundText':
case 'addGroundText':
currentComponent.value = addGroundText
await nextTick()
dynamicComponentRef.value?.open()
break;
case 'standText':
case 'groundText':
currentComponent.value = groundText
await nextTick()
dynamicComponentRef.value?.open()
break;
case 'addStandText':
currentComponent.value = addStandText
await nextTick()
dynamicComponentRef.value?.open()
break;
case 'standText':
currentComponent.value = standText
await nextTick()
dynamicComponentRef.value?.open()
break;
case 'point':
currentComponent.value = billboardObject
await nextTick()
@ -73,18 +86,30 @@ eventBus.on("openDialog", async (sourceType: any, id: any) => {
case 'circle':
break;
case 'rectangle':
currentComponent.value = polygonObject
await nextTick()
dynamicComponentRef.value?.open(id, 'rectangle')
break;
case 'rendezvous':
currentComponent.value = rendezvous
await nextTick()
dynamicComponentRef.value?.open(id, 'rendezvous')
break;
case 'attackArrow':
currentComponent.value = attackArrow
await nextTick()
dynamicComponentRef.value?.open(id, 'attackArrow')
break;
case 'pincerArrow':
currentComponent.value = attackArrow
await nextTick()
dynamicComponentRef.value?.open(id, 'pincerArrow')
break;
default:
break;
}
});
eventBus.on("destroyComponent",()=>{
eventBus.on("destroyComponent", () => {
currentComponent.value = undefined
})