Cesium.js基础使用（vue）

如何通过Cesium创建一个地图：

1、npm安装(这里使用1.95.0版本)

npm i [email protected] -s
或
yarn add [email protected] -s

2、组件引入

import * as Cesium from "cesium/Cesium";

3、容器创建

4、核心类Viewer创建

在Cesium中Viewer是一切的开端，通过newCesium.Viewer(container, options)来创建一个Viewer对象，可以把该对象理解为三维虚拟地球，在Viewer对象上的所有操作，可以看作是对三维虚拟地球的操作。

const viewer = new Viewer("cesiumContainer", {
        infoBox: false,
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false, // 是否全屏显示
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false, // 取消点击有绿框
        // imageryProvider: false, // 不提供地图
        baseLayerPicker: true, //是否显示图层选择控件
      });

5、 设置初始位置（经纬度、缩放比例）

    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          113.764043,
          34.005325,
          8000000
        ),
      });

此时，一个地球就出现了!!!

cesium内置了一些图层供我们切换。

 还可以通过一些json数据给地图添加想要的区块图层

• 通过阿里云数据可视化平台拿到相应地区的json数据DataV.GeoAtlas地理小工具系列
• 使用Cesium.GeoJsondataSource.load添加

    //阿里云地理信息工具 数据获取
      viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load(
          "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
        )
      );

我们还可以通过cesium对一些建筑物进行观察

但需要申请Cesium的令牌(token)

如何申请？

通过以下官网地址申请

 Cesium ion

 使用：

 Cesium.Ion.defaultAccessToken =       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDVhMjQ0Yi05MDg4LTRlNDYtYTIxMi00YmI4ZWYxOWMyNTgiLCJpZCI6MTQ5MzYwLCJpYXQiOjE2ODc3ODQ0OTh9.KlhT_LCnsEtYyawpEmJ_wx44_qTUbgze-SxGMRavbAM";

之后就可以访问高清页面；

完整代码