vue集成cesium的三种方式，以及解决底图变暗和LabelGraphics渲染不正确的问题

何鼕鼕

3056人浏览 · 2019-11-09 18:13:22

何鼕鼕 · 2019-11-09 18:13:22 发布

vue集成cesium常见的方式是通过webpack配置，但是也可以通过在html页面添加script标签的方式集成（个人觉得通过添加script标签的方式集成会好一些，因为cesium库比较复杂，如果通过webpack集成的方式在编译的时候相对会慢一些，影响开发体验），另外一种方式和添加script标签的方式比较类似，就是直接在main.js或者vue文件中Import cesium.js和widget.css，但是这种方式只导入了js文件和css文件还不能使用，因为cesium还有静态资源文件，所以还要通过Cesium类的buildModuleUrl API导入静态资源文件，静态资源可以直接拷贝过来放在static文件中，下面一一介绍下这三种集成方式。

第一种：
通过webpack集成cesium。
1，在webpack.base.conf 文件中添加

const cesiumSource = '../node_modules/cesium/Source'  //导入cesium源码

2，output 对象下添加 sourcePrefix: ' '
3，module 对象下添加 unknownContextCritical: false
4，添加 amd: { toUrlUndefined: true }
5，node 对象下添加 fs: 'empty'
6，webpack.dev.conf 文件中添加以下代码

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

plugin 对象中添加以下代码（这个插件用于复制cesium的静态资源）

new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
  // Define relative base path in cesium for loading assets
  CESIUM_BASE_URL: JSON.stringify('')
})

7，webpack.prod.conf 文件中添加以下代码

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
  // Define relative base path in cesium for loading assets
  CESIUM_BASE_URL: JSON.stringify('./')
})

到此，大功告成，npm run dev 启动即可。

第二种：
这种方式相对简单很多，不用在webpack里面配置，直接引入cesium.js 和 widget.css文件即可。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
    <link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="static/Cesium/Cesium.js"></script>
  </body>
</html>

注意：cesium.js文件一定要和静态资源放到一个文件中，如果没放到一个文件夹中会报错找不到静态资源，出现这种情况那就要自己配置静态资源的地址，通过 buildModuleUrl 这个API，上文已提到过，我一般是直接复制node_modules\cesium\Build\Cesium这个文件夹的所有文件到项目的static文件中。

个人推荐这种方式，不经过webpack，编译快，引入也简单。

第三种：
这种方式是直接在main.js或者vue文件中import即可

import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

但是这样直接引入会提示找不到静态资源，所以还得通过 buildModuleUrl API 加载cesium的静态资源，添加以下代码即可：

import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
buildModuleUrl.setBaseUrl('../static/Cesium/')

至此，大功告成，启动即可。

最后，有个问题说下，有次开发中通过直接添加 script 标签的方式引入cesium，在渲染label以及瓦片底图的时候，感觉label和底图的颜色明显不对，比正常的颜色明显暗了很多，字体也模糊了很多，后来才发现，cesium.js和widget.css这两个文件一定要是同一个版本编译的（但是也不确定是不是和静态资源有关系）。
因为当时手误引入了1.60版本的widget.css和1.61版本的cesium.js，所以导致底图颜色变暗以及label标签渲染模糊。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^