地图图片历史路径-文件修改后同步修改地图
parent
3859ba2df3
commit
d00b61e177
|
|
@ -84,22 +84,50 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>重命名</span>
|
||||
</template>
|
||||
<a-button type="text">
|
||||
<EditOutlined @click="renameRecord(record)" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>查看地图图片历史路径</span>
|
||||
</template>
|
||||
<a-button type="text" v-if="record.objectKey">
|
||||
<BorderInnerOutlined @click="openPathModal(record)" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<div class="svg-container">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>重命名</span>
|
||||
</template>
|
||||
<a-button type="text">
|
||||
<EditOutlined @click="renameRecord(record)" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>查看地图图片历史路径</span>
|
||||
</template>
|
||||
<a-button
|
||||
type="text"
|
||||
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
|
||||
>
|
||||
<BorderInnerOutlined @click="openPathModal(record)" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ record.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<a-button
|
||||
type="text"
|
||||
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
|
||||
@click="funShowOnMap(record)"
|
||||
>
|
||||
<div
|
||||
v-if="record.showOnMap == 1"
|
||||
class="svg-container"
|
||||
v-html="svg_showOnMap_1"
|
||||
/>
|
||||
<div
|
||||
v-if="record.showOnMap != 1"
|
||||
class="svg-container"
|
||||
v-html="svg_showOnMap_0"
|
||||
/>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -255,12 +283,9 @@
|
|||
import Preview from './preview/index.vue';
|
||||
import Comparison from './comparison/index.vue';
|
||||
import Path from './path/index.vue';
|
||||
import { AddFolderModal } from './modal/modal';
|
||||
import { MoveFileModal } from './modal/modal';
|
||||
import { CompressFileModal } from './modal/modal';
|
||||
import { RenameModal } from './modal/modal';
|
||||
import { AddFolderModal, MoveFileModal, CompressFileModal, RenameModal } from './modal/modal';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './modal.data';
|
||||
import { columns, searchFormSchema, svg_showOnMap_0, svg_showOnMap_1 } from './modal.data';
|
||||
import dayjs from 'dayjs';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
|
|
@ -275,6 +300,7 @@
|
|||
watch(
|
||||
() => tableType.value,
|
||||
(newval) => {
|
||||
showTableData.value = getDataSource();
|
||||
// 表格
|
||||
const containers = document.querySelectorAll('.ant-table-container');
|
||||
if (newval) {
|
||||
|
|
@ -424,8 +450,9 @@
|
|||
nowParentKey.value = f.id;
|
||||
floders.value = floders.value.splice(0, index + 1);
|
||||
clearSelectedRowKeys();
|
||||
reload();
|
||||
showTableData.value = getDataSource();
|
||||
reload().then((res) => {
|
||||
showTableData.value = res;
|
||||
});
|
||||
}
|
||||
// 图片获取路径
|
||||
function getImgurl(url) {
|
||||
|
|
@ -549,6 +576,23 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 加载到地图上
|
||||
function funShowOnMap(record) {
|
||||
UpdatePicStatus({
|
||||
id: record.id,
|
||||
fileTags: record.fileTags,
|
||||
graffitiJson: record.graffitis,
|
||||
display: record.display,
|
||||
showOnMap: record.showOnMap == 1 ? 0 : 1,
|
||||
}).then((res) => {
|
||||
if (record.showOnMap == 1) {
|
||||
createMessage.success('在地图上取消加载成功');
|
||||
} else {
|
||||
createMessage.success('在地图上加载成功');
|
||||
}
|
||||
reload();
|
||||
});
|
||||
}
|
||||
// 查看弹窗----------------------------------------------------------------------------
|
||||
const open = ref(false);
|
||||
// 目前展示图片
|
||||
|
|
@ -563,7 +607,9 @@
|
|||
id: nowParentKey.value,
|
||||
name: record.name,
|
||||
});
|
||||
reload();
|
||||
reload().then((res) => {
|
||||
showTableData.value = res;
|
||||
});
|
||||
} else {
|
||||
GetMediaFile({
|
||||
...searchParams.value,
|
||||
|
|
@ -683,6 +729,7 @@
|
|||
function handleSuccessPath() {
|
||||
setTimeout(() => {
|
||||
openPathModal(nowShowImageData.value);
|
||||
reload();
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -763,6 +810,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .vben-basic-table {
|
||||
height: fit-content !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -201,4 +201,30 @@ export const renameSchema: FormSchema[] = [
|
|||
label: '新名称',
|
||||
required: true,
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
export const svg_showOnMap_1 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#000000"
|
||||
></path>
|
||||
</svg>`;
|
||||
|
||||
export const svg_showOnMap_0 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#000000"
|
||||
></path>
|
||||
</svg>`;
|
||||
|
|
@ -22,13 +22,16 @@
|
|||
});
|
||||
|
||||
// 上级文件夹的id
|
||||
let id = ref();
|
||||
const id = ref();
|
||||
const recordData: any = ref({});
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
recordData.value = data.record;
|
||||
id.value = data.record?.id;
|
||||
let editName: any = recordData.value.name.split('.').slice(0, -1).join('.');
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
name: editName,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -36,9 +39,15 @@
|
|||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
let newName = '';
|
||||
if (recordData.value.name.split('.').length <= 1) {
|
||||
newName = values.name;
|
||||
} else {
|
||||
newName = values.name + '.' + recordData.value.name.split('.').pop();
|
||||
}
|
||||
let query = {
|
||||
id: id.value,
|
||||
name: values.name,
|
||||
name: newName,
|
||||
};
|
||||
UpdatePicName(query).then((res) => {
|
||||
emits('handleSuccess');
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
@closePathModal="closePathModal"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@handleSuccessPath="handleSuccessPath"
|
||||
@funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
:nowShowImageData="nowShowImageData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@setAllImageData="setAllImageData"
|
||||
:updateDisplayOrShowOnMapData="updateDisplayOrShowOnMapData"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图照片 -->
|
||||
|
|
@ -37,6 +39,7 @@
|
|||
@setNowShowImageData="setNowShowImageData"
|
||||
@handlerLocation="handlerLocation"
|
||||
@handleSuccessPath="handleSuccessPath"
|
||||
@funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,6 +81,11 @@
|
|||
// 当前展示的图片
|
||||
const nowShowImageData = ref();
|
||||
const allImageDataList = ref();
|
||||
// 修改display或者showOnMap
|
||||
const updateDisplayOrShowOnMapData = ref();
|
||||
function funUpdateDisplayOrShowOnMapData(value) {
|
||||
updateDisplayOrShowOnMapData.value = value;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.nowShowImageData,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
export { default as PathLeftMenu } from './pathLeftMenu.vue';
|
||||
export { default as PathMap } from './pathMap.vue';
|
||||
export { default as PathImageInfo } from './pathImageInfo.vue';
|
||||
export { default as PathAnnotationInfo } from './pathAnnotationInfo.vue';
|
||||
export { default as PathAreaInfo } from './pathAreaInfo.vue';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,373 +0,0 @@
|
|||
<template>
|
||||
<div class="areaInfo">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div class="annotationTitle"> 自定义飞行区 </div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="annotationTitle">
|
||||
<!-- 自定义禁降区 -->
|
||||
<div
|
||||
v-if="props.nowShowAreaData.type == 'noland'"
|
||||
:style="{
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
outline: `2px solid #FF9900`,
|
||||
'margin-left': '2px',
|
||||
'margin-right': '12px',
|
||||
}"
|
||||
/>
|
||||
<!-- 自定义作业区 -->
|
||||
<div
|
||||
v-if="props.nowShowAreaData.type == 'dfence'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid #00FF00`,
|
||||
'margin-left': '2px',
|
||||
'margin-right': '12px',
|
||||
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||
}"
|
||||
/>
|
||||
<!-- 自定义限飞区 -->
|
||||
<div
|
||||
v-if="props.nowShowAreaData.type == 'nfz'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid #FF0000`,
|
||||
background: `#FF000055`,
|
||||
'margin-left': '2px',
|
||||
'margin-right': '12px',
|
||||
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||
}"
|
||||
/>
|
||||
<a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
|
||||
<div class="annotationTitleButton" @click="handlerLocation">
|
||||
<AimOutlined />
|
||||
</div>
|
||||
<div class="annotationTitleButton" @click="deleteArea">
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'noland'">
|
||||
自定义作业区绘制后，飞行器只能在该区域内飞行
|
||||
</div>
|
||||
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
|
||||
自定义禁降区绘制后，飞行器不能在绘制区域内自动降落
|
||||
</div>
|
||||
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
|
||||
自定义作业区绘制后，飞行器只能在该区域内飞行
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="annotationTitle"> 更多信息 </div>
|
||||
</a-col>
|
||||
<!-- 启用状态 -->
|
||||
<a-col :span="6">
|
||||
<div class="annotationTitle">启用状态</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="annotationContent">
|
||||
{{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
|
||||
</div>
|
||||
</a-col>
|
||||
<!-- 水平周长 -->
|
||||
<a-col :span="6">
|
||||
<div class="annotationTitle">水平周长</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="annotationContent"> {{ length.toFixed(2) }}m</div>
|
||||
</a-col>
|
||||
<!-- 水平面积 -->
|
||||
<a-col :span="6">
|
||||
<div class="annotationTitle">水平面积</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
|
||||
</a-col>
|
||||
<!-- 半径 -->
|
||||
<a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
|
||||
<div class="annotationTitle">半径</div>
|
||||
</a-col>
|
||||
<a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
|
||||
<div class="annotationContent">
|
||||
<a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
|
||||
<template #addonAfter> <span style="color: white">m</span> </template>
|
||||
</a-input>
|
||||
</div>
|
||||
</a-col>
|
||||
<!-- 绘制者 -->
|
||||
<a-col :span="6">
|
||||
<div class="annotationTitle">绘制者</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="annotationContent"> {{ props.nowShowAreaData.createdUser }}</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div class="area_buttons">
|
||||
<div class="cancelDiv" @click="closePathAreaInfo">取消</div>
|
||||
<div class="startDiv" :class="{ disabled: props.nowShowAreaData }">确认</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
import {
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
AimOutlined,
|
||||
AlignLeftOutlined,
|
||||
InfoCircleOutlined,
|
||||
AntDesignOutlined,
|
||||
ExpandAltOutlined,
|
||||
BorderOutlined,
|
||||
LogoutOutlined,
|
||||
MinusOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
GetWorkAreaList,
|
||||
AddWorkArea,
|
||||
UpdateWorkArea,
|
||||
DeleteWorkArea,
|
||||
} from '@/api/demo/mediaLibrary';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
|
||||
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
|
||||
const emits = defineEmits([
|
||||
'setNowShowAreaData',
|
||||
'closePathAreaInfo',
|
||||
'handlerLocation',
|
||||
'deleteArea',
|
||||
]);
|
||||
const nowAreaData: any = ref(props.nowShowAreaData);
|
||||
|
||||
// 关闭
|
||||
function closePathAreaInfo() {
|
||||
emits('closePathAreaInfo');
|
||||
}
|
||||
// 移动到中心位置
|
||||
function handlerLocation() {
|
||||
emits('handlerLocation', {
|
||||
lng: props.nowShowAreaData.properties.centerPoint[0],
|
||||
lat: props.nowShowAreaData.properties.centerPoint[1],
|
||||
});
|
||||
}
|
||||
// 删除此区域
|
||||
function deleteArea() {
|
||||
createConfirm({
|
||||
iconType: 'info',
|
||||
title: '提示',
|
||||
content: '将会影响到项目内设备的作业范围，是否删除该区域？',
|
||||
onOk: async () => {
|
||||
emits('deleteArea', props.nowShowAreaData);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 水平周长和水平面积
|
||||
const length: any = ref();
|
||||
const area: any = ref();
|
||||
|
||||
watch(
|
||||
() => nowAreaData.value,
|
||||
() => {
|
||||
emits('setNowShowAreaData', nowAreaData.value, false);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.nowShowAreaData,
|
||||
() => {
|
||||
nowAreaData.value = props.nowShowAreaData;
|
||||
if (props.nowShowAreaData.geomtype == 'Polygon') {
|
||||
// 水平距离
|
||||
length.value = mars3d.MeasureUtil.getDistance(nowAreaData.value.coordinates[0]);
|
||||
// 水平面积
|
||||
area.value = mars3d.MeasureUtil.getArea(nowAreaData.value.coordinates[0]);
|
||||
}
|
||||
if (props.nowShowAreaData.geomtype == 'Circle') {
|
||||
// 水平距离
|
||||
length.value = 2 * Math.PI * parseFloat(nowAreaData.value.properties.radius);
|
||||
// 水平面积
|
||||
area.value =
|
||||
Math.PI *
|
||||
parseFloat(nowAreaData.value.properties.radius) *
|
||||
parseFloat(nowAreaData.value.properties.radius);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.areaInfo {
|
||||
// 页面不能被选中
|
||||
-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;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.annotationButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 45px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.annotationPrompt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 45px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
color: #ffffff55;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #3c3c3c;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
background: #5d5f61;
|
||||
}
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.numDiv {
|
||||
width: calc(80% - 70px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.numSpan {
|
||||
color: #2d8cf0;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #2d8cf0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 取消和开始检测按钮
|
||||
.area_buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #ffffff55;
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
gap: 20px;
|
||||
|
||||
.cancelDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #3c3c3c;
|
||||
color: #ffffff;
|
||||
width: 40%;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background: #5d5f61;
|
||||
}
|
||||
}
|
||||
|
||||
.startDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0960bd;
|
||||
color: #ffffff;
|
||||
width: 40%;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background: #2a7dc9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -445,46 +445,55 @@
|
|||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 加载到地图上 -->
|
||||
<div class="button2" @click="funShowOnMap">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ props.nowShowImageData.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<svg
|
||||
v-if="props.nowShowImageData.showOnMap == 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="props.nowShowImageData.showOnMap != 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</a-tooltip>
|
||||
<div class="button2">
|
||||
<a-popconfirm
|
||||
placement="top"
|
||||
title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="funShowOnMap"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ props.nowShowImageData.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<svg
|
||||
v-if="props.nowShowImageData.showOnMap == 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="props.nowShowImageData.showOnMap != 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="25"
|
||||
height="25"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imageChooseList">
|
||||
<div v-for="li in props.allImageDataList" :key="li.id" @click="setNowShowImageData(li)">
|
||||
<div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
|
||||
<img
|
||||
v-if="li.display == 1 && li.showOnMap == 1"
|
||||
:src="
|
||||
li.preview_url
|
||||
? li.preview_url
|
||||
|
|
@ -497,7 +506,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签弹窗 -->
|
||||
<a-modal
|
||||
title="标签设置"
|
||||
|
|
@ -592,6 +600,7 @@
|
|||
'closePathImageInfo',
|
||||
'handleSuccessPath',
|
||||
'handlerLocation',
|
||||
'funUpdateDisplayOrShowOnMapData',
|
||||
]);
|
||||
|
||||
// 图片获取路径
|
||||
|
|
@ -630,6 +639,7 @@
|
|||
props.nowShowImageData.name = newName;
|
||||
editNameFlag.value = true;
|
||||
createMessage.success(res);
|
||||
emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
|
||||
emits('handleSuccessPath');
|
||||
});
|
||||
}
|
||||
|
|
@ -645,7 +655,7 @@
|
|||
|
||||
// 上一张、下一张图片--------------------------------------------------------------
|
||||
function clickLeftOrRightButton(direction) {
|
||||
const list = props.allImageDataList;
|
||||
const list = props.allImageDataList.filter((item) => item.display == 1 && item.showOnMap == 1);
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
if (list[index].id == props.nowShowImageData.id) {
|
||||
if (direction == 'left') {
|
||||
|
|
@ -781,6 +791,7 @@
|
|||
} else {
|
||||
createMessage.success('在地图上取消加载成功');
|
||||
}
|
||||
emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
|
||||
emits('handleSuccessPath');
|
||||
});
|
||||
}
|
||||
|
|
@ -1058,37 +1069,37 @@
|
|||
//------------------------------------------------------------------------
|
||||
// 鼠标聚焦
|
||||
function mouseenter(rect, type) {
|
||||
if (rect.status != 'edit') {
|
||||
rect.status = 'mouse';
|
||||
document.body.style.cursor = 'pointer';
|
||||
}
|
||||
if (rect.status == 'edit') {
|
||||
if (type == 'top' || type == 'bottom') {
|
||||
document.body.style.cursor = 'ns-resize';
|
||||
}
|
||||
if (type == 'left' || type == 'right') {
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
}
|
||||
if (type == 'leftTop' || type == 'rightBottom') {
|
||||
document.body.style.cursor = 'nwse-resize';
|
||||
}
|
||||
if (type == 'leftBottom' || type == 'rightTop') {
|
||||
document.body.style.cursor = 'nesw-resize';
|
||||
}
|
||||
}
|
||||
// if (rect.status != 'edit') {
|
||||
// rect.status = 'mouse';
|
||||
// document.body.style.cursor = 'pointer';
|
||||
// }
|
||||
// if (rect.status == 'edit') {
|
||||
// if (type == 'top' || type == 'bottom') {
|
||||
// document.body.style.cursor = 'ns-resize';
|
||||
// }
|
||||
// if (type == 'left' || type == 'right') {
|
||||
// document.body.style.cursor = 'ew-resize';
|
||||
// }
|
||||
// if (type == 'leftTop' || type == 'rightBottom') {
|
||||
// document.body.style.cursor = 'nwse-resize';
|
||||
// }
|
||||
// if (type == 'leftBottom' || type == 'rightTop') {
|
||||
// document.body.style.cursor = 'nesw-resize';
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// 鼠标离开
|
||||
function mouseleave(rect) {
|
||||
if (rect.status == 'mouse' || rect.status == 'edit') {
|
||||
if (rect.status == 'mouse') {
|
||||
rect.status = 'success';
|
||||
}
|
||||
if (graffitiFlag.value) {
|
||||
document.body.style.cursor = 'crosshair';
|
||||
} else {
|
||||
document.body.style.cursor = 'pointer';
|
||||
}
|
||||
}
|
||||
// if (rect.status == 'mouse' || rect.status == 'edit') {
|
||||
// if (rect.status == 'mouse') {
|
||||
// rect.status = 'success';
|
||||
// }
|
||||
// if (graffitiFlag.value) {
|
||||
// document.body.style.cursor = 'crosshair';
|
||||
// } else {
|
||||
// document.body.style.cursor = 'pointer';
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// 编辑状态下的鼠标按下
|
||||
const mouseEditType = ref('');
|
||||
|
|
@ -1264,7 +1275,7 @@
|
|||
.imageChooseList {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// justify-content: center;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
width: 80%;
|
||||
|
|
|
|||
|
|
@ -105,43 +105,25 @@
|
|||
</template>
|
||||
<AimOutlined @click="handlerLocation(show)" />
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<svg
|
||||
v-if="show.showOnMap == 1"
|
||||
@click="funShowOnMapOrDisplay(show, 'showOnMap')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="show.showOnMap != 1"
|
||||
@click="funShowOnMapOrDisplay(show, 'showOnMap')"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-popconfirm
|
||||
placement="right"
|
||||
title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="funShowOnMapOrDisplay(show, 'showOnMap')"
|
||||
>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>
|
||||
{{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
|
||||
</span>
|
||||
</template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div v-if="show.showOnMap == 1" class="svg-container" v-html="showOnMap_1" />
|
||||
<div v-if="show.showOnMap != 1" class="svg-container" v-html="showOnMap_0" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -181,6 +163,7 @@
|
|||
CheckCircleOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { showOnMap_1, showOnMap_0 } from './svg';
|
||||
import {
|
||||
UpdatePicStatus,
|
||||
Deletepic,
|
||||
|
|
@ -198,6 +181,7 @@
|
|||
'closePathModal',
|
||||
'setNowShowImageData',
|
||||
'handleSuccessPath',
|
||||
'funUpdateDisplayOrShowOnMapData',
|
||||
]);
|
||||
const showMenuInfoList = ref(props.allImageDataList);
|
||||
const showMenuInfoName = ref('地图照片');
|
||||
|
|
@ -227,35 +211,6 @@
|
|||
const tagSelect = ref([]);
|
||||
const tagOptions: any = ref([]);
|
||||
|
||||
watch(
|
||||
() => props.allImageDataList,
|
||||
() => {
|
||||
filterAfterImageDataList.value = props.allImageDataList;
|
||||
// 标签选项
|
||||
let tagList: any = [];
|
||||
tagOptions.value = [];
|
||||
props.allImageDataList.forEach((item) => {
|
||||
if (item.fileTags && item.fileTags.length > 0) {
|
||||
item.fileTags.forEach((tag) => {
|
||||
if (!tagList.includes(tag)) {
|
||||
tagList.push(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
tagList.forEach((tag) => {
|
||||
tagOptions.value.push({
|
||||
value: tag,
|
||||
label: tag,
|
||||
});
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
// 图片类型
|
||||
const imageTypeSelect = ref([]);
|
||||
const imageOptions: any = ref([
|
||||
|
|
@ -283,7 +238,8 @@
|
|||
// 按照媒体名称搜索
|
||||
const searchValue = ref('');
|
||||
function handleChangeImageSearch() {
|
||||
let filterImageData = props.allImageDataList;
|
||||
// let filterImageData = props.allImageDataList;
|
||||
let filterImageData = props.allImageDataList.filter((item) => item.showOnMap == 1);
|
||||
// 标签筛选
|
||||
if (tagSelect.value.length > 0) {
|
||||
tagSelect.value.forEach((tag) => {
|
||||
|
|
@ -304,9 +260,38 @@
|
|||
showMenuInfoList.value = filterAfterImageDataList.value;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.allImageDataList,
|
||||
() => {
|
||||
filterAfterImageDataList.value = props.allImageDataList;
|
||||
// 标签选项
|
||||
let tagList: any = [];
|
||||
tagOptions.value = [];
|
||||
props.allImageDataList.forEach((item) => {
|
||||
if (item.fileTags && item.fileTags.length > 0) {
|
||||
item.fileTags.forEach((tag) => {
|
||||
if (!tagList.includes(tag)) {
|
||||
tagList.push(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
tagList.forEach((tag) => {
|
||||
tagOptions.value.push({
|
||||
value: tag,
|
||||
label: tag,
|
||||
});
|
||||
});
|
||||
handleChangeImageSearch();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
// 加载到地图上
|
||||
function funShowOnMapOrDisplay(show, type) {
|
||||
console.log(show.showOnMap);
|
||||
if (type == 'showOnMap') {
|
||||
if (show.showOnMap == 1) {
|
||||
show.showOnMap = 0;
|
||||
|
|
@ -336,6 +321,7 @@
|
|||
}
|
||||
}
|
||||
emits('handleSuccessPath');
|
||||
emits('funUpdateDisplayOrShowOnMapData', show);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -475,4 +461,9 @@
|
|||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.svg-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
import { ref, watch, onMounted, defineEmits } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
import { circle, rect, triangle } from './svg';
|
||||
import {
|
||||
CheckOutlined,
|
||||
AntDesignOutlined,
|
||||
|
|
@ -23,36 +22,16 @@
|
|||
AddWorkArea,
|
||||
UpdateWorkArea,
|
||||
} from '@/api/demo/mediaLibrary';
|
||||
import {
|
||||
locateBack,
|
||||
defaultIcon,
|
||||
fireIcon,
|
||||
peopleIcon,
|
||||
warnIcon,
|
||||
carIcon,
|
||||
checkIcon,
|
||||
closeIcon,
|
||||
} from './svg';
|
||||
import * as turf from '@turf/turf';
|
||||
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const props = defineProps([
|
||||
'allAnnotationDataList',
|
||||
'nowShowAnnotationData',
|
||||
'allImageDataList',
|
||||
'nowShowImageData',
|
||||
'allAreaDataList',
|
||||
'nowShowAreaData',
|
||||
]);
|
||||
const emits = defineEmits([
|
||||
'setNowShowAnnotationData',
|
||||
'setNowShowImageData',
|
||||
'setNowShowAreaData',
|
||||
'setAllAnnotationData',
|
||||
'setAllImageData',
|
||||
'setAllAreaData',
|
||||
'updateDisplayOrShowOnMapData',
|
||||
]);
|
||||
const emits = defineEmits(['setNowShowImageData', 'setAllImageData']);
|
||||
|
||||
const vChartRef: any = ref<HTMLElement>();
|
||||
let map: mars3d.Map; // 地图对象
|
||||
|
|
@ -61,13 +40,13 @@
|
|||
});
|
||||
// 地图照片
|
||||
// 地图照片-地面点
|
||||
let image_bottomPointGraphicData: any = [];
|
||||
let bottomPointGraphicData: any = [];
|
||||
// 地图照片-飞行点
|
||||
let image_flightointGraphicData: any = [];
|
||||
let flightointGraphicData: any = [];
|
||||
// 地图照片-地面点到展示图片的线
|
||||
let image_bottomImagePolylineGraphicData: any = [];
|
||||
let bottomImagePolylineGraphicData: any = [];
|
||||
// 地图照片-展示图片
|
||||
let image_imageGraphicData: any = [];
|
||||
let imageGraphicData: any = [];
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
|
|
@ -306,32 +285,129 @@
|
|||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.updateDisplayOrShowOnMapData,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
// 地图照片-地面点
|
||||
bottomPointGraphicData.forEach((graphicLayer) => {
|
||||
if (graphicLayer.options.id == newValue.id + '_bottom') {
|
||||
if (newValue.showOnMap == 1) {
|
||||
graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
} else {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 地图照片-飞行点
|
||||
flightointGraphicData.forEach((graphicLayer) => {
|
||||
if (graphicLayer.options.id == newValue.id + '_flight') {
|
||||
if (newValue.showOnMap == 1) {
|
||||
if (newValue.id == props.nowShowImageData.id) {
|
||||
graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
}
|
||||
} else {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 地图照片-地面点到展示图片的线
|
||||
bottomImagePolylineGraphicData.forEach((graphicLayer) => {
|
||||
if (graphicLayer.options.id == newValue.id + '_polyline') {
|
||||
if (newValue.showOnMap == 1) {
|
||||
graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
} else {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 地图照片-展示图片
|
||||
imageGraphicData.forEach((graphicLayer) => {
|
||||
if (graphicLayer.options.id == newValue.id + '_image') {
|
||||
if (newValue.showOnMap == 1) {
|
||||
graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
graphicLayer.setStyle({
|
||||
label: {
|
||||
text: `${newValue.name}`,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
// watch(
|
||||
// () => props.nowShowImageData,
|
||||
// (newValue) => {
|
||||
// if (newValue) {
|
||||
// // 地图照片-地面点
|
||||
// bottomPointGraphicData.forEach((graphicLayer) => {
|
||||
// if (graphicLayer.options.id == newValue.id + '_bottom') {
|
||||
// graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
// }
|
||||
// });
|
||||
// // 地图照片-飞行点
|
||||
// // flightointGraphicData.forEach((graphicLayer) => {
|
||||
// // if (graphicLayer.options.id == newValue.id + '_flight') {
|
||||
// // }
|
||||
// // });
|
||||
// // 地图照片-地面点到展示图片的线
|
||||
// bottomImagePolylineGraphicData.forEach((graphicLayer) => {
|
||||
// if (graphicLayer.options.id == newValue.id + '_polyline') {
|
||||
// graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
// }
|
||||
// });
|
||||
// // 地图照片-展示图片
|
||||
// imageGraphicData.forEach((graphicLayer) => {
|
||||
// if (graphicLayer.options.id == newValue.id + '_image') {
|
||||
// graphicLayer.show = newValue.display == 1 ? true : false;
|
||||
// graphicLayer.setStyle({
|
||||
// label: {
|
||||
// text: `${newValue.name}`,
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// deep: true,
|
||||
// },
|
||||
// );
|
||||
|
||||
// 地图照片--------------------------------------------------------------------
|
||||
// 地图照片-初始化-遍历展示
|
||||
const showAllImageDataList = async () => {
|
||||
// 删除旧数据
|
||||
image_bottomPointGraphicData?.forEach((graphicLayer) => {
|
||||
bottomPointGraphicData?.forEach((graphicLayer) => {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
image_flightointGraphicData?.forEach((graphicLayer) => {
|
||||
flightointGraphicData?.forEach((graphicLayer) => {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
image_bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
|
||||
bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
image_imageGraphicData?.forEach((graphicLayer) => {
|
||||
imageGraphicData?.forEach((graphicLayer) => {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
// 图层数据
|
||||
image_bottomPointGraphicData = [];
|
||||
image_flightointGraphicData = [];
|
||||
image_bottomImagePolylineGraphicData = [];
|
||||
image_imageGraphicData = [];
|
||||
bottomPointGraphicData = [];
|
||||
flightointGraphicData = [];
|
||||
bottomImagePolylineGraphicData = [];
|
||||
imageGraphicData = [];
|
||||
|
||||
// 地图照片-遍历
|
||||
let rotation = 0;
|
||||
props.allImageDataList.forEach((item, index) => {
|
||||
if (item.lng && item.lat && item.absoluteAltitude) {
|
||||
if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
|
||||
const image = new Image();
|
||||
image.crossOrigin = 'Anonymous';
|
||||
// image.src = item.preview_url;
|
||||
|
|
@ -384,6 +460,7 @@
|
|||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
},
|
||||
hasEdit: false,
|
||||
show: item.display == 1 ? true : false,
|
||||
});
|
||||
if (index + 1 < props.allImageDataList.length) {
|
||||
const afterItem = props.allImageDataList[index + 1];
|
||||
|
|
@ -420,6 +497,7 @@
|
|||
clampToGround: false,
|
||||
},
|
||||
hasEdit: false,
|
||||
show: item.display == 1 ? true : false,
|
||||
// 用于恢复默认
|
||||
defaultPosition: position,
|
||||
// 地形高度
|
||||
|
|
@ -447,6 +525,7 @@
|
|||
},
|
||||
},
|
||||
hasEdit: false,
|
||||
show: item.display == 1 ? true : false,
|
||||
// 用于恢复默认
|
||||
defaultImage: dataURL1,
|
||||
// 用于外侧修改图片
|
||||
|
|
@ -520,10 +599,10 @@
|
|||
// 展示图片 添加到图层中
|
||||
graphicLayers.addGraphic(imageGraphic);
|
||||
// 数据
|
||||
image_bottomPointGraphicData.push(bottomPointGraphic);
|
||||
image_flightointGraphicData.push(flightointGraphic);
|
||||
image_bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
|
||||
image_imageGraphicData.push(imageGraphic);
|
||||
bottomPointGraphicData.push(bottomPointGraphic);
|
||||
flightointGraphicData.push(flightointGraphic);
|
||||
bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
|
||||
imageGraphicData.push(imageGraphic);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -536,13 +615,13 @@
|
|||
// 地图照片-恢复默认
|
||||
function imageRestoreDefault() {
|
||||
// 飞行点
|
||||
for (let i = 0; i < image_flightointGraphicData.length; i++) {
|
||||
let flightointGraphic = image_flightointGraphicData[i];
|
||||
for (let i = 0; i < flightointGraphicData.length; i++) {
|
||||
let flightointGraphic = flightointGraphicData[i];
|
||||
flightointGraphic.show = false;
|
||||
}
|
||||
// 地面点到展示图片的线
|
||||
for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
|
||||
let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
|
||||
for (let i = 0; i < bottomImagePolylineGraphicData.length; i++) {
|
||||
let bottomImagePolylineGraphic = bottomImagePolylineGraphicData[i];
|
||||
let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
|
||||
let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
|
||||
bottomImagePolylineGraphic.setStyle({
|
||||
|
|
@ -554,8 +633,8 @@
|
|||
];
|
||||
}
|
||||
// 展示图片
|
||||
for (let i = 0; i < image_imageGraphicData.length; i++) {
|
||||
let imageGraphic = image_imageGraphicData[i];
|
||||
for (let i = 0; i < imageGraphicData.length; i++) {
|
||||
let imageGraphic = imageGraphicData[i];
|
||||
let defaultImage = imageGraphic.options.defaultImage;
|
||||
imageGraphic.setStyle({
|
||||
image: defaultImage,
|
||||
|
|
@ -572,18 +651,16 @@
|
|||
// 全部恢复默认
|
||||
imageRestoreDefault();
|
||||
// 飞行点
|
||||
for (let i = 0; i < image_flightointGraphicData.length; i++) {
|
||||
if (image_flightointGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
|
||||
let flightointGraphic = image_flightointGraphicData[i];
|
||||
for (let i = 0; i < flightointGraphicData.length; i++) {
|
||||
if (flightointGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
|
||||
let flightointGraphic = flightointGraphicData[i];
|
||||
flightointGraphic.show = true;
|
||||
}
|
||||
}
|
||||
// 地面点到展示图片的线
|
||||
for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
|
||||
if (
|
||||
image_bottomImagePolylineGraphicData[i].options.id.includes(props.nowShowImageData.id)
|
||||
) {
|
||||
let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
|
||||
for (let i = 0; i < bottomImagePolylineGraphicData.length; i++) {
|
||||
if (bottomImagePolylineGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
|
||||
let bottomImagePolylineGraphic = bottomImagePolylineGraphicData[i];
|
||||
let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
|
||||
let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
|
||||
bottomImagePolylineGraphic.setStyle({
|
||||
|
|
@ -600,9 +677,9 @@
|
|||
}
|
||||
}
|
||||
// 展示图片
|
||||
for (let i = 0; i < image_imageGraphicData.length; i++) {
|
||||
if (image_imageGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
|
||||
let imageGraphic = image_imageGraphicData[i];
|
||||
for (let i = 0; i < imageGraphicData.length; i++) {
|
||||
if (imageGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
|
||||
let imageGraphic = imageGraphicData[i];
|
||||
let chooseImage = imageGraphic.options.chooseImage;
|
||||
imageGraphic.setStyle({
|
||||
image: chooseImage,
|
||||
|
|
@ -652,73 +729,4 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.annotationButtons {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
top: 10%;
|
||||
right: 1%;
|
||||
width: 30px;
|
||||
height: 123px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.button_nochoose {
|
||||
background: #ffffff;
|
||||
z-index: 200;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
// border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
border: 2px solid #2b85e4;
|
||||
outline: 1px solid #2b85e4;
|
||||
}
|
||||
}
|
||||
.button_choose {
|
||||
background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
|
||||
background-size:
|
||||
100% 100%,
|
||||
auto;
|
||||
z-index: 200;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
// border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 2px solid #2b85e4;
|
||||
}
|
||||
|
||||
.popoverAnnotation {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.areaButtons {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 30%;
|
||||
right: 1%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.popoverArea {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 170px;
|
||||
height: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,271 +1,25 @@
|
|||
export const line_start_cap_0 = `<svg
|
||||
export const showOnMap_1 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_1 = `<svg
|
||||
export const showOnMap_0 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M14.0459,2.2L4,8L14.0459,13.8L14.0459,9L44,9L44,7L14.0459,7L14.0459,2.2Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_2 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="4"
|
||||
y="4"
|
||||
width="2"
|
||||
height="8"
|
||||
rx="0"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_start_cap_3 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L5.5,9L5.5,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<ellipse cx="7" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_0 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_1 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M33.9541,13.8L44,8L33.9541,2.2L33.9541,7L4,7L4,9L33.9541,9L33.9541,13.8Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_2 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M44,9L4,9L4,7L44,7L44,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="42"
|
||||
y="4"
|
||||
width="2"
|
||||
height="8"
|
||||
rx="0"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const line_end_cap_3 = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
width="36"
|
||||
height="12"
|
||||
viewBox="0 0 48 16"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M43.5,9L4,9L4,7L43.5,7L43.5,9Z"
|
||||
fill-rule="evenodd"
|
||||
fill="#000000"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<ellipse cx="41" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const circle = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="M256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
export const rect = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M2 4h20v16H2z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
export const triangle = `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M464 464H48a16 16 0 0 1-14.07-23.62l208-384a16 16 0 0 1 28.14 0l208 384A16 16 0 0 1 464 464z" fill="#000000">
|
||||
</path>
|
||||
</svg>`;
|
||||
|
||||
|
||||
export const defaultIcon = `<svg width="15px" height="21.25px" viewBox="0 0 20 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-880, -469)" fill="currentColor">
|
||||
<g id="菱形" transform="translate(880, 469)">
|
||||
<path d="M9.90588766,0 L20,13.1685517 L12.4843534,23.5505302 L12.4843534,28.0455285 L7.51106516,28.0455285 L7.51106516,23.5505302 L0,13.1685517 L9.90588766,0 Z M9.90588766,6 L5,13.1685517 L9.90588766,20.3166169 L15,13.1685517 L9.90588766,6 Z" id="形状结合"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
export const locateBack = `<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
|
||||
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-914, -469)" fill-rule="nonzero" stroke-width="2.75">
|
||||
<g id="定位" transform="translate(916, 471)">
|
||||
<path d="M10,23.8461538 C10,23.8461538 20,17.3107692 20,9.75523077 C20,4.36756923 15.5228462,0 10,0 C4.47715385,0 0,4.36756923 0,9.75523077 C0,17.3107692 10,23.8461538 10,23.8461538 Z" id="路径" stroke="currentColor" fill="currentColor"></path>
|
||||
<path d="M10,16 C13.31368,16 16,13.31368 16,10 C16,6.68632 13.31368,4 10,4 C6.68632,4 4,6.68632 4,10 C4,13.31368 6.68632,16 10,16 Z" id="路径" stroke="#ffffff" fill="#ffffff"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
export const fireIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c.1-.44-.37-.78-.75-.55C9.29 3.71 6.68 8 8.87 13.62c.18.46-.36.89-.75.59c-1.81-1.37-2-3.34-1.84-4.75c.06-.52-.62-.77-.91-.34C4.69 10.16 4 11.84 4 14.37c.38 5.6 5.11 7.32 6.81 7.54c2.43.31 5.06-.14 6.95-1.87c2.08-1.93 2.84-5.01 1.72-7.69zm-9.28 5.03c1.44-.35 2.18-1.39 2.38-2.31c.33-1.43-.96-2.83-.09-5.09c.33 1.87 3.27 3.04 3.27 5.08c.08 2.53-2.66 4.7-5.56 2.32z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const peopleIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="4" r="2" fill="currentColor"></circle><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54C8.24 6.99 6 4.75 6 2H4c0 3.16 2.11 5.84 5 6.71V22h2v-6h2v6h2V10.05L18.95 14l1.41-1.41l-4.47-4.48z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const warnIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"><g fill="none"><path d="M5.214 1.459a.903.903 0 0 1 1.572 0l4.092 7.169c.348.61-.089 1.372-.787 1.372H1.91c-.698 0-1.135-.762-.787-1.372l4.092-7.17zM5.5 4.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-1 0zM6 6.75a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5z" fill="currentColor">
|
||||
</path></g></svg>`;
|
||||
export const carIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path d="M447.68 220.78a16 16 0 0 0-1-3.08l-37.78-88.16C400.19 109.17 379 96 354.89 96H157.11c-24.09 0-45.3 13.17-54 33.54L65.29 217.7A15.72 15.72 0 0 0 64 224v176a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h256v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V224a16.15 16.15 0 0 0-.32-3.22zM144 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32zm224 0a32 32 0 1 1 32-32a32 32 0 0 1-32 32zM104.26 208l28.23-65.85C136.11 133.69 146 128 157.11 128h197.78c11.1 0 21 5.69 24.62 14.15L407.74 208z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
export const checkIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
</path></svg>`;
|
||||
export const closeIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor">
|
||||
</path></svg>`;
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>`;
|
||||
|
|
@ -1144,7 +1144,7 @@
|
|||
|
||||
.imageList {
|
||||
display: inline-flex;
|
||||
// align-items: center;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
width: 900px;
|
||||
height: 65px;
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@
|
|||
import { ref, watch, onMounted, defineEmits } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
import { circle, rect, triangle } from './svg';
|
||||
import {
|
||||
CheckOutlined,
|
||||
AntDesignOutlined,
|
||||
|
|
|
|||
Loading…
Reference in New Issue