文章目录

一：CDN——引入在线的CesiumJS及其样式

参考官网教程：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

用传统的创建网页的方式新建一个html页面，引入在线Cesium.js及css，编写页面代码，然后直接双击打开，页面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files 引入JS文件和样式 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
    
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

在这里插入图片描述

二：npm——webpack方式开发

参考官网教程：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

1 安装node.js 与 npm

在这里插入图片描述

2 创建项目工程

先：创建一个空文件夹，在命令行、项目文件夹下执行npm init，出现了package.json文件
再：新建html、js、css文件

建议直接使用vscode或HBuilder等代码编辑器的终端进行操作，所有命令行操作都在项目文件夹下进行

在这里插入图片描述
src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

src/index.js

console.log('Hello World!');

src/css/main.css

html, body, #cesiumContainer {	
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

3 安装和配置webpack

在终端命令行，项目文件夹中，执行：
npm i webpack webpack-cli --save-dev

-----------------
如果报错：webpack ：无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
则先全局安装webpack ：执行 cnpm install webpack-cli -g
再执行上述命令

创建并配置webpack.config.js

在这里插入图片描述

const path = require('path');

const webpack = require('webpack');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    }
};

4 依次安装loader模块、html-webpack-plugin 插件、webpack-dev-server模块

npm install --save-dev style-loader css-loader url-loader

npm install --save-dev html-webpack-plugin

npm install --save-dev webpack-dev-server

修改webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],
    mode: 'development'
};

修改package.json文件

"scripts": {
    "build": "webpack",
	"start": "webpack serve --config webpack.config.js --open"
  },

执行npm run build

npm run build

执行npm start

npm start

在这里插入图片描述
在这里插入图片描述

5 引入CesiumJS进行开发

5.1 安装Cesium模块

npm install --save-dev cesium

5.2 修改webpack.config.js，引入cesium模块

// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
        // Needed to compile multiline strings in Cesium
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, cesiumSource)
        },
        mainFiles: ['module', 'main', 'Cesium']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],
    mode: 'development',
};

5.3 CesiumJS 静态资源管理配置

5.3.1 安装copy-webpack-plugin插件
npm install --save-dev copy-webpack-plugin
5.3.2 将插件配置到webpack.config.js文件
// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, cesiumSource)
        },
        mainFiles: ['module', 'main', 'Cesium']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopyWebpackPlugin({ 
            patterns: [
                { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
                { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
                { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
            ]
        }),
        new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],
    mode: 'development',
};

5.4 修改页面代码，加入cesium

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="cesiumContainer"></div>
	</body>
</html>

index.js

import { Viewer } from "cesium";
import "cesium/Widgets/widgets.css";
import "../src/css/main.css"

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer');

执行npm start
在这里插入图片描述

如果出现Can’t resolve “xxx” in …的报错，有可能是安装的组件失效，这个时候尝试用 npm i xxx --save，然后再重新启动项目

三：下载源码进行开发

1 下载cesium源码

方式一：通过官网下载地址直接下载 官网地址
方式二：利用GitHub下载 github地址
在这里插入图片描述
在这里插入图片描述

2 安装依赖

解压后进入当前目录，命令行输入 npm install

npm install

3 运行项目

方式一：通过终端命令行
在命令行输入 npm start 或 node server.cjs 回车启动（利用了nodejs的web服务）,​ 导航到对应的网址去查看
在这里插入图片描述
在这里插入图片描述
方式二：通过HBuilder
在这里插入图片描述
方式三：通过VSCode
在这里插入图片描述

4 开发自己的cesium页面

在这里插入图片描述
在这里插入图片描述

四：简化版的源码开发

1 创建项目

新建一个项目文件夹，将cesium源码中的Build文件夹和Apps文件中的HelloWorld.html示例拷入项目文件夹
在这里插入图片描述
修改一下HelloWorld中js文件和css样式的引用路径
在这里插入图片描述

2 运行

在这里插入图片描述

3 仿照helloworld开发其他页面

五：Vue3组件开发——插件方法

1 创建vue工程

1.1 全局安装最新版vue-cli

npm install -g @vue/cli

1.2 创建vue工程

vue ui
//使用可视化界面创建vue项目，选择2.X版本（3.X版本在后续开发中因为版本太高会有很多报错）

2 安装cesium插件

插件GitHub地址：https://github.com/isboyjc/vue-cli-plugin-cesium

全局安装：vue add vue-cli-plugin-cesium
局部安装：npx vue add vue-cli-plugin-cesium
PS：不要选最新版本，会报错

3 cesium页面开发

这里我们简单修改一下About.vue页面，看一下效果即可

<template>
  <div class="about">
    <h1>This is an about page</h1>
	<div class="map">
		<div id="cesiumContainer">
			
		</div>
	</div>
  </div>
</template>

<script>
	export default{
		name:"",
		mounted() {
			// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';
			let viewer = new Cesium.Viewer("cesiumContainer")
		}
	}
</script>

<style>
	.map{
		width: 100%;
		height: 800px;
	}
</style>

运行，点击About切换到修改的页面

npm run serve

在这里插入图片描述
发现没有地球出现，报了401的错误，是权限问题
在这里插入图片描述
继续修改About.vue页面，添加token
在这里插入图片描述

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';

如果无效的话去官网看一下如何获取自己的token

官网：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
在这里插入图片描述

六：vue组件开发——webpack配置文件方式（未完待续…）

本人太菜，bug太多解决不完，以后有缘再补充吧，累了☺

# vue.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue