vue3.0集成cesium的方案
- 根据脚手架初始化vue3项目，这一步网上有很多教程就不详细说明了
- 安装插件vue-cli-plugin-cesium
- 编写测试demo
// example.tsx
import {defineComponent, ref, onMounted, h} from 'vue';
const CesiumViewer = defineComponent({
setup() {
const root = ref(null);
onMounted(() => {
//@ts-ignore
const viewer = new Cesium.Viewer(root.value, {
selectionIndicator: false,
animation: false,
baseLayerPicker: false,
geocoder: false,
timeline: false,
navigationHelpButton: false,
homeButton: false,
sceneModePicker: false,
infoBox: false,
});
});
return {
root
};
},
render() {
return h('div', {ref: 'root'});
}
});
export default CesiumViewer;
代码说明：
- 用tsx只是编写的习惯，可自行采用jsx/tsx或者模板语法实现
- vue3因为template模板中的根标签不再只有一个的原因无法通过this.$el的方式获取渲染的容器，这里采用的是ref的方案
- 关于typescript,cesium官方提供了对应的cesium types ，在该集成方案中无法使用，后续有空会更新一下vue3+cesium+typescript的完整集成方案
