92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div style="height: 100%;">
|
||
|
|
<div style="height: 100%;" v-loading="loading">
|
||
|
|
<div id="cesiumContainer" style="height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'JhbigscreenMapModle',
|
||
|
|
props: {
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
images: [],
|
||
|
|
loading: false,
|
||
|
|
mapInfo: null,
|
||
|
|
project: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.initMe();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
initMe() {
|
||
|
|
this.project = this.$root.project;
|
||
|
|
this.reloadMap();
|
||
|
|
},
|
||
|
|
reloadMap() {
|
||
|
|
this.mapInfo = {
|
||
|
|
root: "http://szgc.jhncidg.com:808/mapmodel/Tools/output/model/202308292207450987/root.glt",
|
||
|
|
modelId: '3a0d53cc-ad56-688c-e38d-f907088c2882'
|
||
|
|
};
|
||
|
|
this.showMap = true;
|
||
|
|
this.loading = true;
|
||
|
|
setTimeout(this.initMap, 200);
|
||
|
|
|
||
|
|
},
|
||
|
|
initMap() {
|
||
|
|
const func = () => {
|
||
|
|
if (!document.getElementById("cesiumContainer")) {
|
||
|
|
setTimeout(func, 50);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!window.initMap) {
|
||
|
|
setTimeout(func, 50);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.loading = false;
|
||
|
|
window.initMap();
|
||
|
|
window.mapApi.Model.add(
|
||
|
|
this.mapInfo.root,
|
||
|
|
this.mapInfo.modelId,
|
||
|
|
null,
|
||
|
|
(data) => {
|
||
|
|
if (Cesium.defined(data)) {
|
||
|
|
if (Cesium.defined(data.obj) && data.obj instanceof Cesium.Cesium3DTileset) {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
(data) => {
|
||
|
|
$("#box,#LoadingShadow").hide()
|
||
|
|
});
|
||
|
|
window.mapApi.Public.Event("LEFT_CLICK", function (click) {
|
||
|
|
window.mapApi.Feature.GetFeatureByEvent(click.position, function (json) {
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
func();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
#cesiumContainer {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cesium-plugin-cube_cesiumContainer {
|
||
|
|
transform: scale(0.6);
|
||
|
|
}
|
||
|
|
</style>
|