<!--
|
* @Descripttion:
|
* @version: 1.0.0
|
* @Author: glc
|
* @Date: 2023-04-12 13:12:27
|
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
* @LastEditTime: 2023-07-18 10:30:51
|
-->
|
<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2022-03-18 15:54:26
|
* @LastEditTime: 2022-08-25 21:10:03
|
* @LastEditors: Andy
|
-->
|
<template>
|
<div id="sdkContainer"></div>
|
</template>
|
|
<script>
|
import { mapState, mapActions } from "vuex";
|
import axios from "axios";
|
import * as SmartEarth from "../../../public/CimSDK/index.js";
|
export default {
|
name: "mapview",
|
// components: { PropertyView },
|
data() {
|
return {
|
IsShowPropertyView: false,
|
conpentId: "",
|
modelId: "",
|
selectId: "",
|
pickx: "",
|
picky: "",
|
pickh: "",
|
objectdatas: [],
|
keynames: [
|
{
|
code: "Name",
|
value: "名称",
|
},
|
{
|
code: "ObjectType",
|
value: "构件类型",
|
},
|
{
|
code: "Tag",
|
value: "标识",
|
},
|
{
|
code: "function",
|
value: "ifc类型",
|
},
|
{
|
code: "storey",
|
value: "楼层",
|
},
|
{
|
code: "PredefinedType",
|
value: "预定义类型",
|
},
|
],
|
};
|
},
|
computed: {
|
...mapState([
|
"bimModelListAll",
|
"bimModelListInitEd",
|
"bimModelTransform",
|
"currentSelectNode",
|
]),
|
},
|
methods: {
|
getDetail(servername, modelId, conId) {
|
console.log("console", servername, modelId, conId);
|
let that = this;
|
let _that = this;
|
let gmlid = "(gmlid:$eq:" + modelId + "_" + conId + ")";
|
// var url = BIM_PROPERTY_URL + servername + "/query?keyValues=" + gmlid + "&type=installation";
|
let url =
|
BIM_SERVER_GET + "getProperty?modelId=" + modelId + "&id=" + conId;
|
var p = axios.get(url); //这个axios()返回的是一个Promise对象，需要对这个对象进行处理
|
p.then(
|
(res) => {
|
if (!res) return _that.$message.error("服务器链接失败！");
|
if (res.data.code !== 200) return _that.$message.error(res.msg);
|
let objectdata = res.data.data.attributes;
|
let htmldiv = `<div style="padding: 10px;margin-left: 0px;margin-bottom: 20px;z-index:1003;background:#fff;
|
position:relative;border-radius: 6px; border-bottom-left-radius:5px;user-select: none;">
|
<span style="position:absolute;top: 12px; left: 20px;color:#0D1F2D;font-size:14px;font-weight: bold;">属性</span>
|
<div style="text-align:right;padding: 0px; margin-bottom: 5px;">
|
<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;"
|
class="closebtn" href="#" onclick=" window.closePopou()">×</a>
|
</div>
|
<div style="padding-top:5px;max-height:300px;overflow:auto;" class="scrollbar">
|
<table border="0" cellspacing='0' cellpadding='0'>
|
<tr>
|
<td style="padding:5px 10px; border: 1px solid #DBDDDF;font-weight: bold; color: #838C93;font-size:12px;width:30px;">分类</td>
|
<td style="padding:5px 10px; border: 1px solid #DBDDDF;border-left:0px;font-weight: bold; color: #838C93;width:30px;font-size:12px">属性名</td>
|
<td style="padding:5px 10px; border: 1px solid #DBDDDF;font-weight: bold; color: #838C93;width:40px;border-left:0px;font-size:12px">属性值</td>
|
</tr>`;
|
let tempobjectdata = { 基本属性: {} };
|
for (var item in objectdata) {
|
if (typeof objectdata[item] === "object") {
|
tempobjectdata[item] = objectdata[item];
|
} else {
|
tempobjectdata["基本属性"][item] = objectdata[item];
|
}
|
}
|
for (var item in tempobjectdata) {
|
if (typeof tempobjectdata[item] === "object") {
|
let i = 0;
|
for (let k in tempobjectdata[item]) {
|
let key = k;
|
if (i === 0) {
|
htmldiv += `<tr><td rowspan="${
|
Object.keys(tempobjectdata[item]).length
|
}"
|
style="padding:5px 10px;border: 1px solid #DBDDDF; font-size:12px; color: #0D1F2D;border-top:0px;">${item}</td>
|
<td style="padding:5px 10px;border: 1px solid #DBDDDF;border-left:0px;font-size:12px; color: #0D1F2D;border-top:0px;">${key}
|
</td><td style=" padding:5px 10px;border: 1px solid #DBDDDF; border-left:0px;color: #0D1F2D;border-top:0px;font-size:12px">${
|
tempobjectdata[item][k]
|
}
|
</td></tr>`;
|
} else {
|
htmldiv += `<tr><td style="padding:5px 10px;border: 1px solid #DBDDDF; border-left:0px; font-size:12px; color: #0D1F2D;border-top:0px;">${key}
|
</td><td style=" padding:5px 10px;border: 1px solid #DBDDDF; border-left:0px;color: #0D1F2D;border-top:0px;font-size:12px">${tempobjectdata[item][k]}
|
</td></tr>`;
|
}
|
i++;
|
}
|
} else {
|
let key = item;
|
htmldiv += `<tr><td style="padding:5px 10px;border: 1px solid #DBDDDF; font-size:12px; color: #0D1F2D;border-top:0px;"></td>
|
<td style="padding:5px 10px;border: 1px solid #DBDDDF; border-left:0px;font-size:12px; color: #0D1F2D;border-top:0px;">${key}
|
</td><td style=" padding:5px 10px;border: 1px solid #DBDDDF; border-left:0px;color: #0D1F2D;border-top:0px;font-size:12px">${tempobjectdata[item]}
|
</td></tr>`;
|
}
|
}
|
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>`;
|
if (window.divPoint) {
|
window.divPoint.removeFromMap();
|
window.divPoint = undefined;
|
}
|
that.pickx, that.picky, that.pickh;
|
window.divPoint = window.sgworld.view.createScreenDialog({
|
html: htmldiv,
|
lon: that.pickx,
|
lat: that.picky,
|
height: that.pickh,
|
});
|
},
|
(error) => {
|
//错误返回错误信息
|
console.log(error);
|
}
|
);
|
},
|
init3DMap() {
|
let _this = this;
|
window.Cesium = SmartEarth.Cesium;
|
window.SmartEarth = SmartEarth;
|
let imageryProvider = new SmartEarth.Cesium.TileMapServiceImageryProvider(
|
{
|
// url: 'https://cim.smartearth.cn/gisserver/tmsserver/earth_tms',
|
url: LICENSE_URL+"gisserver/tmsserver/earth_tms",
|
}
|
);
|
window.sgworld = new SmartEarth.EarthCtrl("sdkContainer", {
|
licenseServer: LICENSE_URL, //服务
|
imageryProvider: imageryProvider,
|
StaticFileBaseUrl: "./CimSDK/",
|
shouldAnimate: true,
|
});
|
window.Viewer = sgworld._Viewer;
|
Viewer.scene.debugShowFramesPerSecond = false; //显示帧率
|
|
let bimoptions = {
|
serverAddress: BIM_MODEL_SERVICE_URL,
|
maxRenderTriangleCount: TRIANGLE_COUNT,
|
allowSingleMeshMaxTriangleFaceQuantity: ONE_TRIANGLE_MAX_COUNT,
|
workerBaseUrl: "",
|
Cesium: window.Cesium,
|
viewer: sgworld.coreMap,
|
useCache: false, //是否使用缓存
|
licenseServer: LICENSE_URL, //服务器地址
|
};
|
if (!window.BIM) {
|
let bim = (window.BIM = new Bim.Bim(bimoptions));
|
if (bim) {
|
bim.OnInitialized = (modelList) => {
|
_this.$store.commit("updateModelList", modelList);
|
window.BIM.SetSceneEffect(2.0,4.0,0.2);
|
window.BIM_LOADED = true;
|
};
|
|
//注册右键拾取BIM属性事件
|
_this = this;
|
window.ClickHandler = new Cesium.ScreenSpaceEventHandler(
|
sgworld._Viewer.canvas
|
);
|
window.ClickHandler.setInputAction(function onLeftClick(movement) {
|
sgworld._Viewer.scene.bim
|
.PickWorldPosition(movement.position.x, movement.position.y)
|
.then((position) => {
|
if (
|
!(position[0] == 0 && position[1] == 0 && position[2] == 0)
|
) {
|
let cartographic = Cesium.Cartographic.fromCartesian({
|
x: position[0],
|
y: position[1],
|
z: position[2],
|
});
|
_this.pickx = Cesium.Math.toDegrees(cartographic.longitude);
|
_this.picky = Cesium.Math.toDegrees(cartographic.latitude);
|
_this.pickh = cartographic.height;
|
window.BIM.PickId(
|
movement.position.x,
|
movement.position.y
|
).then((idArr) => {
|
let modelId = idArr[0];
|
let instancesId = idArr[1];
|
let componentId = idArr[2];
|
console.log(
|
"模型id",
|
modelId,
|
"实例id",
|
instancesId,
|
"构件id",
|
componentId
|
);
|
window.BIM.SetInstancesStatus(
|
2,
|
new Int32Array([modelId, instancesId])
|
);
|
_this.getDetail("servername", modelId, componentId);
|
});
|
}
|
});
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
}
|
}
|
// $(Viewer.cesiumNavigation.container).show();
|
// sgworld.Navigate.Stop(); //取消飞行状态
|
|
if (SET_DEFAULT_CAMERA) {
|
let initialPoint = DEFAULT_CAMERA_POINT.split(",");
|
let x = Number(initialPoint[0]),
|
y = Number(initialPoint[1]),
|
z = Number(initialPoint[2]);
|
let h = Number(initialPoint[3]),
|
p = Number(initialPoint[4]),
|
r = Number(initialPoint[5]);
|
sgworld.camera.flyTo(x, y, z, h, p, r, 2);
|
}
|
$("#distanceLegendDiv").css("top", "0px");
|
},
|
|
//获取bim构件的包围盒；
|
getBIMBoundingSphere(bim, modelTransform, modelIdAndInstancesId) {
|
let instancesTransformBox = bim.GetInstancesTransformBox(
|
modelIdAndInstancesId[0],
|
modelIdAndInstancesId[1]
|
);
|
let instancesMatrix = Cesium.Matrix4.fromArray(instancesTransformBox[0]);
|
let boxMin = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 0),
|
{}
|
);
|
let boxMax = Cesium.Matrix4.multiplyByPoint(
|
instancesMatrix,
|
Cesium.Cartesian3.fromArray(instancesTransformBox[1], 3),
|
{}
|
);
|
boxMin = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMin, {});
|
boxMax = Cesium.Matrix4.multiplyByPoint(modelTransform, boxMax, {});
|
let boundingSphere = Cesium.BoundingSphere.fromPoints(
|
[boxMin, boxMax],
|
new Cesium.BoundingSphere()
|
);
|
return boundingSphere;
|
},
|
},
|
watch: {
|
"$store.state.ueFlytoData": function (val) {
|
console.log("data:", val);
|
var lon = val.posX;
|
var lat = val.posY;
|
var height = val.posZ; //Cesium.Math.toDegrees作用是把弧度转换成度数
|
var heading = Cesium.Math.toRadians(parseFloat(val.yaw) + 90);
|
var pitch = Cesium.Math.toRadians(parseFloat(val.pitch));
|
var roll = 0;
|
const destination = Cesium.Cartesian3.fromDegrees(lon, lat, height);
|
// const heading = Cesium.Math.toRadians(headingDeg);
|
// const pitch = Cesium.Math.toRadians(pitchDeg);
|
// const roll = 0;
|
const orientation = { heading, pitch, roll };
|
sgworld.camera.setView({
|
destination,
|
orientation,
|
});
|
},
|
},
|
mounted() {
|
this.init3DMap();
|
// 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.closePopoua()">×</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.closePopoua()"> 取 消 </button>
|
// </footer>
|
// </div>`;
|
// htmldiv += `</table></div><div style=" background: white;position:absolute;top: -10px;
|
// left: -4px; width: 2px; height:40px; padding: 1px; margin: -10px auto 0;
|
// -webkit-transform: rotate(-45deg);
|
// -moz-transform: rotate(-45deg);
|
// -ms-transform: rotate(-45deg);
|
// -o-transform: rotate(-45deg);
|
// transform: rotate(-45deg); "></div></div>`;
|
// window.divPointa = window.sgworld.view.createScreenDialog({
|
// html: htmldiv,
|
// lon: 116.44939735145238,
|
// lat: 23.717037101568934,
|
// height: 10000,
|
// });
|
// setTimeout(() => {
|
// window.divPointa.removeFromMap();
|
// }, 10000);
|
},
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
.divPoint-custom {
|
text-align: center;
|
padding: 5px 30px;
|
margin: 0;
|
color: #fff;
|
background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
|
border-radius: 5px;
|
max-height: 130px;
|
user-select: none;
|
}
|
|
.divPoint-custom:after {
|
content: "";
|
position: absolute;
|
bottom: -60px;
|
left: calc(50% - 3px);
|
display: block;
|
width: 3px;
|
height: 60px;
|
border-right: 3px solid #2bcdbb;
|
}
|
</style>
|
<style>
|
#navigationDiv {
|
display: none;
|
}
|
</style>
|
