如何在Blazor Razor页面中显示Cesium(JS)应用？排查缺失步骤

问题根源 #

你在wwwroot/index.html中直接执行Cesium初始化脚本时，Razor页面的cesiumContainer DOM元素还未渲染——Blazor路由切换后才会加载对应页面组件，index.html加载完成时目标元素不存在，导致初始化失败。同时未给容器设置宽高，即便渲染成功也无法看到内容。

修复步骤 #

1. 移除index.html中的初始化脚本
   保留样式和Cesium核心库引入，删除直接初始化的代码：

   <!-- index.html中保留这两行即可 -->
   <link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
   <script src="Cesium/Cesium.js"></script>
   

2. 给Razor页面的容器添加样式+延迟初始化
   利用Blazor的OnAfterRenderAsync生命周期，确保DOM渲染完成后再调用JS初始化Cesium，同时设置容器宽高：

   @page "/cesium"
   @inject IJSRuntime JSRuntime
   
   <style>
       #cesiumContainer {
           width: 100vw;
           height: 100vh;
           margin: 0;
           padding: 0;
           overflow: hidden;
       }
   </style>
   
   <div id="cesiumContainer"></div>
   
   @code {
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           // 仅在首次渲染完成后执行初始化
           if (firstRender)
           {
               await JSRuntime.InvokeVoidAsync("initCesium");
           }
       }
   }
   

3. 编写独立的Cesium初始化脚本
   在wwwroot下新建js/cesium-init.js（或直接在index.html中添加脚本块），内容如下：

   function initCesium() {
       // 必须设置Cesium Ion AccessToken（从Cesium官网个人账号获取）
       Cesium.Ion.defaultAccessToken = "你的AccessToken";
       
       // 初始化Viewer，可按需配置参数
       const viewer = new Cesium.Viewer("cesiumContainer", {
           timeline: false,
           animation: false,
           baseLayerPicker: false
       });
       
       // 将viewer挂载到window，方便后续JS交互操作
       window.cesiumViewer = viewer;
   }
   

   若使用独立脚本文件，需在index.html中引入：

   <script src="js/cesium-init.js"></script>
   

4. 验证资源路径与权限

   • 确认wwwroot/Cesium文件夹结构完整，Cesium.js和widgets.css路径正确
   • 确保Cesium AccessToken有效，无过期或权限问题

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