|
|
<template>
|
<!-- <div class="home">
|
<el-container>
|
<el-main
|
style="background-color: red; margin: 0; padding: 10px; display: flex"
|
>
|
<div
|
id="3dviewerEx"
|
style="display: inline-block; width: 50%; margin: 5px"
|
>
|
<sdk-container-ex />
|
</div>
|
<three-d-viewer id="3dviewer" style="width: 50%; margin: 5px" />
|
</el-main>
|
</el-container>
|
</div> -->
|
<iframe src="https://cim.smartearth.cn/cims/api.html" style="width: 100%; height: 100%" frameborder="no" border="0"
|
marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
|
</template>
|
|
<script>
|
// import sdkContainer from "../../components/sgword/mapView.vue";
|
// import sdkContainerEx from "../../components/sgword/mapViewEx.vue";
|
// import ThreeDViewer from "../../components/developcenter/mainViewer/ThreeDViewer.vue";
|
|
// export default {
|
// components: { sdkContainer, sdkContainerEx, ThreeDViewer },
|
// methods: {
|
// syncViewer(global1, global2) {
|
// global1.camera.flyTo({
|
// destination: global2.camera.position,
|
// orientation: {
|
// heading: global2.camera.heading,
|
// pitch: global2.camera.pitch,
|
// roll: global2.camera.roll,
|
// },
|
// duration: 0.0,
|
// });
|
// },
|
// },
|
// mounted() {
|
// let that = this;
|
// this.$nextTick(() => {
|
// if (sgworld && sgworldEx) {
|
// Viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(0, 0),
|
// label: {
|
// text: new Cesium.CallbackProperty(function () {
|
// that.syncViewer(ViewerEx, Viewer);
|
// return "";
|
// }, true),
|
// },
|
// });
|
// ViewerEx.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(0, 0),
|
// label: {
|
// text: new Cesium.CallbackProperty(function () {
|
// that.syncViewer(Viewer, ViewerEx);
|
// return "";
|
// }, true),
|
// },
|
// });
|
// }
|
// });
|
// },
|
// };
|
// name: "olCesium01",
|
|
// // import cesiumComponent from "../cesium/cesium.vue";
|
// import olcsCamera from "../../utils/olcs/Camera.js";
|
// import olMap from "ol/Map";
|
// import olView from "ol/View";
|
// import olTileLayer from "ol/layer/Tile";
|
// import olXYZ from "ol/source/XYZ";
|
// import olctrl from "ol/control";
|
|
// function intialOlMap() {
|
// //普通地图
|
// const tiandituVecLayer = new olTileLayer({
|
// title: "generalMap",
|
// source: new olXYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824",
|
// crossOrigin: "anonymous",
|
// }),
|
// // zIndex: 1,
|
// visible: true,
|
// });
|
// //普通地图标记
|
// const tiandituCvaLayer = new olTileLayer({
|
// title: "generalMapZj",
|
// source: new olXYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824",
|
// crossOrigin: "anonymous",
|
// }),
|
// visible: true,
|
// });
|
// //影像地图
|
// const tiandituImgLayer = new olTileLayer({
|
// title: "generalMapImg",
|
// source: new olXYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1",
|
// crossOrigin: "anonymous",
|
// }),
|
// visible: true,
|
// });
|
// //影像地图标注
|
// const tiandituCiaLayer = new olTileLayer({
|
// title: "generalMapImgZj",
|
// source: new olXYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1",
|
// crossOrigin: "anonymous",
|
// }),
|
// visible: true,
|
// });
|
// return new olMap({
|
// target: "eye",
|
// layers: [
|
// tiandituImgLayer,
|
// tiandituCiaLayer,
|
// tiandituVecLayer,
|
// tiandituCvaLayer,
|
// ],
|
// view: new olView({
|
// center: [13410926.774433982, 3715530.4937355495],
|
// zoom: 12,
|
// }),
|
// controls: defaultControls({
|
// attributionOptions: {
|
// collapsible: false,
|
// },
|
// }),
|
// });
|
// }
|
//export default {
|
// name: "olCesium01",
|
// data() {
|
// return {
|
// _viewer: undefined,
|
// scene_: undefined,
|
// view_: undefined,
|
// camera_: null,
|
// targetFrameRate_: Number.POSITIVE_INFINITY,
|
// lastFrameTime_: 0,
|
// time_: function () {
|
// return Cesium.JulianDate.now();
|
// },
|
// layer: {
|
// tiandituVecLayer: "",
|
// tiandituCvaLayer: "",
|
// tiandituImgLayer: "",
|
// tiandituCiaLayer: "",
|
// },
|
// map: "",
|
// };
|
// },
|
// components: {
|
// esiumComponent,
|
// sdkContainer,
|
// },
|
// mounted() {
|
// this.init();
|
// // this.addTiles();
|
// },
|
// methods: {
|
// init() {
|
// let that = this;
|
// // this.$refs.refCesium.initMap();
|
// let viewer = sgworld.Viewer;
|
// this._viewer = viewer;
|
// that.scene_ = viewer.scene;
|
// //渲染铯场景
|
// that.render_();
|
// this.addOlMap();
|
// this.testOlCs();
|
// },
|
// addOlMap() {
|
// var that = this;
|
// this.map = intialOlMap();
|
// this.view_ = this.map.getView();
|
// },
|
// addTiles() {
|
// // cesium加载代码
|
// let tileSet = this._viewer.scene.primitives.add(
|
// new Cesium.Cesium3DTileset({
|
// url: "../res/data/3dtiles/tianjie/tileset.json",
|
// modelMatrix: Cesium.Matrix4.fromArray([
|
// 0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0,
|
// -0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0,
|
// -0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0,
|
// -663.0794944260269, 1211.490494620055, 2974.1003134818748, 1,
|
// ]),
|
// })
|
// );
|
// this._viewer.flyTo(tileSet);
|
// },
|
|
// testOlCs() {
|
// this.camera_ = new olcsCamera(this._viewer.scene, this.map);
|
// this.camera_.checkCameraChange();
|
// },
|
// /**
|
// * Render the Cesium scene
|
// */
|
// render_() {
|
// // if a call to `requestAnimationFrame` is pending, cancel it
|
// if (this.renderId_ !== undefined) {
|
// cancelAnimationFrame(this.renderId_);
|
// this.renderId_ = undefined;
|
// }
|
|
// this.renderId_ = requestAnimationFrame(this.onAnimationFrame_.bind(this));
|
// },
|
|
// /**
|
// * Callback for `requestAnimationFrame`.
|
// * @param {number} frameTime The frame time, from `performance.now()`.
|
// * @private
|
// */
|
// onAnimationFrame_(frameTime) {
|
// this.renderId_ = undefined;
|
|
// // check if a frame was rendered within the target frame rate
|
// const interval = 1000.0 / this.targetFrameRate_;
|
// const delta = frameTime - this.lastFrameTime_;
|
// if (delta < interval) {
|
// // too soon, don't render yet
|
// this.render_();
|
// return;
|
// }
|
|
// // time to render a frame, save the time
|
// this.lastFrameTime_ = frameTime;
|
|
// const julianDate = this.time_();
|
// this.scene_.initializeFrame();
|
|
// this.scene_.render(julianDate);
|
// this.camera_.checkCameraChange();
|
|
// // request the next render call after this one completes to ensure the browser doesn't get backed up
|
// this.render_();
|
// },
|
// },
|
// created() {},
|
// };
|
</script>
|
|
<style scoped lang="less" >
|
.home {
|
background-color: rgb(0, 19, 32);
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
|
.el-container {
|
height: 100%;
|
padding: 5px;
|
}
|
|
.el-aside {
|
height: 100%;
|
}
|
}
|
|
#eye {
|
position: absolute;
|
width: 20%;
|
height: 20%;
|
bottom: 0;
|
right: 0;
|
z-index: 999;
|
background: red;
|
border: solid blue 1px;
|
}
|
|
#cesiumContainer {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
</style>
|
