cesium教程(一):创建cesium应用

1,157 阅读2分钟

创建一个 cesium 应用

1-创建一个帐户并获得一个令牌

Cesium ion 是一个用于流式传输和托管 3D 内容的开放平台。

注册 一个免费的cesium帐户,为您的应用程序获取全球卫星图像和真实世界的 3D 内容。

登录后:

  1. 转到您的 访问令牌 选项卡。
  2. 请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。

image.png

2-设置CesiumJS客户端

CesiumJS 是一个开源的 JavaScript 引擎。我们将使用它来可视化我们从cesium加载的内容。

  • 从 CDN 导入
  • 使用 NPM 安装

2.1-从 CDN 导入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <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>
    Cesium.Ion.defaultAccessToken = 'your_token'; // token

    // `cesiumContainer` 地图容器
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // 添加Cesium OSM building,一个全球3D建筑层。
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // 相机飞到给定的经度、纬度和高度
    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>

2.2-使用 NPM 安装

如果您使用模块打包器(例如 Webpack、Parcel 或 Rollup)构建应用程序,则可以通过运行以下命令安装 CesiumJS:

npm i cesium

下面的代码加载所需的 JavaScript 和 CSS 文件。

// 服务器上CesiumJS静态文件所在的URL
window.CESIUM_BASE_URL = '/';

import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

Cesium.Ion.defaultAccessToken = 'your_token';

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});    

const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   

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),
  }
});
配置 CESIUM_BASE_URL

CesiumJS 需要在您的服务器上托管一些静态文件,例如 Web Worker 和 SVG 图标。配置您的模块捆绑器以复制以下四个目录并将它们作为静态文件提供:

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets

CesiumJS导入之前 window.CESIUM_BASE_URL 全局变量必须设置,指向提供这四个目录的 URL。

例如,如果图像 at 下Assets/Images/cesium_credit.png 有 static/Cesium/ 前缀 http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png,那么您可以按如下方式设置基本 URL:

window.CESIUM_BASE_URL = '/static/Cesium/';

完整的 webpack 配置

// CesiumJS源代码的路径                                         
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: {                                   
        // 使用 require 引入 Cesium 
        toUrlUndefined: true                        
    },                                         
    resolve: {                                 
        alias: {                                   
            cesium: path.resolve(__dirname, cesiumSource)
        },                                          
        mainFiles: ['index', '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'                  
        }),                                         
        // 复制以下四个目录并将它们作为静态文件提供 
        new CopyWebpackPlugin({                     
            patterns: [                                 
                { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }, 
                { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },  
                { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
                { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },
            ]                                          
        }),                                         
        new webpack.DefinePlugin({                  
            // 加载静态资源的基本路径
            CESIUM_BASE_URL: JSON.stringify('')         
        })                                          
    ],                                          
    mode: 'development',                        
    devtool: 'eval',                            
};

2.3-本地引入

以上两种方法都是引用的线上代码,如果我们需要修改源码并且和团队的小伙伴一起使用的话,推荐使用这种方式。

cesium-1.87.1源码编译