一. Cesium 学习笔记01

最新推荐文章于 2024-06-07 10:46:12 发布

Mr_li@web

最新推荐文章于 2024-06-07 10:46:12 发布

阅读量371

点赞数

分类专栏：学习笔记文章标签：数据可视化 javascript

本文链接：https://blog.csdn.net/weixin_45970617/article/details/114107182

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

快速开始

步骤1.创建一个帐户并获得令牌

使用cesium之前,需到这里获取适用于cesium应用的全球卫星图像和真实3D内容的令牌,类似于百度地图的ak,
在这里插入图片描述

步骤2.设置CesiumJS客户端

本指南涵盖了两种设置CesiumJS的方法：

从CDN导入
使用NPM安装

从CDN导入

下面是一个完整的HTML页面，该页面将加载所需的JavaScript和CSS文件并初始化San Francisco的场景。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
      // 你的token
    Cesium.Ion.defaultAccessToken = '....';
    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),
      }
    });
  </script>
 </div>
</body>
</html>

使用NPM安装

如果使用Webpack，Parcel或Rollup等模块捆绑程序构建应用程序，则可以通过运行以下命令安装CesiumJS：

npm install cesium

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

// 注意顺序,window.CESIUM_BASE_URL必须先引入
window.CESIUM_BASE_URL = '/static/cesium';
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";  

// cesium 申请的token令牌 , at: https://cesium.com/ion/tokens.
    Cesium.Ion.defaultAccessToken ="...";
    // 使用 cesiumContainer ID在HTML元素中初始化Cesium Viewer
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    // 添加全球3D建筑图层Cesium OSM Buildings
    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),
      },
    });
    // 隐藏 底部水印
     viewer._cesiumWidget._creditContainer.style.display = "none";

在静态文件目录public/static里面,新建目录 cesium,并将以下的文件复制到刚创建的cesium目录内

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

运行项目,就能看到如下效果

在这里插入图片描述

Mr_li@web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一. Cesium 学习笔记01

快速开始步骤1.创建一个帐户并获得令牌使用cesium之前,需到这里获取适用于cesium应用的全球卫星图像和真实3D内容的令牌,类似于百度地图的ak,步骤2.设置CesiumJS客户端本指南涵盖了两种设置CesiumJS的方法：从CDN导入使用NPM安装从CDN导入下面是一个完整的HTML页面，该页面将加载所需的JavaScript和CSS文件并初始化San Francisco的场景。<!DOCTYPE html><html lang="en">&l
复制链接

扫一扫