<template>
|
<div class="home">
|
<div id="eye" style="width: 100%; height: 100%"></div>
|
</div>
|
</template>
|
<script>
|
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 { defaults as defaultControls } from "ol/control";
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let Cesium = SmartEarth.Cesium;
|
|
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",
|
minimumLevel: 0, // 最小级别
|
maximumLevel: 18, // 最大级别
|
}),
|
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: 5,
|
}),
|
controls: defaultControls({
|
zoom: true,
|
rotate: false,
|
attribution: 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: {},
|
|
methods: {
|
init() {
|
let that = this;
|
// this.$refs.refCesium.initMap();
|
if (sgworld) {
|
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();
|
},
|
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() { },
|
computed: {
|
_linkage() { // 计算属性
|
return this.$store.state._linkage; // Vuex 中定义的属性
|
}
|
},
|
watch: {
|
_linkage() {
|
this.init(); // 需要调用的方法
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="less" >
|
.home {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
#eye {
|
z-index: 999;
|
}
|
</style>
|
