Vue Cli引入Cesium

开始

使用Cesium前，需要先注册Cesium账号，并获取一个授权token（用于访问Cesium的地图资源）。同时，还需要准备一个静态资源服务器；用来存放Cesium中的一些默认资源，以便Cesium访问。

Cesium的源码中带有离线文档，如果在线文档访问慢，则可以在本地部署Cesium的API文档；

提示：如果你已安装了GeoServer，你可能知道GeoServer提供了一个Web服务目录(geoserver/www)；你完全可以将Cesium的静态资源放在 geoserver/www 下；然后使用 http://geoserver/www/... 进行访问，详见：https://www.osgeo.cn/geoserver-user-manual/datadirectory/structure.html

最后，请注意Cesium静态资源服务跨域的问题，根据实际需要配置即可；

安装

npm install cesium

基础配置

// 配置静态资源地址
window.CESIUM_BASE_URL = '/';

// 配置授权token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4Nzk5ODQyYy04ZWU5LTQ4YzktYThkNi01YTE5MDc0MmZkY2YiLCJpZCI6MzYxOTMsImlhdCI6MTYwMzE2MDMyNH0.u0f-LuOb95fu2Jq8KC6KAGjQAUCqlEEbKp50KTS5zb8';

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

开始使用

使用Cesium时，要先创建一个Viewer；Viewe代表一个地图窗口，我们完全可以自定义这个窗口，以及使用它来操作地图；

// 创建地图窗口
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});  

// 添加全球3D图层
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   

// 设置相机位置
// 当你通过Viewer窗口看地图时，你的眼睛就相当于是相机
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

创建Cesium视窗后，会默认加载Cesium提供的在线地图资源；之所以在配置Cesium时要设置授权token，就是为了限制调用Ceisum在线地图资源的频次。可以在创建Ceiums地图视窗时，配置默认图层，以使Cesium不再请求线上的默认地图资源；当不再请求Cesium提供的线上地图资源时，也就不会再验证授权token了。

如下，在离线环境下必须配置默认图层，以避免Cesium请求线上资源，并验证授权token；

let viewer = new Cesium.Viewer(containerDivId,{
    shouldAnimate:true, // 是否自动显示动画
    
    // 配置默认图层（若不配置，则使用Cesium默认提供的在线资源，访问Cesium在线地图资源时需要验证授权token）   
    imageryProvider: new Cesium.SingleTileImageryProvider({
         url:require("../../assets/world.jpg")
    }),
});        

引入示例：https://jw_.coding.net/public/vue-cli-study/vue-cli-study/git/files/master/src/views/map-cesium/Index.vue

官方文档：https://cesium.com/docs/tutorials/quick-start/