不向現實低頭，不服輸，永不放棄學習 送給每一位戰鬥的工程師，這幾天寫了一個簡單的分屏效果，在這記錄一下，希望能幫到有緣人，原理很簡單就是兩個Viewer，話不多說直接上代碼
/*
* @Author: your name
* @Date: 2019-11-07 09:00:17
* @LastEditTime: 2019-11-13 12:54:28
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \cesium-vue-webpack-master\Source\components\splitScreenAnalysis.js
*/
import DTGlobe from "../main"
import { initViewer, initScene } from "../global"
import CesiumNavigation from "cesium-navigation-es6";
/**
* @description:
* @param {type}
* @return:
*/
function SplitScreenAnalysis(options) {
this._viewerROptions = options.viewerROptions;
this._viewerL = options.viewer;
this._Cesium = options.cesium;
this._viewerR = this.CreateViewer(this._viewerROptions);
this._isLeftTrigger = false;
this._isRightTrigger = false;
this._viewerLTilesetOrModel = undefined;
this._viewerRTilesetOrModel = undefined;
this.InitSplitScreenAnalysis();
}
/**
* @description: 定義屬性
* @param {type}
* @return:
*/
Object.defineProperties(SplitScreenAnalysis.prototype, {
viewerL: {
get: function () {
return this._viewerA
},
},
viewerR: {
get: function () {
return this._viewerB
},
},
viewerLTilesetOrModel: {
get: function () {
return this._viewerLTilesetOrModel
},
},
viewerRTilesetOrModel: {
get: function () {
return this._viewerRTilesetOrModel
},
},
isLeftTrigger: {
get: function () {
return this._isLeftTrigger
},
set: function (value) {
this._isLeftTrigger = value
}
},
isRightTrigger: {
get: function () {
return this._isRightTrigger
},
set: function (value) {
this._isRightTrigger = value
}
},
})
/**
* @description: 創建viewer
* @param {type} HTMLContainer
* @return:
*/
SplitScreenAnalysis.prototype.CreateViewer = function (viewerROptions) {
const viewer = initViewer(
viewerROptions.container,
viewerROptions.depthTest,
this._Cesium,
viewerROptions.CesiumNavigation
);
return viewer;
}
/**
* @description: 初始化視圖
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.InitSplitScreenAnalysis= function () {
if(this._viewerL===undefined||this._viewerR===undefined){
return;
}
this.syncViewer()
}
/**
* @description: 加載3Dtile
* @param {type} 三維視圖viewer，url爲模型地址
* @return:
*/
SplitScreenAnalysis.prototype.load3Dtiles = function (viewer, url) {
let Cesium = this._Cesium
let tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: url
})
);
tileset.readyPromise.then(function (tileset) {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.7,
-0.2,
tileset.boundingSphere.radius * 1.0
)
);
}).otherwise(function (error) {
console.log(error);
});
return tileset;
}
/**
* @description: viewerL添加模型數據
* @param {type}options.url模型的url
* @param {type}options.modelMatrix模型的矩陣
* @param {type}options.lng 所在經度
* @param {type}options.lng 所在維度
* @param {type}options.height 所在高度
* @return:
*/
SplitScreenAnalysis.prototype.viewerLloadModel = function (options) {
this._isLeftTrigger = true;
this._isRightTrigger = false;
this.removeViewerTileset("viewerL");
let Cesium = this._Cesium
let model = this._viewerL.scene.primitives.add(Cesium.Model.fromGltf({
// 資源路徑
url: options.url,
// 模型矩陣
modelMatrix: options.modelMatrix,
// 模型最小刻度
minimumPixelSize: 128,
// 模型標尺
scale: 2.0,
// 模型最大刻度
maximumScale: 20000,
// 僅用於調試。顯示模型繪製時的邊界球。
debugShowBoundingVolume: false,
// 僅用於調試，顯示魔仙繪製時的線框
debugWireframe: false
}));
this._viewerL.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.height)
});
this._viewerLTilesetOrModel=model;
}
/**
* @description: viewerR添加模型數據
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.viewerRloadModel = function (options) {
this.isLeftTrigger = false;
this.isRightTrigger = true;
this.removeViewerTileset("viewerR");
let Cesium = this._Cesium
let model = this._viewerR.scene.primitives.add(Cesium.Model.fromGltf({
// 資源路徑
url: options.url,
// 模型矩陣
modelMatrix: options.modelMatrix,
// 模型最小刻度
minimumPixelSize: 128,
// 模型標尺
scale: 2.0,
// 模型最大刻度
maximumScale: 20000,
// 僅用於調試。顯示模型繪製時的邊界球。
debugShowBoundingVolume: false,
// 僅用於調試，顯示魔仙繪製時的線框
debugWireframe: false
}));
this._viewerR.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.height)
});
this._viewerRTilesetOrModel=model;
}
/**
* @description: 同步相機狀態
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.syncViewer = function () {
let that=this
let Cesium = this._Cesium;
let viewerL = this._viewerL
let viewerR = this._viewerR
var sceneL = viewerL.scene;
var sceneR = viewerR.scene;
var handlerL = new Cesium.ScreenSpaceEventHandler(sceneL.canvas);
var ellipsoidL = sceneL.globe.ellipsoid;
var handlerR = new Cesium.ScreenSpaceEventHandler(sceneR.canvas);
var ellipsoidR = sceneR.globe.ellipsoid;
handlerL.setInputAction((movement)=> {
this.isLeftTrigger = true;
this.isRightTrigger = false;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handlerR.setInputAction((movement)=> {
this.isLeftTrigger = false;
this.isRightTrigger = true;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
var syncViewerL = function () {
if (that.isLeftTrigger) {
viewerR.camera.flyTo({
destination: viewerL.camera.position,
orientation: {
heading: viewerL.camera.heading,
pitch: viewerL.camera.pitch,
roll: viewerL.camera.roll
},
duration: 0.0
});
}
}
viewerR.camera.changed.addEventListener(syncViewerL);
viewerR.scene.preRender.addEventListener(syncViewerL);
var syncViewerR = function () {
if (that.isRightTrigger) {
viewerL.camera.flyTo({
destination: viewerR.camera.position,
orientation: {
heading: viewerR.camera.heading,
pitch: viewerR.camera.pitch,
roll: viewerR.camera.roll
},
duration: 0.0
});
}
}
viewerR.camera.changed.addEventListener(syncViewerR);
viewerR.scene.preRender.addEventListener(syncViewerR);
}
/**
* @description: viewerL添加3DTiles數據
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.viewerLLoad3Dtile = function (url) {
this._isLeftTrigger = true;
this._isRightTrigger = false;
this.removeViewerTileset("viewerL");
this._viewerLTilesetOrModel=this.load3Dtiles(this._viewerL, url)
}
/**
* @description: viewerR添加3DTiles數據
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.viewerRLoad3Dtile = function (url) {
this.isLeftTrigger = false;
this.isRightTrigger = true;
this.removeViewerTileset("viewerR");
this._viewerRTilesetOrModel=this.load3Dtiles(this._viewerR, url)
}
/**
* @description: 移除3DtileOrModel
* @param {type}
* @return:
*/
SplitScreenAnalysis.prototype.removeViewerTileset = function (type) {
let that = this
switch (type) {
case "viewerL":
if (that._viewerLTilesetOrModel != undefined) {
that._viewerL.scene.primitives.remove(that._viewerLTilesetOrModel);
console.log(this._viewerLTilesetOrModel)
}
break;
case "viewerR":
if (that._viewerRTilesetOrModel != undefined) {
that._viewerR.scene.primitives.remove(that._viewerRTilesetOrModel);
console.log(this._viewerRTilesetOrModel)
}
break;
default:
if (that._viewerLTilesetOrModel != undefined) {
that._viewerL.scene.primitives.remove(that._viewerLTilesetOrModel);
}
if (that._viewerRTilesetOrModel != undefined) {
that._viewerR.scene.primitives.remove(that._viewerRTilesetOrModel);
}
}
}
SplitScreenAnalysis.prototype.setViewerClass = function () {
}
export default SplitScreenAnalysis
調用示例：
1、引用
import initViewer from "../scripts/initViewer";
2、初始化調用
const url = "http://localhost:9000/model/0fac1df0003b11eaab01bd5a75f57b94/tileset.json";
let options={
"viewerROptions":{
"container":"cesiumRightDiv",
"depthTest":this.$store.getters.system.depthTest,
"CesiumNavigation":CesiumNavigation
},
"viewer":viewer,
"cesium":cesium
}
const url = "http://localhost:9000/model/0fac1df0003b11eaab01bd5a75f57b94/tileset.json";
let test=new SplitScreenAnalysis(options);
test.viewerRLoad3Dtile(url)
參考文章：https://mp.weixin.qq.com/s?__biz=MzU1ODcyMjEwOA==&mid=2247484322&idx=1&sn=9ce86c6b0d4fb0ee2cd626827df5f828&chksm=fc237ef1cb54f7e729eb9b03cb233a8809963924e2e4503debc0424adadc1a59e88ac46c6abf&scene=21#wechat_redirect