<template>
|
<div class="modelTool">
|
<div style="color: #fff;">
|
显示批注
|
<el-switch v-model="isShowComments" @change="showCommentsChange" size="mini"></el-switch>
|
</div>
|
<div class="modelTool_item" @click="newannotation">
|
<div class="modelTool_item_top">
|
<img class="modelTool_item_img" src="../../../../assets/img/appUseCenter/icon_mxgj_9.png" alt=""
|
v-if="!marginalia" />
|
<img class="modelTool_item_img" src="../../../../assets/img/appUseCenter/icon_mxgj_10.png" alt=""
|
v-if="marginalia" />
|
</div>
|
<div class="modelTool_item_foot">
|
<span>新建批注</span>
|
</div>
|
</div>
|
<div class="modelTool_item" @click="removeAll">
|
<div class="modelTool_item_top">
|
<img class="modelTool_item_img" src="../../../../assets/img/appUseCenter/icon_mxgj_11.png" alt="" v-if="true" />
|
</div>
|
<div class="modelTool_item_foot">
|
<span>清除所有</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {saveOrUpdateLable,getLabelList,deleteLable } from "@/api/datacenter"
|
import * as SmartEarth from "../../../../../public/CimSDK/index.js"
|
export default {
|
data() {
|
return {
|
marginalia: false, //批注
|
numberValidateForm: {
|
name: "",
|
},
|
longitude: "",
|
latitude: "",
|
height: null,
|
isShowComments: false,
|
commentList: [],
|
textPiZhu:"",
|
piZhu:false,
|
open:false,
|
lablePiZhu:true
|
};
|
},
|
methods: {
|
showCommentsChange() {
|
this.loadLable()
|
if (this.isShowComments) {
|
this.commentList.forEach((element) => {
|
element.show = true;
|
});
|
} else {
|
this.marginalia = false;
|
if (this.marginalia === false) {
|
//再次点击取消标注功能，释放handler
|
if (window.PiZhuHandler) {
|
window.PiZhuHandler.destroy();
|
window.PiZhuHandler = undefined;
|
}
|
}
|
this.commentList.forEach((element) => {
|
element.show = false;
|
});
|
}
|
},
|
//添加批注
|
piZhuAdd(lon,lat,height,pickedObject){
|
this.longitude = lon;
|
this.latitude = lat;
|
this.height = height;
|
if(this.piZhu){
|
if(this.open) window.closePopouPiZhu();
|
//查看批注样式
|
let htmldiv =
|
`<div style="z-index: 9999;width: auto;height: auto;background-color: white;border-radius: 15px;">
|
<header style="height: 40px;line-height: 40px;"><div style="padding-left: 20px;padding-top: 5px;">查看批注</div>
|
<a style="padding:2px;text-align:center;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;
|
text-decoration:none;cursor:pointer;font-weight: bold;background:transparent;position:absolute;right:18px;top:16px;"
|
class="closebtn" href="#" onclick=" window.closePopouPiZhu()">×
|
</a>
|
</header>
|
<main style="padding: 0px;">
|
<textarea disabled="disabled" id="piZhuText" style="width:370px;padding: 0px;margin: 10px 20px;height:140px;border: 1px solid #C0C4CC;"></textarea>
|
</main>
|
<footer style="height: 35px;line-height: 35px;">
|
<button style="display: flex;margin: 0px auto;width: auto;border: 1px solid rgb(192, 196, 204);padding: 2px 15px;background: #F2F6FC;" onclick="window.closePopouPiZhu()"> 取 消 </button>
|
</footer>
|
</div>`;
|
htmldiv +=
|
`<div style="background:white; position:absolute; top:-3px; left:0px; width:2px; height:10px;
|
padding:1px; margin:0px auto 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"></div>`;
|
//根据事件位置新增查看批注窗体
|
window.divPointPiZhu = window.sgworld.view.createScreenDialog({
|
html: htmldiv,
|
lon: lon,
|
lat: lat,
|
height: height,
|
});
|
document.getElementById("piZhuText").value = pickedObject.id._name
|
this.piZhu = false
|
this.open = true
|
}else{
|
if(this.open) window.closePopouPiZhu();
|
//新增批注样式
|
let htmldiv =
|
` <div style="z-index: 9999;width: auto;height: auto;background-color: white;border-radius: 15px;">
|
<header style="height: 40px;line-height: 40px;"><div style="padding-left: 20px;padding-top: 5px;">新建批注</div>
|
<a style="padding:2px;text-align:center;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;
|
text-decoration:none;cursor:pointer;font-weight: bold;background:transparent;position:absolute;right:18px;top:16px;"
|
class="closebtn" href="#" onclick=" window.closePopouPiZhu()">×</a>
|
</header>
|
<main style="padding: 0px;">
|
<textarea id="piZhuText" style="width:370px;padding: 0px;margin: 10px 20px;height:140px;border: 1px solid #C0C4CC;"></textarea>
|
</main>
|
<footer style="height: 35px;line-height: 35px;">
|
<button style="display: flex;margin: 0px auto;width: auto;border: 1px solid rgb(192, 196, 204);padding: 2px 15px;background: #F2F6FC;" onclick="window.textPiZhu()"> 确 定 </button>
|
</footer>
|
</div>`;
|
htmldiv +=
|
`<div style="background:white; position:absolute; top:-3px; left:0px; width:2px; height:10px;
|
padding:1px; margin:0px auto 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);"></div>`;
|
//根据事件位置新增批注窗体
|
window.divPointPiZhu = window.sgworld.view.createScreenDialog({
|
html: htmldiv,
|
lon: lon,
|
lat: lat,
|
height: height,
|
});
|
this.open= true
|
}
|
},
|
//开启批注
|
newannotation() {
|
let that = this
|
if(this.marginalia)
|
{
|
this.marginalia = false;
|
window.PiZhuHandler.destroy();
|
window.PiZhuHandler = undefined;
|
return
|
}
|
this.marginalia = true;
|
//注册弹窗事件
|
window.textPiZhu = () => {
|
this.numberValidateForm.name = document.getElementById("piZhuText").value
|
this.submitpizhu()
|
window.closePopouPiZhu()
|
}
|
//注册一个关闭弹框的事件
|
if (!window.closePopouPiZhu) {
|
window.closePopouPiZhu = () => {
|
if (window.divPointPiZhu) {
|
window.divPointPiZhu.removeFromMap();
|
window.divPointPiZhu = undefined;
|
this.open = false
|
}
|
};
|
}
|
//注册左键点击事件，获取点击位置
|
window.PiZhuHandler = new Cesium.ScreenSpaceEventHandler(sgworld._Viewer.canvas);
|
window.PiZhuHandler.setInputAction(function onLeftClick(movement) {
|
let lon,lat,height
|
let pickBim = true
|
window.BIM.PickId(movement.position.x, movement.position.y).then(idArr => {
|
let pickEntity = null
|
let pickedObject = sgworld._Viewer.scene.pick(movement.position)
|
if(pickedObject != undefined) that.piZhu = true
|
if(idArr[0] == 0 && idArr[1] == 0 && idArr[2] == 0 && idArr[3] == 0 ){
|
pickBim = false
|
}
|
if(pickBim){
|
sgworld._Viewer.scene.bim.PickWorldPosition(movement.position.x,movement.position.y).then((position)=>{
|
let cartographic = Cesium.Cartographic.fromCartesian({"x":position[0],"y":position[1],"z":position[2]});
|
lon = Cesium.Math.toDegrees(cartographic.longitude);
|
lat = Cesium.Math.toDegrees(cartographic.latitude);
|
height = cartographic.height;// 高度
|
that.piZhuAdd(lon,lat,height,pickedObject)
|
})
|
}else{
|
var wp = movement.position;
|
var ray = sgworld._Viewer.scene.camera.getPickRay(wp);
|
var cartesian = sgworld._Viewer.scene.globe.pick(ray, sgworld._Viewer.scene);
|
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
lat = Cesium.Math.toDegrees(cartographic.latitude);
|
lon = Cesium.Math.toDegrees(cartographic.longitude);
|
height = sgworld._Viewer.scene.globe.getHeight(cartographic);;
|
that.piZhuAdd(lon,lat,height,pickedObject)
|
}
|
})
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
//移除所有批注
|
removeAll() {
|
deleteLable("1").then((res)=>{
|
if(res.code == 200 ){
|
this.marginalia = false;
|
window.sgworld.entities.removeAll();
|
if (window.PiZhuHandler) {
|
window.PiZhuHandler.destroy();
|
}
|
window.PiZhuHandler = undefined;
|
}
|
})
|
},
|
//加载批注
|
loadLable(){
|
let earthCtrl = window.sgworld
|
if(this.lablePiZhu){
|
getLabelList("1").then((res)=>{
|
if(res.code == 200){
|
res.data.forEach((item)=>{
|
item.image = require('../../../../assets/img/img.png');
|
var billboardEntity = earthCtrl.factory.createBillboard(item);
|
if (this.isShowComments) {
|
billboardEntity.show = true;
|
} else {
|
billboardEntity.show = false;
|
}
|
this.commentList.push(billboardEntity);
|
})
|
this.lablePiZhu = false
|
}
|
})
|
}
|
},
|
//上传批注
|
submitpizhu() {
|
if (!this.numberValidateForm.name || this.numberValidateForm.name === "" || this.numberValidateForm.name.trim() === "") {
|
this.$message.error("批注内容不能为空或空格！");
|
return;
|
}
|
|
let longitude = this.longitude;
|
let latitude = this.latitude;
|
let height = this.height;
|
var param = {
|
name: this.numberValidateForm.name,
|
image: '../../../../assets/img/img.png',
|
lon: longitude,
|
lat: latitude,
|
alt: height,
|
scale: 2,
|
content: this.numberValidateForm.name,
|
userId: '1'
|
};
|
saveOrUpdateLable(param).then((res)=>{
|
if(res.code == 200){
|
param.id = sgworld.factory.createUUID()
|
param.image = require('../../../../assets/img/img.png');
|
var billboardEntity = sgworld.factory.createBillboard(param);
|
if (this.isShowComments) {
|
billboardEntity.show = true;
|
} else {
|
billboardEntity.show = false;
|
}
|
this.commentList.push(billboardEntity);
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.modelTool {
|
padding:10px;
|
.modelTool_item {
|
width: 56px;
|
margin: 0 10px;
|
color:aliceblue;
|
margin-bottom: 10px;
|
cursor: pointer;
|
display: inline-block;
|
.modelTool_item_top {
|
width: 56px;
|
height: 44px;
|
text-align: center;
|
line-height: 65px;
|
margin-top:10px;
|
.modelTool_item_img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
.modelTool_item_foot {
|
text-align: center;
|
font-size: 14px;
|
color: #ffffff;
|
margin-top:5px;
|
}
|
}
|
/deep/.el-switch.is-checked .el-switch__core {
|
border-color: #3384c6;
|
background-color: #3384c6;
|
}
|
}
|
</style>
|
