# cesium-exercise

**Repository Path**: lvye1221/cesium-exercise

## Basic Information

- **Project Name**: cesium-exercise
- **Description**: cesium练习仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-11
- **Last Updated**: 2022-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cesium-exercise

## your-first-app

https://cesium.com/docs/tutorials/getting-started/#your-first-app

AGI_HQ.kmz


csdn 下载
https://download.csdn.net/download/qq_36925475/11240163


	
## cesium-workshop


https://github.com/AnalyticalGraphicsInc/cesium-workshop


```
git clone https://github.com/AnalyticalGraphicsInc/cesium-workshop
```


---------
设置局域网内部可以访问：

server.js
```

L17 行，

        'public' : {
            'default' : true,

```

---------
如何加载纽约建筑物地图？

【未解决】在仓库中，存在 nyc-app，有类似的代码，但貌似需要科学上网

```
    // Load the NYC buildings tileset
    var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s',
        maximumScreenSpaceError: 16 // default value
    }));

```

【注意】在部署到 tomcat 服务器下，又可以显示出来。可能存在原因是 本地调试过程中，不能请求到图层结果出现的原因吧。



### 主要步骤

设定 AccessToken


1. 创建 cesium 容器
2. 加载图层文件
3. 设定地图中心点 (可配置Home位置)
4. 添加地图标签 (kml: 可设置标签提示表格形式)
5. 多边形区域 (geojson: 设置区域)
6. 加载飞行器以及其飞行路线 (czml: )
7. 可配置HTML标签点击事件 (通过点击配置)


### 常用代码积累


初始场景设置

```
	// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
	viewer.scene.camera.setView(homeCameraView);

```


---------

实体的表格属性

```
var kmlOptions = {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas,
    clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
	var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);
	
// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);
	
    // Get the array of entities
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        if (Cesium.defined(entity.billboard)) {
            // Entity styling code here
			
			if (Cesium.defined(entity.billboard)) {
				// Adjust the vertical origin so pins sit on terrain
				entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
				// Disable the labels to reduce clutter
				entity.label = undefined;
				// Add distance display condition
				entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);

				
				// Compute longitude and latitude in degrees
				var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
				var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
				var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
				// Modify description
				// Modify description
				var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
					'<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
					'<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
					'</tbody></table>';
				entity.description = description;
			}
        }
    }
	
});

```






---------
实体类



```

	// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

var drone;	

dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);

	// Get the entity using the id defined in the CZML data
    drone = dataSource.entities.getById('Aircraft/Aircraft1');
    // Attach a 3D model
    drone.model = {
        uri : './Source/SampleData/Models/CesiumDrone.gltf',
        minimumPixelSize : 128,
        maximumScale : 1000,
        silhouetteColor : Cesium.Color.WHITE,
        silhouetteSize : 2
    };

	// Add computed orientation based on sampled positions
	drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

	// Smooth path interpolation
	drone.position.setInterpolationOptions({
		interpolationDegree : 3,
		interpolationAlgorithm : Cesium.HermitePolynomialApproximation
	});

});


```




---------

可配置HTML标签点击事件

```
var neighborhoodsElement =  document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
    neighborhoods.show = e.target.checked;
});



var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
    viewer.shadows = e.target.checked;
});


```