<template>
|
<div class="panel">
|
<div v-show="flag" class="colseBox" @click="backTo2D()">
|
<img class="colseBtn" src="@/assets/closeinput1.png" />
|
</div>
|
<div id="sdkContainer"></div>
|
</div>
|
</template>
|
<script>
|
import {
|
leftClick,
|
loadLayer,
|
clearLayerByTypeId,
|
clearLayerByTypeIdArr,
|
} from "@/utils/map.js";
|
import _GLOBAL from "@/assets/GLOBAL";
|
import store from "@/utils/store.js";
|
import { layers } from "../../static/json/layer";
|
|
export default {
|
name: "viewer",
|
data() {
|
return {
|
state: store.tDCloseBtn,
|
flag: true,
|
};
|
},
|
watch: {
|
"state.show": function (val) {
|
this.flag = val;
|
},
|
},
|
mounted() {
|
this.$nextTick(function () {
|
console.log(store.tDCloseBtn);
|
let that = this;
|
let option = {
|
// licenseServer: "http://183.162.245.49:18080",
|
// StaticFileBaseUrl: "../../Mobile/static/CimSDK/",
|
// url: "./static/img/cesium/earth.jpg",
|
toolbar: false,
|
// fullscreenButton: true,
|
navigationOption: {
|
enableCompass: false,
|
enableZoomControls: false,
|
enableDistanceLegend: false,
|
enableCompassOuterRing: false,
|
},
|
};
|
//EPSG4326
|
// Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
// Cesium,
|
option,
|
// null,
|
function () {
|
sgworld.Navigate.jumpTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.52217697339846,
|
39.75979421847914,
|
17045.47005612415
|
),
|
});
|
setTimeout(() => {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.502368,
|
39.791361,
|
225.59
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(328.5),
|
pitch: Cesium.Math.toRadians(-27.5),
|
roll: Cesium.Math.toRadians(0.0),
|
},
|
duration: 5,
|
});
|
leftClick();
|
}, 2000);
|
},
|
setTimeout(() => {
|
that.handleSMapClick(
|
{
|
id: "swmx",
|
name: "三维模型",
|
active: false,
|
type: "san",
|
src: require("@/assets/img/layer/swmx.png"),
|
},
|
1
|
);
|
}, 1000)
|
);
|
window.Viewer = sgworld._Viewer;
|
Viewer.shadows = false;
|
Viewer.scene.fxaa = false;
|
Viewer.scene.postProcessStages.fxaa.enabled = false;
|
window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
|
window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //相机的高度的最小值
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 38000; //相机高度的最大值
|
});
|
},
|
methods: {
|
backTo2D() {
|
this.$router.push("/home");
|
},
|
// 三维模型选择
|
handleSMapClick(result, index) {
|
// // 设置相机
|
// if (result.name == "3D城市") {
|
// window.Viewer.scene.globe.maximumScreenSpaceError = 2;
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 45000;
|
// window.Viewer.scene.screenSpaceCameraController.enableTilt = true;
|
// } else if (result.name == "三维模型") {
|
// window.Viewer.scene.globe.maximumScreenSpaceError = 2;
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 80000;
|
// window.Viewer.scene.screenSpaceCameraController.enableTilt = true;
|
// }
|
// 切换图层
|
const val = layers.filter((res) => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const children = val[0].children;
|
clearLayerByTypeIdArr(["3Dcs", "swmx"]);
|
_GLOBAL.layers[result.id] = [];
|
children.forEach((item) => {
|
let itemLayer = loadLayer(item);
|
_GLOBAL.layers[result.id].push(itemLayer);
|
console.log(_GLOBAL.layers[result.id]);
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.panel,
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
background: black;
|
position: absolute !important;
|
}
|
|
.colseBox {
|
position: absolute;
|
z-index: 2;
|
top: 0.55rem;
|
right: 0.2rem;
|
}
|
.colseBox img {
|
width: 35px;
|
}
|
</style>
|
