cesium-⼆三维联动优化（ol-cesium）
cesium-⼆三维联动优化(ol-cesium)
之前已经实现了ol和cesium联动的效果了，但还是有点问题：cesium和ol平⾯视⾓联动还算正常的，但是当cesium为三维视⾓时联动的效果就出现问题。 这⾥使⽤ol-cesium来实现完善的联动效果
ol-cesium
介绍
方形气囊在 2D 和 3D 之间平滑切换并同步：
栅格数据源；
2D 和 3D 的⽮量数据源；
地图选择（选定项⽬）；
安装
我这⾥使⽤的是vue-cli框架
使⽤npm安装ol-cesium
npm i ol-cesium
使⽤例⼦如下：
import OLCesium from'ol-cesium';
const ol3d =new OLCesium({map: ol2dMap});// ol2dMap is the ol.Map instance
ol3d.setEnabled(true);
具体的参考demo可以去官⽹看看
实现效果
折流板除雾器ol-cesium⼆三维联动
我的这个项⽬并不需要全部的ol-cesium功能，我只需要其中⼀部分功能：cesium和ol视⾓联动的效果
最终效果实现的⼆三维同步效果如下：
实现代码
项⽬结构
lib⽬录中为从ol-cesium中提取出来的代码
核⼼代码是Camera.js，其它代码为相关依赖，主要就是修改⼀下相应代码的依赖
主要代码
testOLCs()
大蒜剥皮器使⽤camera⽅法
new olcsCamera(this._viewer.scene, this.map)；这⾥传⼊cesium的viewer和ol的map，让camera来管理两个地图的视⾓checkCameraChange()；开启viewer和map变化的监听
render_()
requestAnimationFrame()
请求动画帧回调⽅法
核⼼⽅法
testOlCs(){
this.camera_ =new olcsCamera(this._viewer.scene,this.map);
this.camera_.checkCameraChange();
},
/**
* 渲染铯场景
*/
render_(){
// 如果对 `requestAnimationFrame`（请求动画帧）的调⽤处于挂起状态，请取消它derId_ !==undefined){
derId_);
}
/**
* Callback for `requestAnimationFrame`. 请求动画帧回调⽅法
* @param {number} frameTime The frame time, from `w()`.帧时间 * @private
*/
onAnimationFrame_(frameTime){
// 检查帧是否在⽬标帧速率内渲染
const interval =1000.0/this.targetFrameRate_;
const delta = frameTime -this.lastFrameTime_;
if(delta < interval){
/
/ 太早了，还没渲染
return;
}
// 渲染⼀帧的时间，节省时间
this.lastFrameTime_ = frameTime;
const julianDate =this.time_();
this.scene_.initializeFrame();
this.scene_.render(julianDate);
this.camera_.checkCameraChange();
// 在这个完成后请求下⼀个渲染调⽤，以确保浏览器不会得到备份
}
完整代码
<template>
<div class="home">
<cesiumComponent ref="refCesium"/>
<div id="eye"></div>
</div>
</template>
<script>
import cesiumComponent from'../cesium/cesium.vue'
mesh设备
import olcsCamera from'./lib/Camera.js';
export default{
name:"olCesium01",
data(){
return{
_viewer:undefined,
scene_:undefined,
view_:undefined,
camera_:null,
camera_:null,
targetFrameRate_: Number.POSITIVE_INFINITY,
lastFrameTime_:0,
time_:function(){
return w()
},
layer:{
tiandituVecLayer:'',
tiandituCvaLayer:'',
tiandituImgLayer:'',
tiandituCiaLayer:'',
},
map:'',
};
},
components:{
cesiumComponent
},
mounted(){
this.init();
this.addTiles();
},
methods:{
init(){
let that=this;
this.$fCesium.initMap();
let viewer =this.$fCesium._viewer;
this._viewer = viewer;
that.scene_ = viewer.scene;
//渲染铯场景
this.addOlMap();
},
节能炉addOlMap(){
var that =this;
//普通地图
this.layer.tiandituVecLayer =new ol.layer.Tile({
title:'generalMap',
source:new ol.source.XYZ({
url:'/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=token', crossOrigin:'anonymous'
}),
// zIndex: 1,
visible:true
});
//普通地图标记
that.layer.tiandituCvaLayer =new ol.layer.Tile({
title:'generalMapZj',
source:new ol.source.XYZ({
url:'/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=token', crossOrigin:'anonymous'
}),
visible:true
});
//影像地图
that.layer.tiandituImgLayer =new ol.layer.Tile({
title:'generalMapImg',
source:new ol.source.XYZ({
url:'/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=token', crossOrigin:'anonymous'
}),
visible:true
});
//影像地图标注
that.layer.tiandituCiaLayer =new ol.layer.Tile({
title:'generalMapImgZj',
source:new ol.source.XYZ({
url:'/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=token', crossOrigin:'anonymous'
}),
visible:true
});
this.map =new ol.Map({
target:'eye',
layers:[
that.layer.tiandituImgLayer,
that.layer.tiandituCiaLayer,
that.layer.tiandituVecLayer,
that.layer.tiandituCvaLayer,
that.layer.tiandituCvaLayer,
],
view:new ol.View({
center:[13410926.774433982,3715530.4937355495],
zoom:12
}),
controls: ol.control.defaults({
attributionOptions:{
collapsible:false
}
})
});
this.view_ =View();
},
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
derId_ !==undefined){
derId_);
}
},
/**
* Callback for `requestAnimationFrame`.
* @param {number} frameTime The frame time, from `w()`.
* @private
*/
onAnimationFrame_(frameTime){
// 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
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 der_();
}
},
created(){
},
}
</script>
>冰车
