「GIS教程」一种轻量化加载Cesium的方法

在WebGIS前端项目中引入Cesium是一个常见的操作，但小编最近在一个基于UMI3的老项目中引入Cesium的时候遇到了一个小问题。

简单来说就是需要将node版本升级到18.18.0以上，可这个老项目已经稳定运行了很久，牵一发而动全身，直接升级Node版本会带来很大的测试回归成本，这显然不太可接受。经过折腾，终于找到了一个比较简单的解决方案。

常见Cesium加载方式

我们在Cesium的官网上可以找到官方推荐的几种加载方法。

方法一：NPM方式

使用NPM会将Ceium打包到最后的项目中，和普通的NPM不一样的是，除了

npm install cesium --save

之外，还需要将几个目录放在项目的public目录下。

node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets

然后配置好CESIUM_BASE_URL，如

window.CESIUM_BASE_URL = '/public';

小编开始就是使用的这种方式，不过遇到了Node版本不兼容的问题。

方法二：CDN方式

这种方法比较简单，直接在HTML中引入Cesium即可。

<script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

然后在Dom加载完成之后，写业务代码即可。

切到CDN

既然之前使用方法一要升级Node版本，比较麻烦，那咱就切成方法二，使用CDN，但直接按官网这个写法肯定不行，因为Cesium的CDN在国外，国内访问速度无法保证。那能不能换国内的CDN？小编找了一下，发现目前可用公共Cesium的CDN还真不太行，要么速度慢，要么版本低，要么有安全风险。具体可参考小编的文章：《分享国内的几个Cesium公共CDN》

小编最后使用的方法是将Cesium从官网下载下来，官网地址：

https://github.com/CesiumGS/cesium

然后将下载的zip包中的 Build 文件夹直接放到项目申请的CDN上（比如7牛、OSS都可以，小编最后使用的OSS）

PS：不得不说，这个包还挺大的，直接放项目里我都担心项目的CI编译速度会不会很慢。

然后在HTML中引入Cesium即可。

按需加载

上面这种方法是在项目初始化的时候就直接引入了Cesium的运行环境，如果你对这个极度要求，也可以改成在需要页面按需加载。

  const insertScript = (scriptUrl) => {
    const script = document.createElement('script');
    script.src = scriptUrl;
  }

  const insertStyle = (styleUrl) => {
    const style = document.createElement('link');
    style.href = styleUrl;
  }

  useEffect(() => {
    insertScript('xxxxx.cesium.js')
    insertStyle('xxxxx.cesium.css')
  }, []);

总结

这个方法虽然比较麻烦，但至少不会因为Node版本升级而带来回归问题，将问题的范围控制在最小限度改动，让项目继续运行，小编感觉还是很有成就感~

如果您有更好的方法，也可以留言讨论。