vue3以及react中使用组件的方式创建cesium/ol中的popup弹窗

记录防丢

在react中的使用：

以cesium为例

import { createRoot } from 'react-dom/client'
import PoiPopup from '@/components/PoiPopupCesium' // react组件

this.container = document.createElement('div')
this.container.classList.add('video-container')
this.root = createRoot(this.container)
this.root.render(
  PoiPopup({
    title: '123',
    onClose: () => {
    },
  }),
)
this.viewer.cesiumWidget.container.appendChild(this.container)

主要就是使用createRoot来创建节点，以及使用render来渲染引入的组件。

在vue3中的使用

cesium

import cesiumPopup from "@/components/CesiumPopup/index.vue";
import { createApp } from "vue";


this.container = document.createElement("div");
this.container.classList.add("popup-container");
const app = createApp(cesiumPopup, {
  title: '',
  content: '',
  address: '',
  onClose: () => {
  },
});
app.mount(this.container);
this.viewer.cesiumWidget.container.appendChild(this.container);

ol

 const overlayElement = document.createElement('div');
 const app = createApp(mapPopup, {
    title: '',
    content: '',
  });

  app.mount(overlayElement);

  // 初始化气泡框
  const overlay = new Overlay({
    element: overlayElement,
    id: 'routeLinePopup',
    positioning: 'top-center',
    offset: [0, 20],
    stopEvent: true,
    autoPan: false,
  });
  overlay.setPosition([x,y]);