Cesium介绍
参考文章Cesium开发入门
一、引入方式一:npm安装的方式
vue2默认安装cesium的话默认的是最新版本,目前cesium停止了对vue2的版本更新,现在默认安装都是vue3版本,因此需要控制版本,否则就会报错。
步骤
详细的步骤参考Cesium之环境搭建
简单明了,不过vue.config.js文件我没用,配置内容有点多,等有时间了再去解读
- npm安装Cesium
- 安装时候一定要指定cesium版本 ,我使用的是108版本
npm install --save cesium@1.108.0
- 注意不同版本的cesium语法是有差别的,所以要参考对应版本的API进行开发
- 配置CESIUM_BASE_URL
在vue项目根目录新建vue.config.js文件,写入如下内容
vue.config.js完整配置如下:
const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require('webpack');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: true,
configureWebpack: {
plugins: [
new NodePolyfillPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/cesium/Build/Cesium/Workers",
to: "cesium/Workers",
},
{
from: "node_modules/cesium/Build/Cesium/ThirdParty",
to: "cesium/ThirdParty",
},
{
from: "node_modules/cesium/Build/Cesium/Assets",
to: "cesium/Assets",
},
{
from: "node_modules/cesium/Build/Cesium/Widgets",
to: "cesium/Widgets",
},
],
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify("./cesium"),
}),
],
resolve: {
fallback: {
zlib: require.resolve("browserify-zlib"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
stream: require.resolve("stream-browserify"),
},
},
},
});
- 探本溯源(此处可以不看)
- 之所以在vue.config.js中配置Cesium是因为官方的描述CesiumJS Quickstart中的描述为
翻译过来就是:CesiumJS 需要在服务器上托管一些静态文件,例如 Web Worker 和 SVG 图标,需要将上述四个目录作为静态文件在项目中进行配置。 - Cesium给提供的一个webpack的项目,GitHub地址为 Cesium Webpack 示例,因为是webpack项目,因此他写在了
webpack.config.js
文件里,完整的 Webpack 配置在参考官方提供的Cesium webpack项目中的相关文件,在vue项目中使用vue.config.js
文件。 - vue-cli是基于webpack的构建vue项目的工具,也就是vue-cli搭建的项目模板,在运行时会打包、配置 、转义资源,提高效率;vue-cli在3之后就开始不再自动生成webpack.config.js,而是用手动添加vue.config.js来代替
二、引入方式二:HTML中标签引入方式<script>
和<link>
适用于1.90以上所有版本
操作步骤
-
下载指定库文件,Cesium的GitHub地址如下
Cesium文件下载地址 -
解压文件后将Build的文件夹下的Cesium文件夹拷贝到vue项目中public文件加下,如下图所示
-
在index.html中引入js和css文件
<link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="./Cesium/Cesium.js"></script>
- 在vue文件中加载cesium,下面代码是离线模式下的球体加载
<template>
<div class="c-root">
<div id="cesiumContainer"></div>
<!-- <div id="loadingOverlay"><h1>Loading...</h1></div> -->
<div id="toolbar"></div>
</div>
</template>
<script>
export default {
data() {
return {
viewer: null
};
},
methods: {
initMap() {
Cesium.Ion.defaultAccessToken ='你的cesiumkey,官网注册申请'
this.viewer = new Cesium.Viewer("cesiumContainer", {
baseLayer: Cesium.ImageryLayer.fromProviderAsync(
Cesium.TileMapServiceImageryProvider.fromUrl(
Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
)
),
baseLayerPicker: false,
geocoder: false
});
}
},
mounted() {
this.initMap();
}
};
</script>
<style>
.c-root,#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
三 、引入方式三:npm安装,node_modules下cesium文件放在public下
此方式参考博客vue2配置cesium详细教程
大体过程为:
- npm 安装cesium
- 将node_modules下面的cesium文件放置在public下
- vue文件中引入cesium
- 引入JS
import * as Cesium from 'cesium
- 引入CSS
import "cesium/Build/Cesium/Widgets/widget.css"
- main.js中配置
window.CESIUM_BASE_URL = '/cesium'
此种方式未作测试,不过这种方式免去了vue.config.js文件的编译配置,更容易理解,和html方式引入有些像,不过实在vue文件中使用import的方式引入
vue2实战中使用cesium如何去安装配置,此篇博客类似此种方法,不过作者将将node_modules下面的cesium文件放置在assets文件夹下
- 引入JS
四、引入方式四:vue-cesium方式
- 安装vue-cesium包
官网介绍为其基于 Vue 2.x 的Cesium三维地图组件。上面博客也提到了因为该项目于2022.12.31停止vue2版本更新,现在默认安装都是vue3版本,因此需要控制版本
npm install vue-cesium@2.1.6
- 在main.js中引入
import Vue from 'vue'
import VueCesium from 'vue-cesium'
Vue.use(VueCesium, {
cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js',
accessToken: 'your token'
})
相关博客资料
- vue3 cesium安装配置教程(共5种方式-推荐第3-4种)
- 【Vue+CesiumJS学习(1)】在Vue中使用Cesium(两种方法)
- vue中使用cesium方法总结
- 最新Vue + Cesium环境配置介绍了不同开发环境下cesium配置(vue3、vue/cli3+、vue/cli2三种)
- Vue2项目中集成Cesium(VueCLi 3.0+)同样将node_modules下面的cesium文件放置在public下
- Vue中使用Cesium
问题及解决办法
问题1:
Module not found: Error: Package path ./widgets.css is not exported from package *\node_modules\cesium (see exports field in *\node_modules\cesium\package.json)
- 解决办法:
- 在node_modules里找到cesium的package.json文件,在exports里增加导出widgets.css
"exports": {
"./package.json": "./package.json",
****//不同版本下此处会有所差别
"./widgets.css": "./Source/Widgets/widgets.css",
".": {
"require": "./index.cjs",
"import": "./Source/Cesium.js"
}
},
- 然后引用导出时定义的名称
import "cesium/widgets.css";
问题2
"Cesium" is not defined no-undef
- 解决办法:在package.json中新增一段代码,
"rules": {},
"globals": {
"Cesium":true
}
原文链接:https://juejin.cn/post/7312818211308879909 作者:幸福的拾荒者Alfa