vue3+ol+cesium实现二三维系统（一）
（一）vue3+ol-cesium库实现二三维底图数据切换
实验目的
使用vue3.0，vue-cli4.x版本，实现二三维底图数据切换，平移，旋转，二维和三维要保持同步
实验版本
ol6.9、cesium1.87、vue3.0、olcs2.13
踩坑
坑：二维是加载出来了，但是三维那个地球一直加载不出来，网络如下图所示，这些加载的瓦片一看就知道有问题了，全是0，正常来说应该是不同的瓦片的，因此可以得出结论，代码是没问题的，数据也有加载，那么可能是使用Vue3的问题。
解决： 再三确认下，代码是没有问题的，因此我认为是Vue3的问题，因此我用Vue2+vue-cli3的版本又做了一版本，是可以加载出来的；因此我又去检查了一次代码，发现是我在加载二维底图的时候，用了Vue3中ref来定位dom元素（因为Vue2是用ref来定位的），Vue3也可以用ref来定位，但是Vue3中的ref和vue2差别很大，Vue3中写ref也是表明我要对这个dom元素进行数据监听（并且Vue3中数据代理是用Proxy进行数据代理，这个数据代理是有深度监听的作用的）因此，在数据加载的时候，由于发生了数据监听，导致在进行瓦片数据赋值加载的时候，每一次加载都会进行一次数据监听并重新加载，因此这个三维地球加载瓦片就会有问题
代码
<template>
<Header @changeThree="set3dEnable"></Header>
<section class="mainBox">
<div class="map" id="map">
</div>
</section>
</template>
<script>
import {onMounted} from 'vue'
import 'ol/ol.css';
import Header from '../components/views/Header'
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
import OSM from "ol/source/OSM";
import OLCesium from 'olcs/OLCesium.js';
//--引入cesium
import 'cesium/Widgets/widgets.css'
// import Cesium from 'cesium/Cesium'
let Cesium = require('cesium/Cesium')
window.Cesium = Cesium
export default {
components:{
Header
},
setup(){
let ol2dmap = ''
let ol3dmap = ''
function initMap(){
ol2dmap = new Map({
target:'map',
layers:[
new TileLayer({
source:new OSM()
})
],
view:new View({
center:transform([25,20],"EPSG:4326","EPSG:3857"),
zoom:5
})
})
ol3dmap = new OLCesium({map:ol2dmap})
// const scene = ol3dmap.getCesiumScene()
// scene.terrainProvider = Cesium.createWorldTerrain()
ol3dmap.setEnabled(true)
}
function set3dEnable(){
ol3dmap.setEnabled(!ol3dmap.getEnabled())
}
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0YTM0OTc2MC00MDA3LTRjOWYtODljMC1hYTA5MjY3MDhjMTUiLCJpZCI6NzMwOTcsImlhdCI6MTYzNjU5NTEwNX0.PLvDbCcuev2T7Mp17T_aVvvrHAL5pmTFFalqaKheP_A'
initMap()
})
return{
set3dEnable
}
},
};
</script>
<style scoped>
.mainBox{
width: 100%;
position: absolute;
top:60px;
bottom: 0;
}
.mainBox .map{
height: 100%;
}
</style>
作者：憨叔叔的GIS之路
链接：https://juejin.cn/post/7032568584492875807