130 lines
4.2 KiB
Vue
130 lines
4.2 KiB
Vue
<template>
|
|
<div style="height: 100%;position: relative;">
|
|
<div style="height: 100%;" v-loading="loading">
|
|
<div id="cesiumContainer" style="height: 100%;"></div>
|
|
</div>
|
|
<div class="toolbar" style="position: absolute;z-index: 100;bottom: 30px;right:12px;">
|
|
<el-switch @change="toggleGis"
|
|
v-model="showGis" active-text="GIS">
|
|
</el-switch>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { setToken } from '@/utils/auth';
|
|
|
|
|
|
export default {
|
|
name: 'JhbigscreenMapModle',
|
|
props: {
|
|
},
|
|
data() {
|
|
return {
|
|
showGis:true,
|
|
images: [],
|
|
loading: false,
|
|
mapInfo: null,
|
|
project: null
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.initMe();
|
|
},
|
|
|
|
methods: {
|
|
toggleGis(){
|
|
window.mapApi.Public.setGisState(this.showGis);
|
|
},
|
|
initMe() {
|
|
this.project = this.$root.project||{};
|
|
this.reloadMap();
|
|
},
|
|
reloadMap() {
|
|
this.mapInfo = {
|
|
root: "http://szgc.jhncidg.com:808/mapmodel/tools/output/model/202310241728566044/root.glt",
|
|
modelId: '3a0e7366-ad7b-3dc3-1d86-2331fc1e8578',
|
|
view:{"heading":4.8798740228358,"pitch":-0.22637630756730465,"position":[1.9366836920898733,0.5884137486301345,31809.670937187617],"headingDegrees":279.59618606401807,"pitchDegrees":-12.970407005361997,"positionWC":{"x":-1909610.0164615875,"y":4984113.66041506,"z":3537723.8441370176}}
|
|
};
|
|
this.showMap = true;
|
|
this.loading = true;
|
|
setTimeout(this.initMap, 200);
|
|
|
|
},
|
|
setView(){
|
|
let v=this.mapInfo.view;
|
|
window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
|
|
},
|
|
initMap() {
|
|
const func = () => {
|
|
if (!document.getElementById("cesiumContainer")) {
|
|
setTimeout(func, 50);
|
|
return;
|
|
}
|
|
if (!window.initMap) {
|
|
setTimeout(func, 50);
|
|
return;
|
|
}
|
|
this.loading = false;
|
|
let v=this.mapInfo.view;
|
|
window.initMap();
|
|
let time=+new Date();
|
|
console.log('%c开始加载模型','color:green')
|
|
window.mapApi.Model.AddModel(
|
|
this.mapInfo.root,
|
|
this.mapInfo.modelId,
|
|
null,
|
|
(data) => {
|
|
window.mapApi.Public.setGisState(true);
|
|
let ts=(+new Date() - time)/1000;
|
|
console.log('%c模型加载完成,用时'+ts+'s','color:green')
|
|
setTimeout(()=>{
|
|
let v=this.mapInfo.view;
|
|
window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
|
|
},400);
|
|
/*
|
|
if (Cesium.defined(data)) {
|
|
setTimeout(()=>{
|
|
|
|
},3000)
|
|
if (Cesium.defined(data.obj) && data.obj instanceof Cesium.Cesium3DTileset) {
|
|
setTimeout(()=>{
|
|
let v=this.mapInfo.view;
|
|
window.mapApi.Camera.setViewPort(v.position,v.heading,v.pitch);
|
|
},3000);
|
|
}
|
|
}*/
|
|
$("#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-viewer-toolbar{
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#cesium-plugin-cube_cesiumContainer {
|
|
transform: scale(0.6);
|
|
|
|
}
|
|
</style> |