飞行标注-全功能完成版
parent
c92e8c51dc
commit
272241744a
|
|
@ -18,6 +18,7 @@
|
|||
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||
@setAllAnnotationData="setAllAnnotationData"
|
||||
@deleteAnnotation="deleteAnnotation"
|
||||
@treeDataShowOrHide="treeDataShowOrHide"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
:nowShowAnnotationData="nowShowAnnotationData"
|
||||
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||
@setAllAnnotationData="setAllAnnotationData"
|
||||
:treeDataShowOrHideList="treeDataShowOrHideList"
|
||||
/>
|
||||
</div>
|
||||
<!-- 地图标注 -->
|
||||
|
|
@ -154,6 +156,12 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 项目级别的显示或者隐藏
|
||||
const treeDataShowOrHideList = ref([]);
|
||||
function treeDataShowOrHide(value) {
|
||||
treeDataShowOrHideList.value = value;
|
||||
}
|
||||
|
||||
// 移动位置
|
||||
function handlerLocation(position) {
|
||||
pathMapRef.value.handlerLocation([position.lng, position.lat]);
|
||||
|
|
|
|||
|
|
@ -433,8 +433,8 @@
|
|||
// 移动到中心位置
|
||||
function handlerLocation() {
|
||||
emits('handlerLocation', {
|
||||
lng: parseFloat(props.nowShowAnnotationData.coordinates[0]),
|
||||
lat: parseFloat(props.nowShowAnnotationData.coordinates[1]),
|
||||
lng: parseFloat(props.nowShowAnnotationData.properties.centerPoint[0]),
|
||||
lat: parseFloat(props.nowShowAnnotationData.properties.centerPoint[1]),
|
||||
});
|
||||
}
|
||||
// 删除此标注
|
||||
|
|
@ -507,9 +507,6 @@
|
|||
heightlist.push(item[2]);
|
||||
});
|
||||
heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
|
||||
console.log(horizontalArea.value);
|
||||
console.log(horizontalPerimeter.value);
|
||||
console.log(heightDiff.value);
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
|
|
|
|||
|
|
@ -45,11 +45,19 @@
|
|||
style="color: #ffffff; font-size: 16px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
<span
|
||||
:class="dataRef.mouse ? 'title_mouse' : 'title_nomouse'"
|
||||
@click="setNowShowAnnotationData(dataRef)"
|
||||
>
|
||||
{{ dataRef.title }}
|
||||
</span>
|
||||
<div class="buttonSwitch" v-if="dataRef.children">
|
||||
<a-switch
|
||||
v-model:checked="dataRef.showOrHide"
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
@change="changeWorkSpaceShowOrHide"
|
||||
/>
|
||||
</div>
|
||||
<div class="buttonRight2" v-if="!dataRef.children && dataRef.mouse">
|
||||
<a-tooltip placement="top">
|
||||
|
|
@ -122,7 +130,9 @@
|
|||
'setNowShowAnnotationData',
|
||||
'setAllAnnotationData',
|
||||
'deleteAnnotation',
|
||||
'treeDataShowOrHide',
|
||||
]);
|
||||
|
||||
const showMenuInfoName = ref('地图标注');
|
||||
|
||||
function updateShowMenuInfoList(type) {
|
||||
|
|
@ -135,10 +145,40 @@
|
|||
function changeLeftMenuShow() {
|
||||
emits('changeLeftMenuShow');
|
||||
}
|
||||
// 项目级别的显示或者隐藏
|
||||
function changeWorkSpaceShowOrHide() {
|
||||
treeDataShowOrHideList = [];
|
||||
treeData.value.forEach((tree) => {
|
||||
treeDataShowOrHideList.push({
|
||||
id: tree.key,
|
||||
showOrHide: tree.showOrHide,
|
||||
});
|
||||
});
|
||||
let showIdList: any = [];
|
||||
treeDataShowOrHideList.map((item) => {
|
||||
if (item.showOrHide) {
|
||||
showIdList.push(item.id);
|
||||
}
|
||||
});
|
||||
emits('treeDataShowOrHide', showIdList);
|
||||
}
|
||||
// 查找项目级别的显示或者隐藏
|
||||
function getShowOrHide(id) {
|
||||
if (treeDataShowOrHideList.length > 0) {
|
||||
const item = treeDataShowOrHideList.find((item) => item.id === id);
|
||||
return item ? item.showOrHide : true;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 地图标注-搜索
|
||||
const treeData: any = ref([]);
|
||||
// 记录项目级别的显示或者隐藏
|
||||
let treeDataShowOrHideList: any = [];
|
||||
// 展开
|
||||
const expandedKeys: any = ref([]);
|
||||
// 搜索
|
||||
const searchValue = ref('');
|
||||
function handleChangeAnnotationSearch() {
|
||||
treeData.value = [];
|
||||
|
|
@ -150,6 +190,7 @@
|
|||
treeData.value.push({
|
||||
key: item.Id,
|
||||
title: item.WorkspaceName,
|
||||
showOrHide: getShowOrHide(item.Id),
|
||||
children: [],
|
||||
});
|
||||
});
|
||||
|
|
@ -159,7 +200,6 @@
|
|||
let allAnnotationDataList = props.allAnnotationDataList.sort((a, b) => {
|
||||
return dayjs(a.createTime) - dayjs(b.createTime);
|
||||
});
|
||||
|
||||
allAnnotationDataList.forEach((annotation) => {
|
||||
treeData.value.forEach((tree) => {
|
||||
if (tree.key == annotation.workSpaceId) {
|
||||
|
|
@ -178,6 +218,7 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 地图标注-删除标注
|
||||
function deleteAnnotation(show) {
|
||||
show.deleteClickNum = 0;
|
||||
|
|
@ -219,21 +260,28 @@
|
|||
|
||||
// 移动到中心位置
|
||||
function handlerLocation(position) {
|
||||
if (showMenuInfoName.value == '地图标注') {
|
||||
if (position.geomtype == 'Circle') {
|
||||
emits('handlerLocation', {
|
||||
lng: parseFloat(position.coordinates[0]),
|
||||
lat: parseFloat(position.coordinates[1]),
|
||||
});
|
||||
} else {
|
||||
emits('handlerLocation', {
|
||||
lng: parseFloat(position.coordinates[0]),
|
||||
lat: parseFloat(position.coordinates[1]),
|
||||
});
|
||||
}
|
||||
}
|
||||
emits('handlerLocation', {
|
||||
lng: parseFloat(position.properties.centerPoint[0]),
|
||||
lat: parseFloat(position.properties.centerPoint[1]),
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.nowShowAnnotationData,
|
||||
() => {
|
||||
treeData.value.forEach((tree) => {
|
||||
tree.children?.forEach((t) => {
|
||||
if (t.id == props.nowShowAnnotationData.id) {
|
||||
t.title = props.nowShowAnnotationData.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
updateShowMenuInfoList,
|
||||
});
|
||||
|
|
@ -288,6 +336,7 @@
|
|||
.leftMenuContent_tree {
|
||||
overflow-y: auto;
|
||||
max-height: 750px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -305,6 +354,7 @@
|
|||
gap: 5px;
|
||||
|
||||
.eye {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -312,20 +362,31 @@
|
|||
height: 20px;
|
||||
}
|
||||
.title_mouse {
|
||||
position: relative;
|
||||
width: 135px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.title_nomouse {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.buttonSwitch {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.buttonRight2 {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
right: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
|
|
@ -334,7 +395,7 @@
|
|||
}
|
||||
.buttonRight1 {
|
||||
position: absolute;
|
||||
right: -35px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
|
|
@ -363,13 +424,16 @@
|
|||
::v-deep .ant-tree {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
::v-deep .ant-tree-treenode {
|
||||
width: 100% !important;
|
||||
}
|
||||
::v-deep .ant-tree-node-content-wrapper {
|
||||
width: 100% !important;
|
||||
}
|
||||
::v-deep .ant-tree-switcher {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
::v-deep .ant-tree-node-selected {
|
||||
background: #25384c !important;
|
||||
}
|
||||
|
||||
//
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -174,6 +174,7 @@
|
|||
'allAnnotationDataList',
|
||||
'allWorkspaceDataList',
|
||||
'nowShowAnnotationData',
|
||||
'treeDataShowOrHideList',
|
||||
]);
|
||||
const emits = defineEmits(['setNowShowAnnotationData', 'setAllAnnotationData']);
|
||||
|
||||
|
|
@ -591,6 +592,41 @@
|
|||
deep: true,
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.treeDataShowOrHideList,
|
||||
() => {
|
||||
let tempGraphicLayerList = [
|
||||
// 点
|
||||
...annotation_PointGraphicData,
|
||||
// 线
|
||||
...annotation_LineStringGraphicData,
|
||||
// 多边形
|
||||
...annotation_PolygonGraphicData,
|
||||
// 圆
|
||||
...annotation_CircleGraphicData,
|
||||
];
|
||||
tempGraphicLayerList?.forEach((graphicLayer) => {
|
||||
if (props.treeDataShowOrHideList.includes(graphicLayer.options.workSpaceId)) {
|
||||
graphicLayer.setStyle({
|
||||
show: graphicLayer.options.state == 0 ? true : false,
|
||||
outline: graphicLayer.options.state == 0 ? true : false,
|
||||
label: {
|
||||
show: graphicLayer.options.state == 0 ? true : false,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
graphicLayer.setStyle({
|
||||
show: false,
|
||||
outline: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// 地图标注-初始化-遍历展示
|
||||
const showAllAnnotationDataList = async () => {
|
||||
// 删除旧数据
|
||||
|
|
@ -693,6 +729,8 @@
|
|||
},
|
||||
show: item.state == 0 ? true : false,
|
||||
hasEdit: true,
|
||||
state: item.state,
|
||||
workSpaceId: item.workSpaceId,
|
||||
});
|
||||
// 监听mouseover事件
|
||||
pointGraphic.on(mars3d.EventType.mouseOver, function () {
|
||||
|
|
@ -773,6 +811,8 @@
|
|||
show: item.state == 0 ? true : false,
|
||||
hasEdit: true,
|
||||
drawShowMeasure: true,
|
||||
state: item.state,
|
||||
workSpaceId: item.workSpaceId,
|
||||
});
|
||||
// 监听mouseover事件
|
||||
lineGraphic.on(mars3d.EventType.mouseOver, function () {
|
||||
|
|
@ -897,6 +937,8 @@
|
|||
show: item.state == 0 ? true : false,
|
||||
hasEdit: true,
|
||||
drawShowMeasure: true,
|
||||
state: item.state,
|
||||
workSpaceId: item.workSpaceId,
|
||||
});
|
||||
// 监听mouseover事件
|
||||
polygonGraphic.on(mars3d.EventType.mouseOver, function () {
|
||||
|
|
@ -1025,6 +1067,8 @@
|
|||
show: item.state == 0 ? true : false,
|
||||
hasEdit: true,
|
||||
drawShowMeasure: true,
|
||||
state: item.state,
|
||||
workSpaceId: item.workSpaceId,
|
||||
});
|
||||
// 监听mouseover事件
|
||||
circleGraphic.on(mars3d.EventType.mouseOver, function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue