<template>
|
<div class="attributeInfo">
|
<!-- 标题 -->
|
<div class="attributeTitle" @mousemove="setMouseMove(1)" @mouseout="setMouseMove(2)">
|
<div class="attributeLabel">属性信息</div>
|
<div class="attributeClose" @click="setAttributeInfoClose">
|
<el-icon :size="20" style="color:#d6e4ff">
|
<Close />
|
</el-icon>
|
</div>
|
</div>
|
<!-- 内容 -->
|
<div class="attributeContent">
|
<div class="contentBox">
|
<div class="contentLabel"> <label>类型</label></div>
|
<div class="contentmenu">{{ fromLine.layerType }}</div>
|
</div>
|
<div class="contentBox">
|
<div class="contentLabel"> <label>名称</label></div>
|
<div class="contentmenu"><el-input size="mini" @change="setEntityNameChange" v-model="fromLine.cnName"></el-input>
|
</div>
|
</div>
|
<div class="contentBox" v-show="showEntity.label">
|
<div class="contentLabel"> <label>内容</label></div>
|
<div class="contentmenu"><el-input size="mini" v-model="fromLine.text"></el-input></div>
|
</div>
|
<div class="contentBox" v-show="showEntity.label">
|
<div class="contentLabel"> <label>字体</label></div>
|
<div class="contentmenu"><el-input size="mini" v-model="fromLine.font"></el-input></div>
|
</div>
|
<div class="contentBox" v-show="showEntity.label">
|
<div class="contentLabel"> <label>比例大小</label></div>
|
<div class="contentmenu"><el-input size="mini" v-model="fromLine.scale"></el-input></div>
|
</div>
|
<div class="contentBox" v-show="showEntity.point">
|
<div class="contentLabel"> <label>大小</label></div>
|
<div class="contentmenu"><el-input size="mini" @change="setEntitySizeChange" v-model="fromLine.size"></el-input>
|
</div>
|
</div>
|
<div class="contentBox" v-show="showEntity.setclampToGround">
|
<div class="contentLabel">
|
<label v-show="!showEntity.clampToGround">是否被遮挡</label>
|
<label v-show="showEntity.clampToGround">是否贴地</label>
|
</div>
|
<div class="contentmenu"> <el-switch v-model="fromLine.heightReference"
|
@change="setEntityHeightReferenceChange" /></div>
|
</div>
|
<div class="contentBox">
|
<div class="contentLabel"> <label>填充色</label></div>
|
<div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.material"
|
@change="setEntityMaterColorChange" /></div>
|
</div>
|
<div class="contentBox">
|
<div class="contentLabel"> <label>填充透明度</label></div>
|
<div class="contentmenu"> <el-slider size="small" v-model="fromLine.materialAlpha"
|
@change="setEntityMaterColorChange" :step="0.1" :max="1" :min="0" /></div>
|
</div>
|
<div class="contentBox">
|
<div class="contentLabel"> <label>是否显示边框</label></div>
|
<div class="contentmenu"> <el-switch @change="setEntityOutLineShowReferenceChange" v-model="fromLine.outline" />
|
</div>
|
</div>
|
<div class="contentBox" v-show="fromLine.outline">
|
<div class="contentLabel"> <label>边框大小</label></div>
|
<div class="contentmenu">
|
<el-input-number v-model="fromLine.width" :min="0" size="small" @change="setEntityOutLineWidthReferenceChange"
|
controls-position="right" />
|
|
</div>
|
</div>
|
<div class="contentBox" v-show="fromLine.outline">
|
<div class="contentLabel"> <label>边框色</label></div>
|
<div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.outlineColor"
|
@change="setEntityOutLineColorChange" /></div>
|
</div>
|
<div class="contentBox" v-show="fromLine.outline">
|
<div class="contentLabel"> <label>边框透明度</label></div>
|
<div class="contentmenu"> <el-slider size="small" v-model="fromLine.outlineAlpha" :step="0.1" :max="1" :min="0"
|
@change="setEntityOutLineColorChange" /></div>
|
</div>
|
<div class="contentBox">
|
<div class="contentLabel"> <label>最小可视距离</label></div>
|
<div class="contentmenu"><el-input size="mini" v-model="fromLine.near" @change="setEntityNearChange"></el-input>
|
</div>
|
</div>
|
<div class="contentBox contentBottom ">
|
<div class="contentLabel"> <label>最大可视距离</label></div>
|
<div class="contentmenu"><el-input size="mini" v-model="fromLine.far" @change="setEntityFarChange"></el-input>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import menuTool from "@/assets/js/Map/menuTool";
|
import temporaryTool from "@/assets/js/Map/temporaryTools";
|
import store from "@/store";
|
import { en, fa } from "element-plus/es/locale";
|
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
} from "vue";
|
const drag = ref(false);
|
const setMouseMove = (res) => {
|
if (res == 1) {
|
drag.value = true;
|
} else if (res == 2) {
|
drag.value = false;
|
}
|
};
|
const fromLine = ref({
|
layerType: "",
|
cnName: "",
|
size: "",
|
heightReference: true,
|
material: null,
|
materialAlpha: 0,
|
outline: true,
|
width: 0,
|
outlineColor: null,
|
outlineAlpha: "",
|
near: 0,
|
far: 0,
|
text: "",
|
font: "",
|
scale: "",
|
});
|
const showEntity = ref({
|
label: false,
|
point: false,
|
clampToGround: false,
|
setclampToGround: true,
|
});
|
const entity = ref(null);
|
const entityType = ref(null);
|
const setEntityNameChange = () => {
|
entity.value.name = fromLine.value.cnName;
|
store.state.editTemporarName = fromLine.value.cnName;
|
};
|
const setEntitySizeChange = () => {
|
entity.value.point._pixelSize._value = parseInt(fromLine.value.size);
|
};
|
const setEntityHeightReferenceChange = () => {
|
switch (entityType.value) {
|
case "point":
|
entity.value.point.disableDepthTestDistance =
|
fromLine.value.heightReference == true ? null : Number.POSITIVE_INFINITY;
|
break;
|
case "label":
|
entity.value.label.disableDepthTestDistance =
|
fromLine.value.heightReference == true ? null : false;
|
break;
|
case "polyline":
|
entity.value.polyline.clampToGround = fromLine.value.heightReference;
|
break;
|
|
}
|
};
|
const setEntityOutLineWidthReferenceChange = () => {
|
switch (entity.value.GeoType) {
|
case "point":
|
entity.value.point.outlineWidth._value = fromLine.value.width;
|
break;
|
case "label":
|
entity.value.label.outlineWidth = fromLine.value.width;
|
break;
|
case "polyline":
|
entity.value.polyline.material.outlineWidth._value = fromLine.value.width;
|
break;
|
case "rectangle":
|
entity.value.rectangle.outlineWidth._value = fromLine.value.width;
|
break;
|
case "polygon":
|
entity.value.polygon.outlineWidth._value = fromLine.value.width;
|
break;
|
}
|
};
|
|
|
const setEntityOutLineShowReferenceChange = () => {
|
var type = entity.value.GeoType;
|
if (type == "point") {
|
if (fromLine.value.outline) {
|
entity.value.point.outlineWidth._value = fromLine.value.width;
|
} else {
|
entity.value.point.outlineWidth._value = null;
|
}
|
} else if (type == "label") {
|
if (fromLine.value.outline) {
|
entity.value.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
|
} else {
|
entity.value.label.style = Cesium.LabelStyle.FILL;
|
}
|
} else if (type == 'polyline') {
|
if (fromLine.value.outline) {
|
entity.value.polyline.material.outlineWidth._value = fromLine.value.width;
|
} else {
|
entity.value.polyline.material.outlineWidth._value = null;
|
}
|
} else if (type == 'rectangle') {
|
|
entity.value.rectangle.outline._value = fromLine.value.outline;
|
} else if (type == 'polygon') {
|
|
entity.value.polygon.outline._value = fromLine.value.outline;
|
}
|
};
|
const setAttributeInfoClose = () => {
|
store.state.editTemporaryback = entity._value.id;
|
store.state.setEditTemporaryShow = false;
|
store.state.editTemporaryId = null;
|
sgworld.Creator.SimpleGraphic.SimpleGraphicObj=[];
|
|
};
|
const setEntityMaterColorChange = () => {
|
const material = "rgb(255,255,255)";
|
if (fromLine.value.material) {
|
material = hexToRgb(fromLine.value.material);
|
}
|
var type = entity.value.GeoType;
|
if (type == "point") {
|
entity.value.point.color = Cesium.Color.fromCssColorString(
|
material
|
).withAlpha(fromLine.value.materialAlpha);
|
} else if (type == "label") {
|
entity.value.label.fillColor = Cesium.Color.fromCssColorString(
|
material
|
).withAlpha(fromLine.value.materialAlpha);
|
} else if (type == 'polyline') {
|
|
entity.value.polyline.material.color = Cesium.Color.fromCssColorString(
|
material
|
).withAlpha(fromLine.value.materialAlpha);
|
} else if (type == 'rectangle') {
|
|
entity.value.rectangle.material.color = Cesium.Color.fromCssColorString(
|
material
|
).withAlpha(fromLine.value.materialAlpha);
|
} else if (type == 'polygon') {
|
|
entity.value.polygon.material.color = Cesium.Color.fromCssColorString(
|
material
|
).withAlpha(fromLine.value.materialAlpha);
|
}
|
};
|
const setEntityOutLineColorChange = () => {
|
const material = "rgb(255,255,255)";
|
if (fromLine.value.outlineColor) {
|
material = hexToRgb(fromLine.value.outlineColor);
|
}
|
var type = entity.value.GeoType;
|
|
if (type == "point") {
|
entity.value.point.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
|
fromLine.value.outlineAlpha
|
);
|
} else if (type == "label") {
|
|
entity.value.label.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
|
fromLine.value.outlineAlpha
|
);
|
} else if (type == 'polyline') {
|
|
entity.value.polyline.material.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
|
fromLine.value.outlineAlpha
|
);
|
} else if (type == 'rectangle') {
|
|
entity.value.rectangle.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha(
|
fromLine.value.outlineAlpha
|
);
|
} else if (type == 'polygon') {
|
|
entity.value.polygon.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha(
|
fromLine.value.outlineAlpha
|
);
|
}
|
|
|
};
|
const setEntityNearChange = () => {
|
var type = entity.value.GeoType;
|
var res;
|
if (type == "point") {
|
res = entity.value.point;
|
} else if (type == "label") {
|
res = entity.value.label;
|
} else if (type == 'polyline') {
|
res = entity.value.polyline;
|
} else if (type == 'rectangle') {
|
res = entity.value.rectangle;
|
} else if (type == 'polygon') {
|
res = entity.value.polygon;
|
}
|
res._distanceDisplayCondition._value.near = fromLine.value.near;
|
};
|
const setEntityFarChange = () => {
|
// entity.value.point._distanceDisplayCondition._value.far = fromLine.value.far;
|
var type = entity.value.GeoType;
|
var res;
|
if (type == "point") {
|
res = entity.value.point;
|
} else if (type == "label") {
|
res = entity.value.label;
|
} else if (type == 'polyline') {
|
res = entity.value.polyline;
|
} else if (type == 'rectangle') {
|
res = entity.value.rectangle;
|
} else if (type == 'polygon') {
|
res = entity.value.polygon;
|
}
|
res._distanceDisplayCondition._value.near = fromLine.value.far;
|
};
|
const hexToRgb = (hex) => {
|
return (
|
"rgb(" +
|
parseInt("0x" + hex.slice(1, 3)) +
|
"," +
|
parseInt("0x" + hex.slice(3, 5)) +
|
"," +
|
parseInt("0x" + hex.slice(5, 7)) +
|
")"
|
);
|
};
|
//获取数据类型
|
const getEntityType = () => {
|
var res = entity.value;
|
var type = res.GeoType;
|
entityType.value = type;
|
switch (type) {
|
case "label":
|
showEntity.value.label = true;
|
break;
|
case "point":
|
showEntity.value.point = true;
|
break;
|
case "polyline":
|
showEntity.value.clampToGround = true;
|
break;
|
case "rectangle":
|
showEntity.value.setclampToGround = false;
|
break;
|
case "polygon":
|
showEntity.value.setclampToGround = false;
|
break;
|
}
|
|
var obj = temporaryTool.getEntityObj(res.id);
|
fromLine.value = obj;
|
};
|
const getTemporaryAttribute = () => {
|
|
if (store.state.editTemporaryId) {
|
var entities = window.Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].id == store.state.editTemporaryId) {
|
entity.value = entities[i];
|
}
|
}
|
if (entity) {
|
window.Viewer.scene.globe.depthTestAgainstTerrain = true; // 开启深度测试
|
getEntityType();
|
}
|
} else {
|
setAttributeInfoClose();
|
}
|
};
|
|
onMounted(() => {
|
getTemporaryAttribute();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.attributeInfo {
|
position: absolute;
|
top: 8%;
|
right: 5%;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
width: 320px;
|
padding: 5px;
|
|
.attributeTitle {
|
display: flex;
|
justify-content: space-between;
|
padding: 5px;
|
|
.attributeLabel {
|
font-size: 16px;
|
font-family: Source Han Sans SC;
|
color: #d6e4ff;
|
}
|
|
.attributeClose {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.attributeContent {
|
margin: 5px 0px;
|
|
.contentBox {
|
display: flex;
|
border-top: 1px solid #d6e4ff;
|
border-right: 1px solid #d6e4ff;
|
border-left: 1px solid #d6e4ff;
|
}
|
|
.contentLabel {
|
color: white !important;
|
font-size: 12px !important;
|
width: 130px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
border-right: 1px solid #d6e4ff;
|
}
|
|
.contentmenu {
|
flex: 1;
|
|
padding: 5px 10px;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white !important;
|
font-size: 12px !important;
|
}
|
}
|
|
.contentBottom {
|
border-bottom: 1px solid #d6e4ff;
|
}
|
}
|
</style>
|
