Vue Cli4.0+Cesium1.77应用示例

概述

在Vue里结合Cesium的使用，使其打包发布后能正常使用。
页面中通过import加载cesium库。

软件环境

• Vue 2.x
• Vue Cli 4.5.0
• Cesium 1.76
• copy-webpack-plugin 6.0.3
• webpack 4.44.2

实现过程

修改vue.config.js文件

该文件如果不存在则手动在项目根目录下创建，vue cli创建项目的时候默认没这个文件。

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    // 基本路径  3.6之前的版本时 baseUrl
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
                    { from: "node_modules/cesium/Build/Cesium/ThirdParty", to: "ThirdParty" },
                    { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
                    { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }
                ]
            }),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify("")
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false
        }
    }
}

这里配置copywebpackplugin主要是将cesium一些静态资源在打包的时候自动拷贝到包里面。
页面里加载的写法：

<template>
	<div id="cesiumContainer">
	</div>
</template>
<script>
    import "cesium/Build/Cesium/Widgets/widgets.css";
    import * as Cesium from "cesium";
    export default {
        data(){
            return {
            }
        },
        mounted(){
            this.$nextTick( () => {
                this.initView()
            })
        },
        methods:{
            initView(){
                let viewer = new Cesium.Viewer("cesiumContainer");
                let imageryLayers = viewer.imageryLayers;
                let tiandiMap = new Cesium.UrlTemplateImageryProvider({
                    url: "https://{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=44964a97c8c44e4d04efdf3cba594467",
                    subdomains:['t0','t1','t2']
                });
                imageryLayers.addImageryProvider(tiandiMap);
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        114.296063,
                        30.55245,
                        2000000
                    ),
                    orientation: {
                        heading: Cesium.Math.toRadians(0),
                        pitch: Cesium.Math.toRadians(-90),
                        roll: 0.0
                    },
                    duration: 10 // fly time 10s
                });
            },
            onResize(){
            }
        }
    }
</script>

<style scoped lang="scss">
#cesiumContainer {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>>

成果展示

相关链接

参考:https://www.cnblogs.com/reround/p/11943717.html
github项目:https://github.com/zouyaoji/vue-cesium