<!--
|
* @Descripttion:
|
* @version: 1.0.0
|
* @Author: glc
|
* @Date: 2023-04-12 13:12:27
|
* @LastEditors: Andy
|
* @LastEditTime: 2023-04-13 13:12:48
|
-->
|
<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2022-03-18 15:54:26
|
* @LastEditTime: 2022-08-25 21:10:03
|
* @LastEditors: Andy
|
-->
|
<template>
|
<div id="sdkContainer">
|
<property-view :isVisibleDialog="IsShowPropertyView" :conId="conpentId" :modelId="modelId"></property-view>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { mapState, mapActions } from "vuex";
|
import PropertyView from "../property/propertyview.vue";
|
import axios from "axios";
|
import * as SmartEarth from "../../../public/CimSDK/index.js"
|
import keyMoveCamera from "../../utils/KeyMoveCamera";
|
function closePopou() {
|
if (window.divPoint) {
|
window.divPoint.deleteObject();
|
}
|
}
|
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) {
|
let that = this;
|
let gmlid = "(gmlid:$eq:" + modelId + "_" + conId + ")";
|
var url =
|
BIM_PROPERTY_URL +
|
servername +
|
"/query?keyValues=" +
|
gmlid +
|
"&type=installation";
|
var p = axios.get(url); //这个axios()返回的是一个Promise对象，需要对这个对象进行处理
|
p.then(
|
(response) => {
|
// 判断响应状态
|
if (response.status === 200) {
|
that.objectdatas = [];
|
//销毁前一个
|
if (window.divPoint) {
|
window.divPoint.deleteObject();
|
}
|
//获得成功响应返回的数据
|
console.log(response.data);
|
if (response.data.length === 0) {
|
that.$message("未查询到属性");
|
} else {
|
let htmldiv = `
|
<div style="padding: 10px;margin-left: 20px;margin-bottom: 20px;z-index:99999;
|
background:#fff;
|
border-radius: 15px; border-bottom-left-radius:5px;
|
user-select: none;" >
|
<div style="text-align:right;">
|
<a style=" padding: 4px 4px 0 0;text-align: center;width: 18px;height: 14px;
|
font: 16px/14px Tahoma, Verdana, sans-serif;
|
color: #c3c3c3;
|
text-decoration: none;cursor:pointer;
|
font-weight: bold;
|
background: transparent;" class="closebtn" href="#" onclick="closePopou()">×</a>
|
</div>
|
<div class="leaflet-popup-content-wrapper">
|
<table border="1">
|
<tr>
|
<th>属性名</th>
|
<th>属性值</th>
|
</tr>`;
|
|
let dataobject = response.data[0];
|
let objectdata = dataobject["attributes"];
|
for (var item in objectdata) {
|
let index = this.keynames.findIndex(
|
(itemobj) => itemobj.code == item
|
);
|
if (index >= 0) {
|
let prooertyobj = {
|
name: this.keynames[index]["value"],
|
value: objectdata[item],
|
};
|
this.objectdatas.push(prooertyobj);
|
htmldiv +=
|
`<tr><td style="padding:5px">` +
|
this.keynames[index]["value"] +
|
`</td><td style="padding:5px">` +
|
objectdata[item] +
|
`</td></tr>`;
|
}
|
}
|
|
htmldiv += `</table></div><div style=" background: white;position:absolute;bottom:-8px;
|
left: 12px;
|
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.divPoint = window.sgworld.Creator.createDivPoint(
|
"属性",
|
[that.pickx, that.picky, that.pickh],
|
{
|
type: "custom",
|
description: htmldiv,
|
far: 3000,
|
}
|
);
|
}
|
} else {
|
that.$message(response.statusText);
|
}
|
},
|
(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',
|
})
|
window.sgworld = new SmartEarth.EarthCtrl("sdkContainer", {
|
licenseServer: LICENSE_URL,//服务
|
imageryProvider: imageryProvider,
|
StaticFileBaseUrl:"./CimSDK/",
|
shouldAnimate:true,
|
});
|
// 使用单张地图图片
|
// window.sgworld = new SmartEarth.SGWorld(
|
// "sdkContainer",
|
// Cesium,
|
// {
|
// licenseServer: LICENSE_URL,//'http://183.162.245.49:18080',
|
// url: SmartEarthRootUrl + "Workers/image/earth.jpg", //不含单张地图图片url则使用在线地图
|
// }
|
// );
|
window.Viewer = sgworld._Viewer;
|
Viewer.scene.debugShowFramesPerSecond = true;
|
// sgworld._Viewer.scene.primitives.add(
|
// new Cesium.DebugModelMatrixPrimitive({
|
// modelMatrix: Cesium.Matrix4.fromTranslation(
|
// new Cesium.Cartesian3(0, 0, 0)
|
// )
|
// })
|
// );
|
Viewer.scene.debugShowFramesPerSecond = true;
|
let bimoptions = {
|
//酒店网服务
|
//serverAddress: "https://192.168.137.1:8085/",
|
//坪山政务网服务
|
// serverAddress: "https://192.168.10.95:8085/",
|
serverAddress: BIM_MODEL_SERVICE_URL,
|
//serverAddress: "https://localhost:8085/",
|
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) => {
|
// debugger
|
// _this.$store.commit("updateModelList", modelList);
|
// };
|
// debugger
|
// bim.OnModelInitialized = (modelId) => {
|
// debugger
|
// console.log("模型初始化完成", modelId);
|
// bim.ShowModel(modelId);
|
// if (_this.bimModelTransform !== null)
|
// bim.SetModelTransform(modelId, _this.bimModelTransform);
|
// // _this.$store.commit("CLOSE_LOADING");
|
// };
|
bim.OnInitialized = (modelList) => {
|
console.log(bim)
|
_this.$store.commit("updateModelList", modelList);
|
// for (let modelId in modelList){
|
// debugger
|
// // if (_this.bimModelTransform !== null)
|
// // bim.SetModelTransform(modelId, _this.bimModelTransform);
|
// // // _this.$store.commit("CLOSE_LOADING");
|
// // bim.ShowModel(modelId);
|
// // var position = Cesium.Cartesian3.fromDegrees(120.90590449, 30.82990, 0);
|
// // let modelTransform = Cesium.Matrix4.toArray(Cesium.Transforms.eastNorthUpToFixedFrame(position));
|
// // bim.SetModelTransform(modelId, modelTransform);
|
// }
|
|
};
|
|
let ids = [];
|
_this = this;
|
|
let screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(sgworld._Viewer.scene.canvas);
|
screenSpaceEventHandler.setInputAction(function onLeftClick(
|
movement
|
) {
|
bim.PickId(
|
movement.position.x,
|
movement.position.y
|
).then((modelIdAndInstancesId) => {
|
let modelId = modelIdAndInstancesId[0];
|
let instancesId = modelIdAndInstancesId[1];
|
let componentId = modelIdAndInstancesId[2];
|
bim.GetModelSqlDb(modelId).then(modelDb => {
|
modelDb.each(`select component.*,modelChild.md5 from component left join modelChild on component.modelChildId = modelChild.id where component.id = ?`, [componentId], (component) => {
|
// 构件包含的实例ids
|
_this.modelId = component.md5
|
_this.conpentId = component.ifcId
|
let servername = "";
|
let item = _this.$store.state.currentSelectNode;
|
let cartesian3;
|
servername = item.num;
|
component.instancesIds = new Uint32Array(component.instancesIds.buffer)
|
// 构件的模型空间包围盒
|
|
// let ids = []
|
// 组装需要设置状态的ids
|
for (let instancesId of component.instancesIds) {
|
// [modelId,instancesId,status(0:隐藏,1显示,2选中)]
|
let strId = instancesId.toString()
|
if (_this.selectId) {
|
bim.SetInstancesStatus(1, new Int32Array(_this.selectId));
|
}
|
_this.selectId = [modelId, instancesId];
|
bim.SetInstancesStatus(2, new Int32Array(_this.selectId));
|
window.selectId = _this.selectId;
|
|
}
|
bim.PickWorldPosition(
|
movement.position.x,
|
movement.position.y
|
).then((worldPosition) => {
|
cartesian3 = new Cesium.Cartesian3(worldPosition[0], worldPosition[1], worldPosition[2]);
|
// 防止点击到地球之外报错，加个判断
|
if (cartesian3 && Cesium.defined(cartesian3)) {
|
let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
|
_this.pickx = Cesium.Math.toDegrees(cartographic.longitude);
|
_this.picky = Cesium.Math.toDegrees(cartographic.latitude);
|
_this.pickh = cartographic.height;
|
console.log(_this.pickx, _this.picky, _this.pickh);
|
_this.getDetail(servername, _this.modelId, _this.conpentId);
|
}
|
|
});
|
})
|
});
|
})
|
|
|
//点击高亮
|
// if (_this.selectId) {
|
// _this.selectId[2] = 1;
|
// bim.SetInstancesStatus(new Int32Array(_this.selectId));
|
// }
|
// _this.selectId = [...modelIdAndInstancesId, 2];
|
// bim.SetInstancesStatus(new Int32Array(_this.selectId));
|
// window.selectId = _this.selectId;
|
//
|
// console.log(modelIdAndInstancesId);
|
// // let modelId = modelIdAndInstancesId[0];
|
// // let modelSqldb = bim.GetModelSqlDb(modelId)
|
// // modelSqldb.each(`select * from component where id = (select componentId from meshInstances where id = ?)`, [modelIdAndInstancesId[1]], (component) => {
|
// // result = component;
|
// // })
|
//
|
// let component = bim.GetComponent(modelIdAndInstancesId[0], modelIdAndInstancesId[1]);
|
// let boundingSphere;
|
// if (component) {
|
// _this.conpentId = component.ifcId;
|
// _this.modelId = component.md5;
|
// // if (_this.conpentId != null && _this.conpentId !== "") {
|
// // _this.IsShowPropertyView = true;
|
// // }
|
// let servername = "";
|
// let item = _this.$store.state.currentSelectNode;
|
// if (item) {
|
// servername = "ps" + item.num;
|
// let modelTransform = item.modelTransform;
|
// boundingSphere = _this.getBIMBoundingSphere(bim, modelTransform, modelIdAndInstancesId);
|
// let cartesian3;
|
// if (boundingSphere) {
|
// cartesian3 = boundingSphere.center;
|
// } else {
|
// cartesian3 = Viewer.scene.camera.pickEllipsoid(movement.position, Viewer.scene.globe.ellipsoid);
|
// } // 防止点击到地球之外报错，加个判断
|
// if (cartesian3 && Cesium.defined(cartesian3)) {
|
// let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
|
// _this.pickx = Cesium.Math.toDegrees(cartographic.longitude);
|
// _this.picky = Cesium.Math.toDegrees(cartographic.latitude);
|
// _this.pickh = cartographic.height;
|
// console.log(_this.pickx, _this.picky, _this.pickh);
|
// }
|
// } else {
|
// _this.$message("未获取到当前Bim服务地址");
|
// return;
|
// }
|
// _this.getDetail(servername, _this.modelId, _this.conpentId);
|
// } else {
|
// //销毁前一个
|
// if (_this.divPoint) {
|
// _this.divPoint.deleteObject();
|
// }
|
// }
|
},
|
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.Navigate.jumpTo({
|
destination: Cesium.Cartesian3.fromDegrees(x, y, z),
|
orientation: {
|
heading: Cesium.Math.toRadians(h),
|
pitch: Cesium.Math.toRadians(p),
|
roll: Cesium.Math.toRadians(r)
|
},
|
});
|
}
|
|
//跳转坪山视角
|
// sgworld.Navigate.jumpTo({
|
// destination: new Cesium.Cartesian3.fromDegrees(
|
// 114.34201240539551,
|
// 22.70984778456524,
|
// 8000
|
// ),
|
// });
|
//嘉善视角
|
// sgworld.Navigate.jumpTo({
|
// destination: Cesium.Cartesian3.fromDegrees(
|
// 120.9052479,
|
// 30.8246174,
|
// 250
|
// ),
|
// orientation: {
|
// heading: Cesium.Math.toRadians(0.0),
|
// pitch: Cesium.Math.toRadians(-20.0),
|
// roll: Cesium.Math.toRadians(0.0),
|
// },
|
// });
|
// sgworld.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 26, 150.0, 35.5);
|
$("#distanceLegendDiv").css("top", "0px");
|
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,
|
});
|
console.log(window.divPointa)
|
},
|
|
//获取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;
|
},
|
},
|
mounted() {
|
this.init3DMap();
|
},
|
destroyed() {
|
|
}
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 99%;
|
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>
|
