记录防丢
在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]);