写文章
  1. 码农之家首页
  2. 前端教程

掘金+CSDN上主流vue（vuecli）引入Cesium方式的总结和梳理

我心飞翔 • • 前端教程 • 阅读 24

Cesium介绍

参考文章Cesium开发入门

一、引入方式一：npm安装的方式

vue2默认安装cesium的话默认的是最新版本，目前cesium停止了对vue2的版本更新，现在默认安装都是vue3版本，因此需要控制版本，否则就会报错。

步骤

详细的步骤参考Cesium之环境搭建
简单明了，不过vue.config.js文件我没用，配置内容有点多，等有时间了再去解读

  1. npm安装Cesium
  • 安装时候一定要指定cesium版本 ,我使用的是108版本
npm install --save cesium@1.108.0
  • 注意不同版本的cesium语法是有差别的，所以要参考对应版本的API进行开发
  1. 配置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"),
      },
    },
  },
});
  1. 探本溯源（此处可以不看）
  • 之所以在vue.config.js中配置Cesium是因为官方的描述CesiumJS Quickstart中的描述为
    掘金+CSDN上主流vue（vuecli）引入Cesium方式的总结和梳理
    翻译过来就是：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以上所有版本

操作步骤

  1. 下载指定库文件，Cesium的GitHub地址如下
    Cesium文件下载地址
    掘金+CSDN上主流vue（vuecli）引入Cesium方式的总结和梳理

  2. 解压文件后将Build的文件夹下的Cesium文件夹拷贝到vue项目中public文件加下，如下图所示
    掘金+CSDN上主流vue（vuecli）引入Cesium方式的总结和梳理

  3. 在index.html中引入js和css文件

  <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">   
   <script src="./Cesium/Cesium.js"></script>
  1. 在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详细教程

大体过程为：

  1. npm 安装cesium
  2. 将node_modules下面的cesium文件放置在public下
  3. vue文件中引入cesium
    • 引入JSimport * 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文件夹下

四、引入方式四：vue-cesium方式

  1. 安装vue-cesium包
    官网介绍为其基于 Vue 2.x 的Cesium三维地图组件。上面博客也提到了因为该项目于2022.12.31停止vue2版本更新，现在默认安装都是vue3版本，因此需要控制版本
    npm install vue-cesium@2.1.6
  2. 在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'
})

官方vue-cesium快速上手

相关博客资料

  1. vue3 cesium安装配置教程（共5种方式-推荐第3-4种）
  2. 【Vue+CesiumJS学习（1）】在Vue中使用Cesium（两种方法）
  3. vue中使用cesium方法总结
  4. 最新Vue + Cesium环境配置介绍了不同开发环境下cesium配置(vue3、vue/cli3+、vue/cli2三种)
  5. Vue2项目中集成Cesium(VueCLi 3.0+)同样将node_modules下面的cesium文件放置在public下
  6. 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)

  • 解决办法：
  1. 在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"
    }
  },
  1. 然后引用导出时定义的名称
import "cesium/widgets.css";

问题2

"Cesium" is not defined no-undef

  • 解决办法：在package.json中新增一段代码，
 "rules": {},
    "globals": {
      "Cesium":true
    }

原文链接：https://juejin.cn/post/7312818211308879909 作者：幸福的拾荒者Alfa

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年12月16日 上午10:00
下一篇 2023年12月16日 上午10:10

相关推荐

发表回复

登录后才能评论