Vue + Cesium

VUE

First, install the node environment

1. [Official website download][https://nodejs.org/zh-cn/] It is recommended to download a long-term stable version
2. Check if the installation is successful
   • Open the cmd command line
   • Enter node -v
   • View the version number (the version number indicates success)

two,Building a vue project

1, global installation vue-cli

Open the cmd input anywhere:npm install --global vue-cl

2, create a project

Open the cmd input below the folder you created:vue init webpack test

3, configure the vue environment to be installed

After the second step command appears, a series of options will appear:

	1) Project name (test) project name, confirm the direct return key, otherwise enter your desired project name
	 2) Project description Project description, press Enter (enter is YES)
	 3) Author Doesn't matter, press Enter.
	 4) Too much, too lazy to play, always confirm...
	 5) set up unit test unit test, I generally use n
	 6) set e2e test with Nightwatch e2e automation, will not use n
	
	 After confirming the confirmation, the rest will be completed!

4, start the project

Enter the command below the vue project: npm run dev

Click on localhost:8080 and your project will run.

Cesium

First, install Cesium

Enter the command: npm install cesium

Second, transfer compiled cesium static files

Willnode_modules\cesium\Build BelowCesiumFile, copy tostaticIn the file, remember to delete Cesium.js

WillCesiumThe entire folder is copied over. There are 4 folders below:

Assets--------------->Store imported static resources
ThirdParty--------------->Store third-party resources
Widgets--------------->small parts 
workers--------------->This has not been clarified, and will be updated later.	

Third, modify the Webpack configuration items

Modify it in the webpack.base.conf.js file:

1. Add sourcePrefix: ’ ’

output: {
    path: config.build.assetsRoot，
    filename: '[name].js'，
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath，
    sourcePrefix: ' ' 	/ / Correctly indent multi-line string
 }

2, add unknownContextCritical: false and unknownContextRegExp: /^./.*$/

module: {
    rules: [
     .....
    ]，
    unknownContextRegExp: /^.\/.*$/, //Print warning when loading a specific library
    unknownContextCritical: false	/ / Resolve Error: Cannot find module "."
  }

Fourth, create components

<div id="cesiumContainer"></div>

import Cesium from 'cesium/Source/Cesium.js'
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
import 'cesium/Source/Widgets/widgets.css'

export default {
	data () {
    	return {
    		viewer :'',
    		tileset '',
    	}
    },
	mounted (){
 	  / / Set the static resource directory
      buildModuleUrl.setBaseUrl('../../static/Cesium/')
      // // Create a viewer instance
      this.viewer = new Cesium.Viewer('cesiumContainer', {
      // A collection of data sources that need to be visualized
        animation: false, // Whether to display the animation control
        shouldAnimate: true,
        homeButton: false, // Whether to display the Home button
        fullscreenButton: false, // Whether to display the full screen button
        baseLayerPicker: true, // Whether to display the layer selection control
        geocoder: false, // Whether to display the place name lookup control
        timeline: false, // Whether to display the timeline control
        sceneModePicker: true, // Whether to display the projection mode control
        navigationHelpButton: false, // Whether to display the help information control
        infoBox: false, // Whether to display the information displayed after clicking the feature
        requestRenderMode: true, // Enable request rendering mode
        scene3DOnly: false, // Each geometry instance will only be rendered in 3D to save GPU memory
        sceneMode: 3, // Initial scene mode 1 2D mode 2 2D loop mode 3 3D mode Cesium.SceneMode
        fullscreenElement: document.body // HTML elements rendered in full screen are not found useful for the time being.
      })
      // Remove copyright information
      this.viewer._cesiumWidget._creditContainer.style.display = 'none'
      // Cesium3DTileset is used to implement a wide range of model scene data loading applications.
      // 3D tilt model, manual modeling, BIM model, etc. can be converted to 3DTiles
      this.tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: '../static/Cesium/Assets/Model/Model.json', // data path
        dynamicScreenSpaceError: true,
        cullWithChildrenBounds: false,
        // When skipLevelOfDetail is true, is a constant that defines the minimum number of levels to skip when loading a slice.
        skipLevels: 0,
        maximumScreenSpaceError: 0 // maximum screen space error
        // maximumNumberOfLoadedTiles: 1000, //Maximum number of tiles loaded
      }))
      this.viewer.zoomTo(this.tileset)
    }
   }

Fifth, start the vue project

ps: Red is my 3D model. Now it's just a simple requirement. I will learn slowly and slowly modify it later.

Sixth, the problem

1, the model import path problem

Refer to the code in the creation component, I don't want to copy it again~~

2. An editorial warning appears after startup, but the Earth page can come out

Add a configuration item:

/ / Add in the webpack.base.conf.js file below
 module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.js\.map$/,
        use: {
          loader: 'file-loader'
        }
       }
      .....
    ]
 }

Just started to learn cesium, there are many places to ask questions.