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]);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值