Cesium大屏-vue3注册全局组件

1.需求

说明：产品经理要求开发人员在地图大屏上面随意放置组件，并且需要通过数据库更改其组件大小，位置等；适用于大屏组件中场站视角、任意位置标题等。

2.实现

2.1GlobalComponents.vue

说明：containerList可以通过发起网络请求写在数据库里面，彰显灵活性。

<script setup>
const containerList=[
  {
    id:"202407012021",
    name:"测试组件",
    show:true,
    componentName:"Demo1",
    style:{
      width:"100px",
      height:"100px",
      background:"red"
    }

  }
]
</script>

<template>
  <div style="position: relative;pointer-events: none">
    <template v-for="container in containerList">
      <component v-show="container.show"
                 :is="container.componentName"
                 :container="container"
                 :show="container.show"
                 :ref="container.id" :id="container.id"></component>
    </template>
  </div>
</template>

<style scoped>

</style>