|
|
|
|
@ -1,678 +0,0 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="annotationInfo">
|
|
|
|
|
<!-- 关闭按钮 -->
|
|
|
|
|
<div class="closeButton">
|
|
|
|
|
<CloseOutlined @click="closePathAnnotationInfo" style="font-size: 20px; color: white" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="annotationInfo_biaozhu_1">
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
<div class="annotationTitle">标注信息</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 标题名：点、线、形、圈 -->
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
<div class="annotationTitle">
|
|
|
|
|
<div class="annotationTitleButton_right">
|
|
|
|
|
<AntDesignOutlined
|
|
|
|
|
v-if="nowAnnotationData.type == 0"
|
|
|
|
|
:style="{ color: nowAnnotationData.properties.color }"
|
|
|
|
|
/>
|
|
|
|
|
<ExpandAltOutlined
|
|
|
|
|
v-if="nowAnnotationData.type == 1"
|
|
|
|
|
:style="{ color: nowAnnotationData.properties.color }"
|
|
|
|
|
/>
|
|
|
|
|
<BorderOutlined
|
|
|
|
|
v-if="nowAnnotationData.type == 2"
|
|
|
|
|
:style="{ color: nowAnnotationData.properties.color }"
|
|
|
|
|
/>
|
|
|
|
|
<LogoutOutlined
|
|
|
|
|
v-if="nowAnnotationData.type == 3"
|
|
|
|
|
:style="{ color: nowAnnotationData.properties.color }"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<a-input
|
|
|
|
|
v-model:value="nowAnnotationData.name"
|
|
|
|
|
style="width: 60%"
|
|
|
|
|
size="small"
|
|
|
|
|
></a-input>
|
|
|
|
|
<div class="annotationTitleButton" @click="handlerLocation">
|
|
|
|
|
<AimOutlined />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="annotationTitleButton" @click="deleteAnnotation">
|
|
|
|
|
<DeleteOutlined />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 颜色：点、线、形、圈 -->
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<div class="annotationTitle">颜色</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<div
|
|
|
|
|
class="popoverClass"
|
|
|
|
|
v-for="color in ['#2D8CF0', '#19BE6B', '#FF9900', '#E23C39', '#B620E0']"
|
|
|
|
|
:key="color"
|
|
|
|
|
:style="{ background: color }"
|
|
|
|
|
@click="nowAnnotationData.properties.color = color"
|
|
|
|
|
>
|
|
|
|
|
<CheckOutlined
|
|
|
|
|
v-if="nowAnnotationData.properties.color == color"
|
|
|
|
|
style="color: white"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 形态：线 -->
|
|
|
|
|
<a-col :span="6" v-if="nowAnnotationData.type == 1">
|
|
|
|
|
<div class="annotationTitle">形态</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="nowAnnotationData.type == 1">
|
|
|
|
|
<div class="annotationContent" style="gap: 5%">
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title> 线宽度 </template>
|
|
|
|
|
<a-input
|
|
|
|
|
v-model:value="nowAnnotationData.properties.line_width"
|
|
|
|
|
style="width: 30%"
|
|
|
|
|
@change="
|
|
|
|
|
nowAnnotationData.properties.line_width = parseFloat(
|
|
|
|
|
nowAnnotationData.properties.line_width.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<template #prefix><AlignLeftOutlined /></template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title> 线头部样式 </template>
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="nowAnnotationData.properties.line_start_cap"
|
|
|
|
|
style="width: 30%"
|
|
|
|
|
option-label-prop="children"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option :value="0">
|
|
|
|
|
<div class="svg-container" v-html="line_start_cap_0"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="1">
|
|
|
|
|
<div class="svg-container" v-html="line_start_cap_1"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="2">
|
|
|
|
|
<div class="svg-container" v-html="line_start_cap_2"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="3">
|
|
|
|
|
<div class="svg-container" v-html="line_start_cap_3"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title> 线尾部样式 </template>
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="nowAnnotationData.properties.line_end_cap"
|
|
|
|
|
style="width: 30%"
|
|
|
|
|
option-label-prop="children"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option :value="0">
|
|
|
|
|
<div class="svg-container" v-html="line_end_cap_0"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="1">
|
|
|
|
|
<div class="svg-container" v-html="line_end_cap_1"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="2">
|
|
|
|
|
<div class="svg-container" v-html="line_end_cap_2"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option :value="3">
|
|
|
|
|
<div class="svg-container" v-html="line_end_cap_3"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 图标：点 -->
|
|
|
|
|
<a-col :span="6" v-if="nowAnnotationData.type == 0">
|
|
|
|
|
<div class="annotationTitle">图标</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="nowAnnotationData.type == 0">
|
|
|
|
|
<div class="annotationContent"></div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 字体：点、线、形、圈 -->
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<div class="annotationTitle">字体</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-radio-group
|
|
|
|
|
v-model:value="nowAnnotationData.properties.font_size"
|
|
|
|
|
button-style="solid"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
<a-radio-button :value="16">小</a-radio-button>
|
|
|
|
|
<a-radio-button :value="24">中</a-radio-button>
|
|
|
|
|
<a-radio-button :value="32">大</a-radio-button>
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="border-bottom: 1px solid #ffffff55; margin-left: 15px; margin-right: 15px"></div>
|
|
|
|
|
<div class="annotationInfo_biaozhu_2">
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
<div class="annotationTitle">
|
|
|
|
|
测量数据
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
<template #title> 只能测量出当前视窗范围内的数据 </template>
|
|
|
|
|
<InfoCircleOutlined style="margin-left: 10px" />
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 经纬模式：点、圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[0, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">经纬模式</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[0, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-radio-group v-model:value="modalType">
|
|
|
|
|
<a-radio :value="0"><span style="color: white">十进制</span></a-radio>
|
|
|
|
|
<a-radio :value="1"><span style="color: white">度分秒</span></a-radio>
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 经度：点 -->
|
|
|
|
|
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">经度</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<!-- 十进制 -->
|
|
|
|
|
<a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[0]">
|
|
|
|
|
<template #addonAfter>
|
|
|
|
|
<span style="color: white">°</span>
|
|
|
|
|
</template>
|
|
|
|
|
</a-input>
|
|
|
|
|
<!-- 度分秒 -->
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_0.degrees"
|
|
|
|
|
style="max-width: 32px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_0.degrees = parseFloat(
|
|
|
|
|
decimalToDMS_0.degrees.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_0.minutes"
|
|
|
|
|
style="max-width: 30px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_0.minutes = parseFloat(
|
|
|
|
|
decimalToDMS_0.minutes.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_0.seconds"
|
|
|
|
|
style="width: 120px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_0.seconds = parseFloat(
|
|
|
|
|
decimalToDMS_0.seconds.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 纬度：点 -->
|
|
|
|
|
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">纬度</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<!-- 十进制 -->
|
|
|
|
|
<a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[1]">
|
|
|
|
|
<template #addonAfter>
|
|
|
|
|
<span style="color: white">°</span>
|
|
|
|
|
</template>
|
|
|
|
|
</a-input>
|
|
|
|
|
<!-- 度分秒 -->
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_1.degrees"
|
|
|
|
|
style="max-width: 32px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_1.degrees = parseFloat(
|
|
|
|
|
decimalToDMS_1.degrees.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_1.minutes"
|
|
|
|
|
style="max-width: 30px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_1.minutes = parseFloat(
|
|
|
|
|
decimalToDMS_1.minutes.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
|
|
|
|
|
<a-input
|
|
|
|
|
v-if="modalType == 1"
|
|
|
|
|
v-model:value="decimalToDMS_1.seconds"
|
|
|
|
|
style="width: 120px"
|
|
|
|
|
@change="
|
|
|
|
|
decimalToDMS_1.seconds = parseFloat(
|
|
|
|
|
decimalToDMS_1.seconds.toString().replace(/[^-0-9]/g, ''),
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 高度：点 -->
|
|
|
|
|
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">高度</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-input v-model:value="nowAnnotationData.coordinates[2]">
|
|
|
|
|
<template #addonAfter> <span style="color: white">m</span> </template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 圆心经度：圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">圆心经度</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-input v-model:value="nowAnnotationData.properties.centerPoint[0]">
|
|
|
|
|
<template #addonAfter> <span style="color: white">°</span> </template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 圆心纬度：圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">圆心纬度</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-input v-model:value="nowAnnotationData.properties.centerPoint[1]">
|
|
|
|
|
<template #addonAfter> <span style="color: white">°</span> </template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 水平半径：圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">水平半径</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-input v-model:value="nowAnnotationData.properties.radius">
|
|
|
|
|
<template #addonAfter> <span style="color: white">m</span> </template>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 水平面积：形状、圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">水平面积</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
|
|
|
|
|
{{ horizontalArea }}㎡
|
|
|
|
|
</span>
|
|
|
|
|
<span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
{{
|
|
|
|
|
(
|
|
|
|
|
Math.PI *
|
|
|
|
|
nowAnnotationData.properties.radius *
|
|
|
|
|
nowAnnotationData.properties.radius
|
|
|
|
|
).toFixed(2)
|
|
|
|
|
}}㎡
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 水平周长：形状、圈 -->
|
|
|
|
|
<a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">水平周长</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
|
|
|
|
|
{{ horizontalPerimeter }}m
|
|
|
|
|
</span>
|
|
|
|
|
<span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
|
|
|
|
|
{{ (2 * Math.PI * nowAnnotationData.properties.radius).toFixed(1) }}
|
|
|
|
|
m
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 水平距离：线 -->
|
|
|
|
|
<a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">水平距离</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white; gap: 10px"> {{ horizontalDistance }}m </span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 直线距离：线 -->
|
|
|
|
|
<a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">直线距离</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white; gap: 10px"> {{ linearDistance }}m </span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 高度差：线、形 -->
|
|
|
|
|
<a-col :span="6" v-if="[1, 2].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationTitle">高度差</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18" v-if="[1, 2].includes(nowAnnotationData.type)">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white; gap: 10px" v-if="[1, 2].includes(nowAnnotationData.type)">
|
|
|
|
|
{{ heightDiff }}m
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 简介：点、线、形、圈 -->
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<div class="annotationTitle">简介</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<a-textarea
|
|
|
|
|
v-model:value="nowAnnotationData.remark"
|
|
|
|
|
:rows="4"
|
|
|
|
|
:maxlength="10"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
allow-clear
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 绘制者：点、线、形、圈 -->
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<div class="annotationTitle">绘制者</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="18">
|
|
|
|
|
<div class="annotationContent">
|
|
|
|
|
<span style="color: white">{{ nowAnnotationData.createUserName }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, watch, computed, onMounted } from 'vue';
|
|
|
|
|
import * as mars3d from 'mars3d';
|
|
|
|
|
import * as Cesium from 'mars3d-cesium';
|
|
|
|
|
import {
|
|
|
|
|
line_start_cap_0,
|
|
|
|
|
line_start_cap_1,
|
|
|
|
|
line_start_cap_2,
|
|
|
|
|
line_start_cap_3,
|
|
|
|
|
line_end_cap_0,
|
|
|
|
|
line_end_cap_1,
|
|
|
|
|
line_end_cap_2,
|
|
|
|
|
line_end_cap_3,
|
|
|
|
|
} from './svg';
|
|
|
|
|
import {
|
|
|
|
|
CloseOutlined,
|
|
|
|
|
DeleteOutlined,
|
|
|
|
|
CheckOutlined,
|
|
|
|
|
AimOutlined,
|
|
|
|
|
AlignLeftOutlined,
|
|
|
|
|
InfoCircleOutlined,
|
|
|
|
|
AntDesignOutlined,
|
|
|
|
|
ExpandAltOutlined,
|
|
|
|
|
BorderOutlined,
|
|
|
|
|
LogoutOutlined,
|
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
|
|
|
|
|
|
let map: mars3d.Map;
|
|
|
|
|
const props = defineProps(['allAnnotationDataList', 'nowShowAnnotationData']);
|
|
|
|
|
const emits = defineEmits([
|
|
|
|
|
'setNowShowAnnotationData',
|
|
|
|
|
'closePathAnnotationInfo',
|
|
|
|
|
'handlerLocation',
|
|
|
|
|
'deleteAnnotation',
|
|
|
|
|
]);
|
|
|
|
|
const nowAnnotationData: any = ref(props.nowShowAnnotationData);
|
|
|
|
|
// 经纬模式
|
|
|
|
|
const modalType = ref<number>(0);
|
|
|
|
|
// 度分秒-经度
|
|
|
|
|
const decimalToDMS_0 = ref({
|
|
|
|
|
degrees: 0,
|
|
|
|
|
minutes: 0,
|
|
|
|
|
seconds: 0,
|
|
|
|
|
});
|
|
|
|
|
// 度分秒-纬度
|
|
|
|
|
const decimalToDMS_1 = ref({
|
|
|
|
|
degrees: 0,
|
|
|
|
|
minutes: 0,
|
|
|
|
|
seconds: 0,
|
|
|
|
|
});
|
|
|
|
|
watch(
|
|
|
|
|
() => modalType.value,
|
|
|
|
|
(newValue) => {
|
|
|
|
|
if (newValue == 0) {
|
|
|
|
|
// 度分秒-经度 → 十进制-经度
|
|
|
|
|
let { degrees, minutes, seconds } = decimalToDMS_0.value;
|
|
|
|
|
let decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
|
|
|
|
|
nowAnnotationData.value.coordinates[0] = decimal;
|
|
|
|
|
// 度分秒-纬度 → 十进制-纬度
|
|
|
|
|
degrees = decimalToDMS_1.value.degrees;
|
|
|
|
|
minutes = decimalToDMS_1.value.minutes;
|
|
|
|
|
seconds = decimalToDMS_1.value.seconds;
|
|
|
|
|
decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
|
|
|
|
|
nowAnnotationData.value.coordinates[1] = decimal;
|
|
|
|
|
}
|
|
|
|
|
if (newValue == 1) {
|
|
|
|
|
// 十进制-经度 → 度分秒-经度
|
|
|
|
|
const decimal1 = nowAnnotationData.value.coordinates[0];
|
|
|
|
|
const degrees1 = Math.floor(decimal1);
|
|
|
|
|
const minutesFull1 = (decimal1 - degrees1) * 60;
|
|
|
|
|
const minutes1 = Math.floor(minutesFull1);
|
|
|
|
|
const seconds1 = parseFloat((minutesFull1 - minutes1) * 60);
|
|
|
|
|
decimalToDMS_0.value = {
|
|
|
|
|
degrees: degrees1,
|
|
|
|
|
minutes: minutes1,
|
|
|
|
|
seconds: seconds1,
|
|
|
|
|
};
|
|
|
|
|
// 十进制-纬度 → 度分秒-纬度
|
|
|
|
|
const decimal2 = nowAnnotationData.value.coordinates[1];
|
|
|
|
|
const degrees2 = Math.floor(decimal2);
|
|
|
|
|
const minutesFull2 = (decimal2 - degrees2) * 60;
|
|
|
|
|
const minutes2 = Math.floor(minutesFull2);
|
|
|
|
|
const seconds2 = parseFloat((minutesFull2 - minutes2) * 60);
|
|
|
|
|
decimalToDMS_1.value = {
|
|
|
|
|
degrees: degrees2,
|
|
|
|
|
minutes: minutes2,
|
|
|
|
|
seconds: seconds2,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 关闭
|
|
|
|
|
function closePathAnnotationInfo() {
|
|
|
|
|
emits('closePathAnnotationInfo');
|
|
|
|
|
}
|
|
|
|
|
// 移动到中心位置
|
|
|
|
|
function handlerLocation() {
|
|
|
|
|
emits('handlerLocation', {
|
|
|
|
|
lng: props.nowShowAnnotationData.properties.centerPoint[0],
|
|
|
|
|
lat: props.nowShowAnnotationData.properties.centerPoint[1],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 删除此标注
|
|
|
|
|
function deleteAnnotation() {
|
|
|
|
|
emits('deleteAnnotation', props.nowShowAnnotationData);
|
|
|
|
|
}
|
|
|
|
|
// 线-直线距离
|
|
|
|
|
const linearDistance: any = ref();
|
|
|
|
|
// 线-水平距离
|
|
|
|
|
const horizontalDistance: any = ref();
|
|
|
|
|
// 圆-水平面积
|
|
|
|
|
const horizontalArea: any = ref();
|
|
|
|
|
// 圆-水平周长
|
|
|
|
|
const horizontalPerimeter: any = ref();
|
|
|
|
|
// 高度差
|
|
|
|
|
const heightDiff: any = ref();
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => nowAnnotationData.value,
|
|
|
|
|
() => {
|
|
|
|
|
emits('setNowShowAnnotationData', nowAnnotationData.value, false);
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
watch(
|
|
|
|
|
() => props.nowShowAnnotationData,
|
|
|
|
|
() => {
|
|
|
|
|
nowAnnotationData.value = props.nowShowAnnotationData;
|
|
|
|
|
// 线
|
|
|
|
|
if (nowAnnotationData.value.type == 1) {
|
|
|
|
|
// 直线距离
|
|
|
|
|
linearDistance.value = mars3d.MeasureUtil.getDistance(
|
|
|
|
|
nowAnnotationData.value.coordinates,
|
|
|
|
|
).toFixed(2);
|
|
|
|
|
// 水平距离
|
|
|
|
|
horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance(
|
|
|
|
|
nowAnnotationData.value.coordinates,
|
|
|
|
|
).toFixed(2);
|
|
|
|
|
// 高度差
|
|
|
|
|
let heightlist: any = [];
|
|
|
|
|
nowAnnotationData.value.coordinates.forEach((item) => {
|
|
|
|
|
heightlist.push(item[2]);
|
|
|
|
|
});
|
|
|
|
|
heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
|
|
|
|
|
}
|
|
|
|
|
// 多边形
|
|
|
|
|
if (nowAnnotationData.value.type == 2) {
|
|
|
|
|
// 水平面积
|
|
|
|
|
horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea(
|
|
|
|
|
nowAnnotationData.value.coordinates[0],
|
|
|
|
|
).toFixed(2);
|
|
|
|
|
// 水平周长
|
|
|
|
|
horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance(
|
|
|
|
|
nowAnnotationData.value.coordinates[0],
|
|
|
|
|
).toFixed(2);
|
|
|
|
|
// 高度差
|
|
|
|
|
let heightlist: any = [];
|
|
|
|
|
nowAnnotationData.value.coordinates[0].forEach((item) => {
|
|
|
|
|
heightlist.push(item[2]);
|
|
|
|
|
});
|
|
|
|
|
heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
onMounted(() => {});
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.annotationInfo {
|
|
|
|
|
// 页面不能被选中
|
|
|
|
|
-webkit-user-select: none; /* Safari */
|
|
|
|
|
-moz-user-select: none; /* Firefox */
|
|
|
|
|
-ms-user-select: none; /* IE/Edge */
|
|
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #232323;
|
|
|
|
|
|
|
|
|
|
.annotationInfo_biaozhu_1 {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
.annotationInfo_biaozhu_2 {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
height: 650px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 关闭按钮
|
|
|
|
|
.closeButton {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 30px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.annotationTitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
min-height: 45px;
|
|
|
|
|
height: auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.annotationTitleButton_right {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
.annotationTitleButton {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.annotationContent {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
min-height: 45px;
|
|
|
|
|
height: auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popoverClass {
|
|
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svg-container {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .annotationContent .ant-input {
|
|
|
|
|
padding: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .annotationContent .ant-select-selection-item {
|
|
|
|
|
height: 20px !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
