vuecli4+Cesium开发环境配置

• 版本：vuecli4.5.7、Cesium1.69

• vue.config.js配置：

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    plugins: [
      //copy-webpack-plugin 6.x 的写法
      // 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" }
      //   ]
      // }),
     
      //copy-webpack-plugin 5.x 的写法
      new CopyWebpackPlugin([{
        from: "node_modules/cesium/Build/Cesium/Workers",
        to: 'cesium/Workers'
      }]),
      new CopyWebpackPlugin([{
        from: "node_modules/cesium/Build/Cesium/Assets",
        to: 'cesium/Assets'
      }]),
      new CopyWebpackPlugin([{
        from: "node_modules/cesium/Build/Cesium/Widgets",
        to: 'cesium/Widgets'
      }]),
      new CopyWebpackPlugin([{
        from: "node_modules/cesium/Build/Cesium/ThirdParty",
        to: 'cesium/ThirdParty'
      }]),

      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./cesium")
      })
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }
  },
}

• 新建scene.vue

<template>
  <div id="scene"></div>
</template>
 
<script>
// import * as Cesium from "cesium/Build/Cesium/Cesium";
import * as Cesium from "cesium";
// import {Viewer,UrlTemplateImageryProvider} from "cesium";

export default {
  name: "pscene",
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNWUzODk1OS1jNWY4LTQ3ZmMtOWJmNy04Y2Y3ZjA4ZjA0ZTciLCJpZCI6Mjg0OTQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTExNjAwNzR9.3l73V_Kyw_xBFHfTSplbI7vjjo00mVyOzScmbMdXcb4";
    this.viewer = new Cesium.Viewer("scene", {
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      navigationHelpButton: false,
      sceneModePicker: false,
      timeline: false,
      animation: false,
      imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
      }),
      terrainProvider: Cesium.createWorldTerrain(),
      //添加STK World Terrain地形服务
      // terrainProvider: new Cesium.CesiumTerrainProvider({
      //   url:
      //     "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",
      //   requestWaterMask: true,
      //   requestVertexNormals: true,
      // }),
    });

    // this.viewer.imageryLayers.addImageryProvider(
    //   new Cesium.WebMapTileServiceImageryProvider({
    //     url:
    //       "http://t0.tianditu.gov.cn/vec_w/wmts?tk=d72eb2ed6b64ad229792a696d9c36a30",
    //     layer: "vec",
    //     style: "default",
    //     format: "tiles",
    //     tileMatrixSetID: "v",
    //     show: true,
    //   })
    // );
    // this.viewer.imageryLayers.addImageryProvider(
    //   new Cesium.WebMapTileServiceImageryProvider({
    //     url:
    //       "http://t0.tianditu.gov.cn/cva_w/wmts?tk=d72eb2ed6b64ad229792a696d9c36a30",
    //     layer: "cva",
    //     style: "default",
    //     format: "tiles",
    //     tileMatrixSetID: "v",
    //     show: true,
    //   })
    // );

    // let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
    //   0,
    //   -45,
    //   0.025883251314954971306
    // );
    // this.viewer.scene.camera.setView({
    //   destination: new Cesium.Cartesian3.fromDegrees(113.65, 34.05, 100000),
    //   orientation: {
    //     heading: initialOrientation.heading,
    //     pitch: initialOrientation.pitch,
    //     roll: initialOrientation.roll,
    //   },
    // });
  },

  methods: {
    initMap() {},
  },
};
</script>
    
<style>
/* 加~前缀才会解释成模块路径 */
/* @import "~@supermap/iclient3d-webgl/Cesium/Widgets/widgets.css"; */
@import "~cesium/Build/Cesium/Widgets/widgets.css";
#scene {
  width: 100%;
  height: 100vh;
  margin: 0px;
  background-color: lightgray;
}
</style>  

 

本文地址：https://blog.csdn.net/qq_34520411/article/details/109270637