Cesium笔记之快速入门

最新推荐文章于 2025-10-23 02:30:39 发布

原创最新推荐文章于 2025-10-23 02:30:39 发布 · 745 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Cesium #Web GIS

Cesium 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了Cesium的快速入门方法。包括创建放置地图的容器并设置全屏样式，创建全局的Cesium视图对象，基于ArcGIS全球影像地图创建三维地球，根据经纬高设置当前视角，以及创建简单的点实体，可借此创建三维虚拟地球等。

快速开始

1.创建放置地图的容器

<div id='map'></div>

设置样式，使之全屏显示

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

2.创建全局的Cesium视图对象

window.viewer = new Cesium.Viewer('map', {
    animation: false,
    baseLayerPicker: false,
    geocoder: false,
    scene3DOnly: false,
    sceneModePicker: false,
    selectionIndicator: false,
    infoBox: false,
    homeButton: false,
    timeline: false,
    navigationHelpButton: false,
    fullscreenButton: false,
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
       url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
});

注：上面基于ArcGIS全球影像地图创建了一个三维地球。其中各种参数均设为false，只保留了一个干净的地球。如果想了解各个参数，请参照Cesium API文档。

3.根据经纬高设置当前视角

Cesium默认的视角高度大概就是15000000米。

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(112, 30, 15000000)
});

4.创建一个简单的点实体

let point = viewer.entites.add({
	name: 'point',
	position: Cesium.Cartesian3.fromDegress(112, 30),
	point: {
		color: Cesium.Color.RED,
		pixelSize: 10,
		outlineColor: Cesium.BLACK,
		outlineWidth: 3
	}
});