-
版本: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>