CesiumJS入门

一、cesium 基本了解

cesium 是一个跨平台、跨浏览器的展示三维地球和地图的开源 JavaScript 库。

二、创建账户

1. 注册一个免费的 cesium 账户，以便于获取 cesium 地图资源
2. 登录并获取 token，拷贝下 token，待使用
   

三、安装

npm install cesium --save

四、webpack 配置

1. 配置 @open-wc/webpack-import-meta-loader
   cesium 中使用到了 import.meta，因此在 webpack 中需要配置该 loader。

• 安装
  npm install @open-wc/webpack-import-meta-loader --save-dev
• 配置

rules: [
    {
        test: /\.js$/,
        include: /(cesium)/,
        use: {
            loader: '@open-wc/webpack-import-meta-loader',
        }
    }
]

2. 配置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

我们使用copy-webpack-plugin来解决这个问题。

• 安装
  npm install copy-webpack-plugin --save-dev
• 配置

const CopyWebpackPlugin = require('copy-webpack-plugin');

...

new CopyWebpackPlugin({
  patterns: [
    // cesium资源文件
    {
      from: 'node_modules/cesium/Build/Cesium/Workers',
      to: 'static/cesium/Workers',
    },
    {
      from: 'node_modules/cesium/Build/Cesium/ThirdParty',
      to: 'static/cesium/ThirdParty',
    },
    {
      from: 'node_modules/cesium/Build/Cesium/Assets',
      to: 'static/cesium/Assets',
    },
    {
      from: 'node_modules/cesium/Build/Cesium/Widgets',
      to: 'static/cesium/Widgets',
    },
  ]
})

这样，四个文件就会被复制到/static/cesium/下。

五、使用

1. 创建一个 div，id 为cesiumContainer

render() {
    return <div style={{ width: 1000, height: 600 }} id="cesiumContainer" />;
  }

2. 引用并初始化

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

window.CESIUM_BASE_URL = '/static/cesium/';
Cesium.Ion.defaultAccessToken = '这里是你之前复制的token';

...

// "cesiumContainer"是需要渲染地图的dom的id.
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),
  }
});

这时候就能够看到效果了。效果如下：

3. 去除不要的功能和 logo
   创建 viewer 的时候加入额外的参数

const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 是否显示点击元素之后显示的信息
    animation: false, // 是否显示动画空间
    fullscreenButton: false, // 是否显示全屏按钮
    geocoder: false, // 是否显示地名查找控件
    homeButton: false, // 是否显示home键
    navigationHelpButton: false, // 是否显示帮助信息控件
    sceneModePicker: false, // 是否显示投影方式
    timeline: false, // 是否显示时间线控件
    baseLayerPicker: false, // 是否显示图层选择控件
    selectionIndicator: false, // 是否显示指示器组件
    terrainProvider: Cesium.createWorldTerrain(),
});
viewer._cesiumWidget._innerCreditContainer.style.display = 'none'; // 去除logo信息

参考：
CesiumJS 官方文档：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/