如何在Resium的Viewer组件中直接添加div元素？

不需要修改Resium或Cesium库，Resium提供了原生方式获取Cesium实例，直接操作DOM即可实现需求，具体步骤如下：

1. 获取Cesium Viewer实例 #

通过useRef获取Resium的Viewer组件引用，进而拿到底层的Cesium Viewer对象：

import { useRef, useEffect } from 'react';
import { Viewer } from 'resium';

const MapComponent = () => {
  const viewerRef = useRef(null);

  useEffect(() => {
    const cesiumViewer = viewerRef.current?.cesiumElement;
    if (!cesiumViewer) return;

    // 后续添加自定义DOM的逻辑写在这里
  }, []);

  return <Viewer ref={viewerRef} />;
};

export default MapComponent;

2. 创建并挂载自定义DOM元素 #

Cesium Viewer的container属性对应其DOM容器，直接将自定义div挂载到该容器内即可：

useEffect(() => {
  const cesiumViewer = viewerRef.current?.cesiumElement;
  if (!cesiumViewer) return;

  // 创建自定义div
  const customDiv = document.createElement('div');
  customDiv.style.position = 'absolute';
  customDiv.style.top = '20px';
  customDiv.style.left = '20px';
  customDiv.style.padding = '12px';
  customDiv.style.backgroundColor = 'rgba(255,255,255,0.9)';
  customDiv.style.borderRadius = '4px';
  customDiv.style.zIndex = '100'; // 确保层级高于Cesium画布
  customDiv.textContent = '自定义悬浮面板';

  // 挂载到Cesium容器
  cesiumViewer.container.appendChild(customDiv);

  // 组件卸载时清理DOM，避免内存泄漏
  return () => {
    customDiv.remove();
  };
}, []);

3. Next.js环境注意事项 #

由于Cesium依赖浏览器API，需禁用服务端渲染，用Next.js的dynamic导入组件：

import dynamic from 'next/dynamic';

// 动态导入地图组件，关闭SSR
const MapComponent = dynamic(() => import('./MapComponent'), {
  ssr: false,
});

export default function Home() {
  return <MapComponent />;
}

内容的提问来源于stack exchange，提问作者Kota