Hi Cesium Community,
I am trying to build a Vue-Cesium app, the code i got is from gitee, it runs fine on my dev server but shows a blank page when i build it. I am loading a .glb 3D model into it served on apache local host. Please help me fix the directories and file paths.
following are my files
App.vue
<script>
import CesiumViewer from '@/components/CesiumViewer.vue'
export default {
name: 'app',
components: {
CesiumViewer,
}}
</script>
<style></style>
CesiumViewer.vue (Component)
*<template>
<div style="height:100%;">
<div id="cesiumContainer"></div>
<div class="toolbar">
</div>
</div>
</template>
<script>
import Cesium from "cesium/Cesium";
import widget from "cesium/Widgets/widgets.css";
export default {
name: "CesiumViewer",
data() {
return {
viewer: {},
isShowToolBar: false,
};},
methods: {
init() {
var that = this;
that.$store.commit("clearMembers");
Cesium.Ion.defaultAccessToken = --my--token
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneMode: Cesium.SceneMode.SCENE3D,
terrainProvider : new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
}),
baseLayerPicker: false,
geocoder: false,
timeline: false,
animation: false,
homeButton: false,
fullscreenButton: false,
sceneModePicker: true,
navigationInstructionsInitiallyVisible: false,
navigationHelpButton: false
});
var center = Cesium.Cartesian3.fromDegrees(73.45696,33.96488, 20000.0);
viewer.camera.setView( { destination : center,
orientation: {
heading : Cesium.Math.toRadians(0), // east, default value is 0.0 (north)
pitch : Cesium.Math.toRadians(-90), // default value (looking down)
roll : 0.0 }}); // default value
this.viewer = viewer;
this.$store.commit("initViewer", viewer);
createModel('http://localhost/data/Scalling OSm Joined file.glb');
function createModel(url) {
var position = Cesium.Cartesian3.fromDegrees(
// 73.45678252150161,
// 73.45695,
73.45696,
// 33.964688085558166,
// 33.96491,
33.96488,
1777,
);
var heading = Cesium.Math.toRadians(90);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
viewer.entities.add({
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
} }); } } },
mounted() {
this.init();
},
};
</script>*
Index.js (Router)
*import Vue from 'vue'
*import Router from 'vue-router'
*import CesiumViewer from '../components/CesiumViewer.vue'
*Vue.use(Router)
*export default new Router({
* routes: [
*
* {
* path: '',
* name: 'map',
* component: CesiumViewer
* },
*
* ],
*})*
Vue.Config.js
*const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
// let staticDic = './static'
module.exports = {
baseUrl: '',
// outputDir :"../www",
// {
devServer: {
port: 9528
},
configureWebpack: {
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
// new CopyWebpackPlugin([ { from: path.join(staticDic, 'imageData'), to: 'imageData'}]),
// new CopyWebpackPlugin([ { from: path.join(staticDic, 'model'), to: 'model3D'}]),
new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('') })
],
module: {
// unknownContextCritical: /^.\/.*$/,
// unknownContextCritical: false,
rules: [{
test: /\.gltf$/,
use: [{
loader: 'file-loader',
options: {}
}]
}]
}
}
}*
Index.js (Store)
*import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
viewer: {},
},
actions: {},
mutations: {
initViewer(state, payload) {state.viewer = payload;},
},
});
export default store*
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuex from 'vuex';
Vue.use(Vuex)
Vue.config.productionTip = false
document.addEventListener("deviceready", init, false);
if(process.env.NODE_ENV !== 'production')
init()
function init(){
alert('main init')
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')}
Package.json
*{
“name”: “vuec”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“cesium”: “^1.52.0”,
“element-ui”: “^2.4.11”,
“vant”: “^1.4.8”,
“vue”: “^2.5.17”,
“vue-router”: “^3.0.2”,
“vuex”: “^3.0.1”
},
“devDependencies”: {
“@vue/cli-plugin-babel”: “^3.2.0”,
“@vue/cli-plugin-eslint”: “^3.2.1”,
“@vue/cli-service”: “^3.2.0”,
“babel-eslint”: “^10.0.1”,
“eslint”: “^5.8.0”,
“eslint-plugin-vue”: “^5.0.0-0”,
“vue-template-compiler”: “^2.5.17”
},
“eslintConfig”: {
“root”: true,
“env”: {
“node”: true
},
“extends”: [
“plugin:vue/essential”,
“eslint:recommended”
],
“rules”: {},
“parserOptions”: {
“parser”: “babel-eslint”
}
},
“postcss”: {
“plugins”: {
“autoprefixer”: {}
}
},
“browserslist”: [
“> 1%”,
“last 2 versions”,
“not ie <= 8”
]
}
*