搭建了一个简单的 Vue Cesium 架子，可以直接拉取项目，自己扩展。
https://github.com/martinageradams/vue-cesium-example
vue-cesium-example

Project setup
use git clone [email protected] :martinageradams/vue-cesium-example.git yarn install
Compiles and hot-reloads for development yarn serve
Compiles and minifies for production yarn build
Run your unit tests yarn test:unit
Lints and fixes files yarn lint
vue.config.js // vue.config.js const CopyWebpackPlugin = require("copy-webpack-plugin"); const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ // Copy Cesium Assets, Widgets, and Workers to a static directory 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({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify("") }) ], module: { // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted" // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6 unknownContextCritical: false, unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/ } } };
Map.vue <template> <div id="cesiumContainer"></div> </template> <script> import "cesium/Build/Cesium/Widgets/widgets.css"; import * as Cesium from "cesium"; export default { name: "Map", mounted() { this.init(); }, methods: { init() { let viewer = new Cesium.Viewer("cesiumContainer"); let imageryLayers = viewer.imageryLayers; let googleMap = new Cesium.UrlTemplateImageryProvider({ url: "http://www.google.com/maps/ [email protected] &x={x}&y={y}&z={z}" }); imageryLayers.addImageryProvider(googleMap); // fly viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( 114.296063, 30.55245, 20000000 ), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 }, duration: 10 // fly time 10s }); } } }; </script> <style lang="scss" scoped> #cesiumContainer { width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden; } </style>
Customize configuration
See Configuration Reference .