合并
This commit is contained in:
@ -196,6 +196,32 @@ const bottomMenuList = ref([
|
||||
key: 'DrawCircle',
|
||||
sourceType: 'circle',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
let Draw = new YJ.Draw.DrawCircle(window.earth)
|
||||
Draw.start(async (a, opt) => {
|
||||
// let id = new YJ.Tools().randomString()
|
||||
let id = 'aaa'
|
||||
let name = '圆'
|
||||
let options: any = await initMapData('circle', {
|
||||
id: id,
|
||||
name: name,
|
||||
center: opt.center, radius: opt.radius
|
||||
})
|
||||
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "circle",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
}
|
||||
console.log(params)
|
||||
// eventBus.emit("openDialog", 'circle');
|
||||
TreeApi.addOtherSource(params)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '矩形',
|
||||
|
||||
336
src/renderer/src/views/components/propertyBox/CircleObject.vue
Normal file
336
src/renderer/src/views/components/propertyBox/CircleObject.vue
Normal file
@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<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="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>
|
||||
<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">
|
||||
<div class="td">圆心坐标</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, 1, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="entityOptions.center.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="entityOptions.center.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 center = ref({})
|
||||
const heightMode = ref(0)
|
||||
const entityOptions: any = ref({});
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
const open = async (id: any, type: any) => {
|
||||
that = window.earth.entityMap.get('aaa')
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
area.value = entityOptions.value.areaByMeter
|
||||
center.value = structuredClone(that.options.center)
|
||||
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 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 = () => {
|
||||
that.openPositionEditing(() => {
|
||||
entityOptions.value.options.center = structuredClone(that.options.center)
|
||||
})
|
||||
}
|
||||
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit("destroyComponent")
|
||||
}
|
||||
|
||||
const nodeEdit = () => {
|
||||
that.nodeEdit((e, center, areaByMeter) => {
|
||||
entityOptions.value.options.center = structuredClone(center)
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -84,6 +84,9 @@ eventBus.on("openDialog", async (sourceType: any, id: any) => {
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break;
|
||||
case 'circle':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'circle')
|
||||
break;
|
||||
case 'rectangle':
|
||||
currentComponent.value = polygonObject
|
||||
|
||||
Reference in New Issue
Block a user