/* eslint-disable camelcase */
|
<template>
|
<div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
|
<div class="map-box" id="viewer-container-one">
|
<select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
|
</div>
|
<div class="map-box" id="viewer-container-two">
|
<select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
|
</div>
|
<div class="map-box" id="viewer-container-three">
|
<select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
|
</div>
|
<div class="map-box" id="viewer-container-four">
|
<select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
|
</div>
|
|
<div class="line-row"></div>
|
<div class="line-column"></div>
|
</div>
|
</template>
|
|
<script>
|
window.viewerOne = null
|
window.viewerTwo = null
|
window.viewerThree = null
|
window.viewerFour = null
|
|
let handlerTL = null
|
let handlerTR = null
|
let handlerBL = null
|
let handlerBR = null
|
|
export default {
|
name: 'splitScreen',
|
|
data () {
|
return {
|
rollerCloseShow: false
|
}
|
},
|
|
computed: {
|
|
},
|
mounted () {
|
const that = this
|
|
this.$nextTick(() => {
|
function initViewer () {
|
window.viewerOne = new global.DC.Viewer('viewer-container-one', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
window.viewerTwo = new global.DC.Viewer('viewer-container-two', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
window.viewerThree = new global.DC.Viewer('viewer-container-three', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
window.viewerFour = new global.DC.Viewer('viewer-container-four', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
|
window.viewerOne.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
|
window.viewerTwo.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
|
window.viewerThree.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
|
window.viewerFour.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
}
|
|
// 影像
|
window.viewerOne.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
window.viewerTwo.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
window.viewerThree.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
window.viewerFour.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
// 矢量电子
|
// global.viewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
// maximumLevel: 18
|
// })
|
// )
|
|
// global.viewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
// maximumLevel: 18
|
// })
|
// )
|
|
that.initHandler(window.viewerOne, window.viewerTwo, window.viewerThree, window.viewerFour)
|
|
window.viewerOne.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
116.56705776, 27.42386903, 1800.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
window.viewerTwo.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
116.56705776, 27.42386903, 1800.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
window.viewerThree.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
116.56705776, 27.42386903, 1800.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
window.viewerFour.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
116.56705776, 27.42386903, 1800.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
// global.viewer.locationBar.enable = true
|
}
|
|
global.DC.ready(initViewer)
|
})
|
},
|
methods: {
|
cameraSetView (viewer, camera) {
|
viewer.camera.setView({
|
destination: camera.position,
|
orientation: {
|
direction: camera._direction,
|
up: camera.up,
|
heading: camera.heading,
|
pitch: camera.pitch,
|
roll: camera.roll
|
}
|
})
|
},
|
|
initMovement (handler, viewer0, viewer1, viewer2, viewer3) {
|
const that = this
|
handler.setInputAction(function (movement) {
|
const camera = viewer0.camera
|
that.cameraSetView(viewer1, camera)
|
that.cameraSetView(viewer2, camera)
|
that.cameraSetView(viewer3, camera)
|
}, global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|
handler.setInputAction(function (movement) {
|
const camera = viewer0.camera
|
that.cameraSetView(viewer1, camera)
|
that.cameraSetView(viewer2, camera)
|
that.cameraSetView(viewer3, camera)
|
}, global.DC.Namespace.Cesium.ScreenSpaceEventType.WHEEL)
|
},
|
|
initHandler (viewer0, viewer1, viewer2, viewer3) {
|
const that = this
|
|
if (handlerTL != null ||
|
handlerTR != null ||
|
handlerBL != null ||
|
handlerBR != null) {
|
return
|
}
|
|
handlerTL = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(viewer0.scene.canvas)
|
handlerTR = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(viewer1.scene.canvas)
|
handlerBL = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(viewer2.scene.canvas)
|
handlerBR = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(viewer3.scene.canvas)
|
|
that.initMovement(handlerTR, viewer1, viewer0, viewer2, viewer3)
|
that.initMovement(handlerBL, viewer2, viewer1, viewer0, viewer3)
|
that.initMovement(handlerBR, viewer3, viewer1, viewer2, viewer0)
|
that.initMovement(handlerTL, viewer0, viewer1, viewer2, viewer3)
|
},
|
|
clearHandler () {
|
if (handlerTR != null) {
|
handlerTR.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
handlerTR.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.WHEEL)
|
}
|
if (handlerBL != null) {
|
handlerBL.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
handlerBL.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.WHEEL)
|
}
|
if (handlerBR != null) {
|
handlerBR.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
handlerBR.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.WHEEL)
|
}
|
if (handlerTL != null) {
|
handlerTL.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
handlerTL.removeInputAction(global.DC.Namespace.Cesium.ScreenSpaceEventType.WHEEL)
|
}
|
}
|
},
|
|
destroyed () {
|
this.clearHandler()
|
handlerTL = null
|
handlerTR = null
|
handlerBL = null
|
handlerBR = null
|
|
window.viewerOne.destroy()
|
window.viewerTwo.destroy()
|
window.viewerThree.destroy()
|
window.viewerFour.destroy()
|
|
window.viewerOne = null
|
window.viewerTwo = null
|
window.viewerThree = null
|
window.viewerFour = null
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.eagle-eye-map {
|
position: fixed;
|
right: 10px;
|
bottom: 10px;
|
border: 5px solid orange;
|
border-radius: 50%;
|
width: 200px;
|
height: 200px;
|
z-index: 99;
|
overflow: hidden;
|
}
|
|
.current-wrapper {
|
display: flex;
|
flex-wrap: wrap;
|
|
.map-box {
|
position: relative;
|
width: 50%;
|
height: 50%;
|
|
.time {
|
position: absolute;
|
top: 35px;
|
left: 50%;
|
transform: translate(-50%, 0);
|
z-index: 99;
|
}
|
}
|
|
.line-row {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 4px;
|
height: 100%;
|
background: #fff;
|
}
|
.line-column {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 100%;
|
height: 4px;
|
background: #fff;
|
}
|
}
|
</style>
|
