关于 cesium 在 micro-app 下无法显示的问题

解决过程#

最初的猜想是静态资源路径解析错误，导致 Assets、Workers、Widgets 静态资源未能成功加载上。

故设置了 CESIUM_BASE_URL :

1
// 在引入 Cesium 或者创建 Viewer 之前执行
2
if (window.__MICRO_APP_ENVIRONMENT__) {
3
  // __MICRO_APP_PUBLIC_PATH__ 是 micro-app 注入的子应用绝对路径（带有子应用端口号）
4
  // 假设 cesium 静态资源放在子应用的 public/cesium 目录下
5
  window.CESIUM_BASE_URL = window.__MICRO_APP_PUBLIC_PATH__ + 'cesium/';
6
} else {
7
  // 独立运行时的路径
8
  window.CESIUM_BASE_URL = '/cesium/';
9
}

但是无论设不设置，cesium.js widgets.css 都是能够正常访问的。

AI 提出 Cesium 极其依赖 Web Worker 来处理几何数据。在微前端中，基座和子应用往往运行在不同的端口（跨域）。浏览器出于安全策略，不允许跨域直接加载 Web Worker 脚本。但是 console 并没有报错跨域的问题，我看到 micro-app 可以设置 iframe 模式，实现了隔离，便认为 iframe 拦截了 Web Worker 脚本，导致地图不加载，所以按照 iframe 的方式设置了：

1
<micro-app
2
  name="cesium-map"
3
  :url="url"
4
  iframe
5
  @created="handleCreated"
6
  @beforemount="handleBeforeMount"
7
  @mounted="handleMounted"
8
  @unmount="handleUnmount"
9
  @error="handleError"
10
  router-mode="native"
11
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
12
  allow="cross-origin-isolated; geolocation"
13
  baseroute="/"></micro-app>

结果也不对，在 iframe 中确实能够正常运行，micro-app 并不支持，后来了解到 micro-app 不是通过 iframe 实现的，是借鉴了 WebComponent 的思想，通过CustomElement 将 micro-app 封装成一个类 WebComponent 组件。

1
  <iframe
2
    :src="src"
3
    frameborder="0"
4
    class="iframe"
5
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
6
    allow="cross-origin-isolated; geolocation"></iframe>

在翻阅官方 github issues 时，发现了相同的问题 Vite项目 Cesium地图不展示 到底是什么原因，下面有初始化 microApp 的配置：

参考 https://github.com/jd-opensource/micro-app-awesome-samples/blob/issue-1351/apps/main-app/src/main.js

1
microApp.start({
2
    excludeAssetFilter (assetUrl) {
3
        if (assetUrl === 'createVerticesFromHeightmap' || assetUrl === 'transferTypedArrayTest' || assetUrl === 'createVerticesFromQuantizedTerrainMesh') {
4
          return true // 返回true则micro-app不会劫持处理当前文件
5
        }
6
        return false
7
    },
8
    plugins: {
9
        modules: {
10
            'cesium-map': [{
11
                loader(code, url) {
12
                    // TODO 根据 实际情况再调整限制
13
                    if(url.indexOf("Cesium.js") > 0 && code.indexOf('var Cesium=')> -1) {
14
                        code = code.replace('var Cesium=', 'window.Cesium=')
15
                    }
16
                    return code
17
                }
18
            }]
19
        }
20
    }
21
})

excludeAssetFilter(assetUrl) { ... }

字面意思是静态资源过滤器。根据官方解释，如果这个函数返回 true，micro-app 就不会去劫持和处理这个资源的加载请求，而是让浏览器按原生方式去加载。

而代码中拦截的这些名称（createVerticesFromHeightmap、createGeometry 等），是 Cesium 内部的 Web Workers 任务脚本。 Cesium 为了保证 3D 渲染的流畅，把海量的几何体计算、地形切片计算都放在了后台 Web Worker 线程中。如果 micro-app 去劫持这些 Worker 脚本，会导致这些 Worker 脚本运行不了，这也是为什么 sence 以及引入的 model 都能够成功加载，而地形layer的加载依赖 createVerticesFromHeightmap.js 脚本，所以才会造成这个原因。

设置了 excludeAssetFilter 本地确实能够正常运行了，但是在我部署到线上的时候，console 报错：

1
未找到对象 ReferenceError: Cesium is not defined

plugins: { modules: { 'cesium-map': [ ... ] } }

官方指出 https://jd-opensource.github.io/micro-app/0.x/docs.html#/zh-cn/sandbox

我们使用Proxy拦截了用户全局操作的行为，防止对window的访问和修改，避免全局变量污染。micro-app中的每个子应用都运行在沙箱环境，以获取相对纯净的运行空间。

沙箱是默认开启的，正常情况下不建议关闭，以避免出现不可预知的问题。

在沙箱环境中，顶层变量不会泄漏为全局变量。

例如在正常情况下，通过 var name 或 function name () {} 定义的顶层变量会泄漏为全局变量，通过window.name或name就可以全局访问。

但是在沙箱环境下这些顶层变量无法泄漏为全局变量，window.name或name的值为undefined，导致出现问题。

而 Cesium.js 开头：var Cesium=(()=>{...，是将 Cesium 提升到了全局变量 window.Cesium，结果时不能在基座中访问，导致初始化时 ReferenceError: Cesium is not defined：

在 js 沙箱，可以通过将 var name 改为 window.name 挂载在全局 window 上，因为我们不能直接修改 Cesium.js 文件，官方提供了类似 webpack 打包时 loader 修改代码，通过匹配 Cesium.js 文件名，将开头的 var Cesium= 替换为 window.Cesium= 。

1
loader(code, url) {
2
    if (url.indexOf("Cesium.js") > 0 && code.indexOf('var Cesium=') > -1) {
3
        code = code.replace('var Cesium=', 'window.Cesium=')
4
    }
5
    return code
6
}

到目前为止问题已经解决，但是我们从哪儿获取到excludeAssetFilter中需要放行的worker脚本呢？

在 \node_modules\cesium\Build\Cesium\Workers 下，能发现许多js文件：

以代码中为例，createVerticesFromHeightmap.js 是从高度图（heightmap）生成三维地形的顶点数据，而 micro-app 将其拦截刚好对应了地形没有显示的问题。如果需要绘制 geometry 就需要将 Workers 下的 createGeometry.js 加入 loader 。

以上。