vue3.0(vue-next)构建cesium应用--脚手架搭建

vue3.0集成cesium的方案

1. 根据脚手架初始化vue3项目，这一步网上有很多教程就不详细说明了
2. 安装插件vue-cli-plugin-cesium
3. 编写测试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;

代码说明：

1. 用tsx只是编写的习惯，可自行采用jsx/tsx或者模板语法实现
2. vue3因为template模板中的根标签不再只有一个的原因无法通过this.$el的方式获取渲染的容器，这里采用的是ref的方案
3. 关于typescript,cesium官方提供了对应的cesium types ，在该集成方案中无法使用，后续有空会更新一下vue3+cesium+typescript的完整集成方案