Cesium-使用指南

简介

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.
CesiumJS 是一个 JavaScript 库，用于在 Web 浏览器中创建 3D 地球仪和 2D 地图，无需插件。它使用 WebGL 进行硬件加速图形处理，并且跨平台、跨浏览器，并针对动态数据可视化进行了调整。

Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets.
CesiumJS 基于开放格式构建，旨在实现强大的互操作性和对海量数据集的扩展。

注册

登陆cesium官网注册账号，然后前往用户控制面板查看自己的Access Tokens，最好新建一个token，打开全部权限。

登陆天地图官网进行注册，进入用户平台。创建新的应用，得到应用的key。

安装CesiumJS

CDN安装-主要安装方式

Below is a complete HTML page that will load the required JavaScript and CSS files and initialize the scene at San Francisco. If you don’t have a development environment, you can create a file containing this HTML and view it in a browser.
下面是一个完整的 HTML 页面，它将加载所需的 JavaScript 和 CSS 文件并初始化旧金山的场景。如果您没有开发环境，您可以创建一个包含此 HTML 的文件并在浏览器中查看它。

Just replace your_access_token with your Cesium ion access token.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    
    

    Cesium.Ion.defaultAccessToken = 'your_access_token';

    
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    

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

    
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);   
  </script>
 </div>
</body>
</html>

CesiumJSHelloWorld

挂载服务器

在本地打开的html可以预览格式和js，但是调用cesium的地图服务需要采用http传输协议，所以在本地容易出现卡地图加载不出来的情况。

需要将静态页面部署到有公网ip的服务器上，进行静态页面访问即可。

宝塔新建静态网页

默认网页端口是80，如果想创建多个网站，可以使用多端口映射。

先去ecs控制台打开81（也可以自己定义）端口，然后宝塔界面安全组也打开。

网站→添加站点
域名：xxx.xxx.xxx.xxx:81
根目录：www/wwwroot/新建网站文件夹
FTP：无
数据库：无
PHP版本：纯静态
网站分类：默认分类

创建完成之后根目录中index.html即可
可以通过xxx.xxx.xxxx.xxx:81访问index
根目录中其他网页可以输入xxx.xxx.xxxx.xxx:81/xxx.html访问

NPM安装-参考安装，本文不采用

If you’re building your application using a module bundler such as Webpack, Parcel, or Rollup, you can install CesiumJS by running:
如果您使用模块捆绑器（例如 Webpack、Parcel 或 Rollup）构建应用程序，则可以通过运行以下命令安装 CesiumJS：

npm install cesium

The code below loads the required JavaScript and CSS files.
以下代码加载所需的 JavaScript 和 CSS 文件。

Just replace your_access_token with your Cesium ion access token.
只需将 your_access_token 替换为您的 Cesium ion 访问令牌即可。

// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = '/';

import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

// Your access token can be found at: https://ion.cesium.com/tokens.
// Replace `your_access_token` with your Cesium ion access token.

Ion.defaultAccessToken = 'your_access_token';

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});    

// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
  orientation: {
    heading: CesiumMath.toRadians(0.0),
    pitch: CesiumMath.toRadians(-15.0),
  }
});

// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = await createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);

Configuring CESIUM_BASE_URL

CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. Configure your module bundler to copy the following four directories and serve them as static files:
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

The window.CESIUM_BASE_URL global variable must be set before CesiumJS is imported. It must point to the URL where those four directories are served.

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

For example, if the image at Assets/Images/cesium_credit.png is served with a static/Cesium/ prefix under http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png, then you would set the base URL as follows:

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

See the Cesium Webpack Example for a complete Webpack config.
请参阅 Cesium Webpack 示例以了解完整的 Webpack 配置。

地图

Cesium平台提供的地图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<script src="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script>
	<link href="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
	<div id="cesiumContainer"></div>
		<script>
            
            const viewer = new Cesium.Viewer("cesiumContainer", {
				baseLayer: Cesium.ImageryLayer.fromProviderAsync(
					Cesium.IonImageryProvider.fromAssetId(3813)
				),
            });
		</script>
	<div id="csiumContain"></div>
</body>
</html>

添加个人token会导致无法调用地图。

其中AssetId为官方提供的id地址

<script>
const viewer = new Cesium.Viewer('cesiumContainer', 
    {
		baseLayer: Cesium.ImageryLayer.fromProviderAsync(
			Cesium.IonImageryProvider.fromAssetId(3)
		),
    }
});
</script>

在cesium-用户控制台中My Assets可以找到对应的id

ID	Name	Type	Data added	Size
2275207	Google Photorealistic 3D Tiles	3D Tiles	2023-9-13	-
96188	Cesium OSM Buildings	3D Tiles	2020-5-1	-
4	Bing Maps Road	Imagery	2016-10-27	-
3	Bing Maps Aerial with Labels	Imagery	2016-10-27	-
2	Bing Maps Aerial	Imagery	2016-10-27	-
1	Cesium World Terrain	Terrain	2016-10-18	-
3831	Natural Earth II	-	-	-

Google Photorealistic 3D Tiles Cesium OSM Buildings Bing Maps Road Bing Maps Aerial with Labels Cesium World Terrain Natural Earth II

天地图提供的地图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<script src="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script>
	<link href="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
	<div id="cesiumContainer"></div>
		<script>
			
			var token = 'xxx';
			
			
			
			var subdomains=['0','1','2','3','4','5','6','7'];
			var viewer = new Cesium.Viewer('cesiumContainer',{
				shouldAnimate: true,
				selectionIndicator:true,
				animation:true,       
				homeButton:true,       
				geocoder:true,         
				baseLayerPicker:true, 
				timeline:true,        
				fullscreenButton:true, 
				infoBox:true,         
				sceneModePicker:true,  
				navigationInstructionsInitiallyVisible:true, 
				navigationHelpButton:true,     
				selectionIndicator:true, 
				imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({
					
					url: "http://t0.tianditu.gov.cn/ter_c/wmts?tk="+token,	
					
					subdomains: subdomains,
					layer: "tdtImgLayer",
					style: "default",
					format: "image/jpeg",
					tileMatrixSetID: "GoogleMapsCompatible",
					show: true
				})
			});

			viewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({
				

				url: "http://t0.tianditu.gov.cn/cta_w/wmts?tk="+token,	
				subdomains: subdomains,
				layer: "tdtCiaLayer",
				style: "default",
				format: "image/jpeg",
				tileMatrixSetID: "GoogleMapsCompatible",
				show: true
			}));
			
			viewer.camera.setView({
				
				destination:Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076,20000000),
				orientation:{
				
				heading:Cesium.Math.toRadians(270,0),
				
				pitch:Cesium.Math.toRadians(-90),
				roll:0.0
				}
			});
			
			viewer.scene.mode = Cesium.SceneMode.SCENE2D;

		</script>
</body>
</html>

矢量底图

天地图_矢量底图

经纬度投影：http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥

矢量注记

天地图_矢量注记

经纬度投影：http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥

影像底图

天地图_影像底图

经纬度投影：http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥

影像注记

天地图_影像注记

经纬度投影：http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥

地形晕眩

天地图_地形晕眩

经纬度投影：http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥

地形注记

天地图_地形注记

经纬度投影：http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥

全球境界

天地图_全球境界

经纬度投影：http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥

球面墨卡托投影：http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥

三维地名

天地图_三维地名

调用说明：http://lbs.tianditu.gov.cn/docs/#/sanwei/

cesuim扩展包：http://lbs.tianditu.gov.cn/docs/#/sanwei/

服务地址：https://[ t0-t7 ].tianditu.gov.cn/mapservice/GetTiles?tk=您的密钥

三维地形

天地图_三维地形

调用说明：http://lbs.tianditu.gov.cn/docs/#/sanwei/

cesuim扩展包：http://lbs.tianditu.gov.cn/docs/#/sanwei/

服务地址：https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=您的密钥

备注

天地图地图服务二级域名包括t0-t7，您可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密钥

元数据查询：
http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts

地图瓦片获取：
http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥

画点

月球点案例

<script>
const pointsOfInterest = [
  {
    text: "Apollo 11",
    latitude: 0.67416,
    longitude: 23.47315,
  },
  {
    text: "Apollo 14",
    latitude: -3.64417,
    longitude: 342.52135,
  },
  {
    text: "Apollo 15",
    latitude: 26.13341,
    longitude: 3.6285,
  },
  {
    text: "Lunokhod 1",
    latitude: 38.2378,
    longitude: -35.0017,
  },
  {
    text: "Lunokhod 2",
    latitude: 25.83232,
    longitude: 30.92215,
  },
];


const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.IonImageryProvider.fromAssetId(3813)
  ),
});

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076),
  point: {
    color: Cesium.Color.YELLOW,
    pixelSize: 10
  }
});
</script>

添加多个点

<script>

const positions = [
  [56.20149, -121.906864],
  [57.00581, -122.605421],
  [57.00405, -122.682536],
  [57.06126, -122.344514],
  [57.54797, -122.754017],
  [57.33774, -122.300309],
  [57.58799, -122.798906],
  [56.23782, -122.059896],
  [56.66702, -122.241126],
  [56.96679, -122.183874],
  [56.99772, -122.251137],
  [52.42144, -122.44831],
  [56.38861, -122.31356],
  [56.87023, -122.12061]
];


positions.forEach((pos, index) => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(pos[1], pos[0]),  
    point: {
      color: Cesium.Color.fromRandom({alpha: 1.0}), 
      pixelSize: 10,
    },
    label: {
      text: `Point ${index + 1}`,
      font: '14pt sans-serif',
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(5, 5)
    }
  });
});


viewer.zoomTo(viewer.entities);
</script>

设置中心点

viewer.camera.setView({
    // fromDegrees()方法，将经纬度和高程转换为世界坐标
    destination:Cesium.Cartesian3.fromDegrees(117.48,30.67,15000.0),
    orientation:{
    // 指向
    heading:Cesium.Math.toRadians(90,0),
    // 视角
    pitch:Cesium.Math.toRadians(-90),
    roll:0.0
    }
});

viewer.camera.flyTo({
    // fromDegrees()方法，将经纬度和高程转换为世界坐标
    destination:Cesium.Cartesian3.fromDegrees(117.48,30.67,15000.0),
    orientation:{
    // 指向
    heading:Cesium.Math.toRadians(90,0),
    // 视角
    pitch:Cesium.Math.toRadians(-90),
    roll:0.0
    }
});

设置默认显示模式

// 2.5D 哥伦布模式
viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
// 2D 模式
viewer.scene.mode = Cesium.SceneMode.SCENE2D;
// 3D 模式
viewer.scene.mode = Cesium.SceneMode.SCENE3D;
// 变形模式
viewer.scene.mode = Cesium.SceneMode.MORPHING;

截图

<script>
    function saveToFile() {
        let canvas = viewer.scene.canvas;
        let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        let link = document.createElement("a");
        let blob = dataURLtoBlob(image);
        let objurl = URL.createObjectURL(blob);
        link.download = "scene.png";
        link.href = objurl;
        link.click();
    }

    function dataURLtoBlob(dataurl) {
        let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
        	u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
</script>
<div id="toolbar" class="param-container tool-bar layui-form-item">
	<button  onclick="saveToFile()">场景出图</button>
</div>

沙盒代码

// Natural Earth II 3831
const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.IonImageryProvider.fromAssetId(3813)
  ),
});

viewer.camera.setView({
    // fromDegrees()方法，将经纬度和高程转换为世界坐标
    destination:Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076,20000000),
    orientation:{
    // 指向
    heading:Cesium.Math.toRadians(270,0),
    // 视角
    pitch:Cesium.Math.toRadians(-90),
    roll:0.0
    }
});

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076),
  point: {
    color: Cesium.Color.YELLOW,
    pixelSize: 10
  }
});

// Natural Earth II 3831
const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.IonImageryProvider.fromAssetId(3813)
  ),
});

// 设置相机视角以覆盖所有点
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(-122.5, 55, 1000000),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-45),
    roll: 0.0
  }
});

// 使用提供的坐标创建点位置数组
const positions = [
  [56.20149, -121.906864],
  [57.00581, -122.605421],
  [57.00405, -122.682536],
  [57.06126, -122.344514],
  [57.54797, -122.754017],
  [57.33774, -122.300309],
  [57.58799, -122.798906],
  [56.23782, -122.059896],
  [56.66702, -122.241126],
  [56.96679, -122.183874],
  [56.99772, -122.251137],
  [52.42144, -122.44831],
  [56.38861, -122.31356],
  [56.87023, -122.12061]
];

// 为每个位置添加一个点实体
positions.forEach((pos, index) => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(pos[1], pos[0]),  // 注意：经度在前，纬度在后
    point: {
      color: Cesium.Color.fromRandom({alpha: 1.0}), // 随机颜色
      pixelSize: 10,
    },
    label: {
      text: `Point ${index + 1}`,
      font: '14pt sans-serif',
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(5, 5)
    }
  });
});

// 设置相机视角以适应所有点
viewer.zoomTo(viewer.entities);

// Natural Earth II 3831
const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.IonImageryProvider.fromAssetId(3831)
  ),
});

viewer.camera.setView({
    // fromDegrees()方法，将经纬度和高程转换为世界坐标
    destination:Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076,20000000),
    orientation:{
    // 指向
    heading:Cesium.Math.toRadians(0,0),
    // 视角
    pitch:Cesium.Math.toRadians(-90),
    roll:0.0
    }
});

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-121.9068641,56.20149076),
  point: {
    color: Cesium.Color.YELLOW,
    pixelSize: 10
  }
});

// 定义多个点的数据
const points = [
    { lon: -121.9068641, lat: 56.20149076, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.6054214, lat: 57.00580928, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.6825364, lat: 57.004054, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.3445136, lat: 57.06126005, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.7540172, lat: 57.54796791, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.3003092, lat: 57.33774351, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.7989062, lat: 57.58799072, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.0598957, lat: 56.23781614, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.2411258, lat: 56.66701811, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.1838739, lat: 56.96678936, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.251137, lat: 56.99771651, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.44831, lat: 52.42144, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.31356, lat: 56.38861, color: Cesium.Color.YELLOW, pixes: 10 },
    { lon: -122.12061, lat: 56.87023, color: Cesium.Color.YELLOW, pixes: 10 }
];

// 遍历点数据并添加到地图上
points.forEach(point => {
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
        point: {
            color: point.color,
            pixelSize: point.pixes
        }
    });
});

推荐订阅源

HibisciDai

简介

注册