Cesium+vue2 环境搭建步骤

文
章
目
录

• 1.安装Cesium
• 建议指定1.95.0版本
• 2.安装loader
• 3.安装webpack
• 4.vue.config.js配置
• 5.创建Cesium

本文主要讲解关于Cesium+vue2 环境搭步骤建相关内容，让我们来一起学习下吧！

1.安装Cesium

建议指定1.95.0版本

npm install cesium@1.95.0 -s

2.安装loader

npm install @open-wc/webpack-import-meta-loader

3.安装webpack

npm install copy-webpack-plugin@10.2.4

4.vue.config.js配置

\"use strict\";
const { defineConfig } = require(\"@vue/cli-service\");
const CopyWebpackPlugin = require(\"copy-webpack-plugin\");
const CompressionPlugin = require(\"compression-webpack-plugin\");

const webpack = require(\"webpack\");
const path = require(\"path\");

const cesiumSource = \"node_modules/cesium/Source\";
const cesiumWorkers = \"Workers\";
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === \"production\" ? \"/distBulletinBoard\" : \"/distBulletinBoard\",
  outputDir: \"dist\",
  // 是否开启eslint保存检测，有效值：ture | false | \'error\'
  lintOnSave: process.env.NODE_ENV === \'development\',
  productionSourceMap: false,
  // 本地服务器配置
  devServer: {
    port: 8888,
    host: \"0.0.0.0\",
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: \"https://kwyd.hyyun.com/community\",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          [\"^\" + process.env.VUE_APP_BASE_API]: \"\",
        },
      },
    },
  },
  configureWebpack: {
    externals: {
      cesium: \"Cesium\"
    },
    output: {
      sourcePrefix: \" \", // 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [\".js\", \".ts\", \".jsx\", \".tsx\", \".json\", \".vue\"],
      alias: {
        \"@\": path.resolve(\"src\"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: \"Workers\" },
          { from: path.join(cesiumSource, \"Assets\"), to: \"Assets\" },
          { from: path.join(cesiumSource, \"Widgets\"), to: \"Widgets\" },
          {
            from: path.join(cesiumSource, \"ThirdParty/Workers\"),
            to: \"ThirdParty/Workers\",
          },
        ],
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(\"./\"),
      }),
      new CompressionPlugin({
        test: /.js$|.html$|.css/,
        threshold: 10240,
        deleteOriginalAssets: false,
      }),
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp:
        //cesium/cesium/Source/Core/buildModuleUrl.js/,
      rules: [
        {
          test: /.js$/,
          use: {
            loader: \"@open-wc/webpack-import-meta-loader\",
          },
        },
        {
          exclude: /node_modules/,
          include: /src/,
          test: /.js$/,
          use: \"babel-loader\",
        },
      ],
    },
  }
});

5.创建Cesium

<template>
  <div class=\"commonCesium\">
    <div id=\"cesiumContainer\"></div>
  </div>
</template>

<script>
import * as Cesium from \"cesium/Cesium\";
import \"cesium/Widgets/widgets.css\";

export default {
  name: \"CommonCesium\",
  data() {
    return {
      viewer: null, // viewer对象
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.initCesium();
    })
  },
  methods: {
    initCesium() {
      // Token
      Cesium.Ion.defaultAccessToken =
        \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NGZjZDNmOC0zNTgwLTQxNTUtYWIxMS0zMGY5ZjVjNmU0ZjQiLCJpZCI6MTgyNzEzLCJpYXQiOjE3MDE4MjU1Mjh9.tJzjAxvinhK-2f4T3qzTjeArrzToKdWEhCegJw0zO-I\";
      // 创建Viewer对象
      this.viewer = new Cesium.Viewer(\"cesiumContainer\", {
        infoBox: false,
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false, // 是否全屏显示
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false, //设置背景透明
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false, // 取消点击有绿框
      });
      // 多余样式隐藏
      this.viewer.cesiumWidget.creditContainer.style.display = \"none\";
      // 地形遮挡
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // 开启抗锯齿
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 获取可视区域
      this.rectangle = this.viewer.camera.computeViewRectangle();
      // 转地理坐标
      // const east = Cesium.Math.toDegrees(this.rectangle.east).toFixed(6);
      // console.log(this.rectangle, east);

      // 设置初始位置（经度、纬度和高度）
      // this.viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0.0),
      //     pitch: Cesium.Math.toRadians(-15.0),
      //   },
      // });
      // 加载3dtiles数据
      this.loadTilesetOnlineData();
    },
    // 模型加载[在线/本地数据]
    loadTilesetOnlineData() {
      const tileset = new Cesium.Cesium3DTileset({
        // 模型要放到public目录
        url: \"3dtis/tileset.json\",
        // url: \"http://123.57.148.132/newzhsq/tileset.json\",
        maximumScreenSpaceError: 2, //最大的屏幕空间误差
        maximumNumberOfLoadedTiles: 5000, //最大加载瓦片个数
      });
      this.viewer.scene.primitives.add(tileset);
      this.viewer.flyTo(tileset);
    },
    // 模型加载[Cesium官网数据]
    loadTilesetData() {
      const cesium3DTileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
        maximumScreenSpaceError: 2, //最大的屏幕空间误差
        maximumNumberOfLoadedTiles: 10000, //最大加载瓦片个数
      });
      const tileset = this.viewer.scene.primitives.add(cesium3DTileset);
      // 移动到建筑位置
      this.viewer.flyTo(tileset);
      const tileset3DTile = this.viewer.scene.primitives.add(tileset);
      tileset3DTile.readyPromise.then(() => {
        tileset3DTile.style = new Cesium.Cesium3DTileStyle({
          color: {
            conditions: [
              [\"${Height} >= 300\", \"rgba(67,241,30,0.8)\"],
              [\"${Height} >= 200\", \"rgba(17,131,255,0.8)\"],
              [\"${Height} >= 100\", \"rgba(241,103,32,0.8)\"],
              [\"${Height} >= 50\", \"rgba(241,160,101,0.8)\"],
              [\"${Height} >= 0\", \"rgba(240,255,0,0.8)\"],
            ],
          },
        });
      });
    },
  },
};
</script>

<style scoped lang=\"scss\">
.commonCesium {
  width: 100%;
  height: 100%;

  // 视图的大小
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>

以上就是关于Cesium+vue2 环境搭建步骤相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！