(I) Vue3 + OL-Cesium library realizes data switching between two and three-dimensional base maps

The experiment purpose

Using VUe3.0, VUE-CLI4.x version, to achieve two and three dimensional base map data switch, translation, rotation, two and three dimensional to keep synchronized

The experimental version

Ol6.9, cesium1.87, vue3.0, olcs2.13

Hit the pit

Pit: 2 d is to load out, but 3 d the earth has been loaded out, network as shown in the figure below, the loading tiles a see will know there is a problem, all is zero, normally should be different tiles, so you can come to the conclusion that the code is no problem, data loading, Vue3 questions may be used.

Solution: Double check, there is no problem with the code, so I think it is Vue3 problem, so I made another version with Vue2+ VUE-CLI3 version, it can be loaded; Therefore, I checked the code again and found that I used ref in Vue3 to locate DOM elements when LOADING the 2d base map (because REF is used to locate Vue2), and REF in Vue3 can also be used to locate DOM elements, but ref in Vue3 is very different from Vue2. Writing ref in Vue3 also indicates that I need to perform data listening on this DOM element (and the data Proxy in Vue3 uses Proxy for data Proxy, which has the function of deep listening). Therefore, during data loading, due to data listening, during tile data assignment loading, Each load has a data listen and reload, so the 3D earth loading tile is problematic

code

<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'; / / -- introducing cesium import 'cesium/Widgets/Widgets. The 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.eyJqdGkiOiI0YTM0OTc2MC00MDA3LTRjOWYtODljMC1hYTA5MjY3MDhjMTUiLCJpZCI6NzMwOTcsImlhdC I6MTYzNjU5NTEwNX0.PLvDbCcuev2T7Mp17T_aVvvrHAL5pmTFFalqaKheP_A' initMap() }) return{ set3dEnable } }, }; </script> <style scoped> .mainBox{ width: 100%; position: absolute; top:60px; bottom: 0; } .mainBox .map{ height: 100%; } </style>Copy the code