共计 1895 个字符,预计需要花费 5 分钟才能阅读完成。
一个简略的 Vue Cli 4 引入 Cesium 的架子,能够间接拉取我的项目,本人扩大。欢送试用,能够 Star 哟!
原文地址:Vue Cli 4 引入 Cesium 配置
Github: https://github.com/martinageradams/vue-cesium-example
Vue
我的项目搭建,我就不展现了。依照官网间接一步一步进行就能够。也不展现 webpack
配置的坑了,依照上面的代码配置,我的项目就能用。
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/vt?lyrs=s@716&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>
正文完