在 uni-app 引入 cesium(标题党,慎入)

1,905 阅读4分钟

感觉坑挺多的。。。其实有点文不对题,因为并没有真正在 uni-app 中成功引入 cesium
太长不看版:最终结果是 只能用 web-view 嵌一个 cesium 页面进来,直接跳到(三)继续看就好(呜呜呜我太菜了)

一、先在正常环境下加载 cesium

Cesium 官网有 webpack + cesium 搭建教程,按照教程一步步来是可以完成 cesium 地图加载的。中间也会有一些坑,但是直接通过报错信息查询,都能轻松解决。
附我按照教程一步步走时,引用的各种包的版本信息,其中,webpack 使用的是 5.0 版本(最新版)

  "dependencies": {
    "cesium": "^1.77.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.13.0",
    "webpack-dev-server": "^3.11.1"
  },
  "devDependencies": {
    "webpack-cli": "^4.3.1"
  }

二、 尝试在 uni-app 中引入 cesium

新手上路 uni-app,按照官网教程新建了 uni-app 空白项目,然后命令行下载 cesium 包 yarn add cesium

(1)尝试官网 Quickstart 教程直接引用 node_modules 包内容(这里的直接引用是指 不在 vue.config.js 文件中配置 cesium 的相关路径)。

window.CESIUM_BASE_URL = "/";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

HBuilder 编译运行后,网页报错。字面意思是找不到这两个 json 文件路径,但实际上这两个文件都在,不知道为什么找不到路径,挣扎许久,觉此路不通,弃之。

(2)尝试配置 vue.config.js 文件来加载。

uni-app 官方是支持 vue.config.js 的配置的(部分配置除外,请参考 ,关于这个配置文件,也参考了挺多大佬写的技术文的,总的来说,和官网教程的配置差不多(详见(四)中对比说明)。

可以看到,HBuilder 编译时继续报错,此次时提示某个 css 文件引用的路径有问题,特地在 node_modules/cesium 中找到了这行代码,且注释掉了它。
路径:cesium/Source/Widgets/Timeline/Timeline.css

然后重新编译,跑是能跑起来,但是出现了与(1)中同样的问题,网页那里提示那两个 json 文件路径加载不出来。因为(1)的时候就觉此路不通,所以此时遇到相同的情况,又弃了。

三、使用 web-view,一用就成,谁用谁开心~

在搜索 uni-app cesium 的时候,注意到已经有人问过类似问题了,在 DCloud 论坛上,有大佬回复用 web-view

使用起来也很简单,感觉 web-view 类似 iframe,在其他地方搭建一个可访问的 cesium 项目(这里引用的是之前(一)中按照官网教程搭建的 cesium 实例),把能访问的网址引过来就完事了。

<template>
  <view class="content">
    <web-view src="http://localhost:8080/"></web-view>
  </view>
</template>

但是这样带来的结果是,几乎是脱离了 uni-app 桎梏,完全是通过 web 网页开发技术来实现功能(我内心是拒绝的)(不过由于当前项目开发不需要一定使用 3D 地图插件,因此后续应该会尝试使用 2D 地图插件)。

四、关于为什么 uni-app 中引入 cesium 无法成功的猜想

(1)配置文件有问题

比对 webpack 和 uni-app 的配置文件,uni-app 配置文件中我去掉了下面的几个 loader,此时注释二(2)中提到的 css 代码能编译通过,但是依然提示 json 文件缺失。
如果加上这几个 loader,HBuilder 会提示 style-loader 找不到,但明明 node_modules 中有相应的包目录。
猜想可能是这些 loader 和编译器自带的有冲突?但是少了这一步,css 文件又无法成功解析(害)。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ],
  },

(2)uni-app 不支持 cesium(或者说 cesium 不支持 uni-app)

甩锅行为,错的不是我(笑)

小声bb: cesium确实是一个优秀的用来实现 3D 地图效果的开源 js 库,但因为是国外的,官方文档全英文,学习起来对我有天生的语言障碍(英语苦手)。
然后我对它官网 Quickstart 除了用 cdn 可以正常运行地图实例,其他方法都拉闸,表示十分的怨念。
不过不知道是不是我的打开方式有问题,如果有朋友可以正常运行官网提供的其他方式,求求求告知!